/* Phase 13 — Developer panel + docs styling. Theme-aware (inherits
   --card-bg, --card-border, etc. from the main stylesheet). */

.dev-panel { max-width: 960px; }

.dev-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05), rgba(var(--bs-primary-rgb), 0.01));
    border: 1px solid var(--card-border, rgba(0,0,0,.08));
}
[data-bs-theme="dark"] .dev-hero { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.12), rgba(255,255,255,0.01)); }
.dev-hero h2 i { color: var(--bs-primary); }
.dev-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.dev-callout { display: flex; gap: 0.6rem; align-items: flex-start; }

.dev-empty {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed var(--card-border, rgba(0,0,0,.15));
    border-radius: 14px;
}
.dev-empty i { font-size: 2.5rem; }

.dev-keys { display: flex; flex-direction: column; gap: 0.85rem; }

.dev-key-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--card-border, rgba(0,0,0,.1));
    border-radius: 12px;
    background: var(--card-bg, #fff);
    transition: border-color .15s, box-shadow .15s;
}
[data-bs-theme="dark"] .dev-key-card { background: rgba(255,255,255,0.015); }
.dev-key-card:hover { border-color: rgba(var(--bs-primary-rgb), 0.4); }
.dev-key-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.dev-key-name { font-weight: 600; word-break: break-word; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.dev-key-prefix code { font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); }
.dev-key-actions { display: flex; gap: 0.25rem; }
.dev-key-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.4rem 1rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); }
.dev-key-meta i { margin-right: 0.25rem; }
.dev-key-scopes { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.6rem; }
.dev-scope-pill {
    font-size: 0.72rem;
    padding: 0.15rem 0.55rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-radius: 999px;
    font-family: var(--bs-font-monospace, monospace);
}

.dev-scope-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem; max-height: 200px; overflow-y: auto; padding-right: 0.5rem; }

.dev-token-row { display: flex; gap: 0.5rem; }
.dev-token-row input { font-family: var(--bs-font-monospace, monospace); font-size: 0.85rem; }

.dev-codeblock {
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--card-border, rgba(0,0,0,.08));
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}
[data-bs-theme="dark"] .dev-codeblock { background: rgba(255,255,255,0.04); }
.dev-codeblock code { color: inherit; background: transparent; padding: 0; font-size: inherit; }

/* Activity table */
.dev-activity-table { font-size: 0.85rem; }
.dev-method { font-family: monospace; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.75rem; }
.dev-method-get    { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.dev-method-post   { background: rgba(25, 135, 84, 0.12);  color: #198754; }
.dev-method-patch  { background: rgba(255, 193, 7, 0.15);  color: #b88a00; }
.dev-method-delete { background: rgba(220, 53, 69, 0.12);  color: #dc3545; }
.dev-status { font-weight: 600; }
.dev-status-2xx { color: #198754; }
.dev-status-3xx { color: #0dcaf0; }
.dev-status-4xx { color: #fd7e14; }
.dev-status-5xx { color: #dc3545; }

/* ===== Documentation page ===== */
.dev-docs { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; }
.dev-docs-nav {
    position: sticky;
    top: 80px;
    align-self: start;
    border-right: 1px solid var(--card-border, rgba(0,0,0,.08));
    padding-right: 1rem;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.dev-docs-nav h6 { color: var(--bs-secondary-color); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; margin-top: 1rem; margin-bottom: 0.3rem; }
.dev-docs-nav a { display: block; padding: 0.25rem 0.5rem; border-radius: 6px; text-decoration: none; color: var(--bs-body-color); font-size: 0.9rem; }
.dev-docs-nav a:hover { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); }
.dev-docs-content section { margin-bottom: 2.5rem; }
.dev-docs-content h2 { padding-top: 0.6rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--card-border, rgba(0,0,0,.08)); padding-bottom: 0.3rem; }
.dev-docs-content h3 { margin-top: 1.4rem; }
.dev-docs-content code { background: rgba(var(--bs-primary-rgb), 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.88rem; }
.dev-docs-content pre { margin: 0.8rem 0; }
.dev-docs-content pre code { background: transparent; padding: 0; font-size: 0.85rem; }
.dev-docs-endpoint { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(0,0,0,0.03); font-family: monospace; }
[data-bs-theme="dark"] .dev-docs-endpoint { background: rgba(255,255,255,0.05); }

@media (max-width: 768px) {
    .dev-docs { grid-template-columns: 1fr; }
    .dev-docs-nav { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--card-border); padding-right: 0; padding-bottom: 1rem; }
}

/* Inline folder picker (Phase 13.2) — embedded in the create-key modal,
   replacing the older modal-on-modal picker which collided with AppModal's
   single shared element. */
.dev-folder-picker {
    border: 1px solid var(--card-border, rgba(0,0,0,.1));
    border-radius: 8px;
    background: var(--card-bg, rgba(0,0,0,0.02));
    padding: 0.6rem;
}
[data-bs-theme="dark"] .dev-folder-picker { background: rgba(255,255,255,0.025); }

.dev-folder-selected {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.dev-folder-crumbs { font-size: 0.8rem; margin-bottom: 0.4rem; }
.dev-folder-crumbs .dev-crumb { text-decoration: none; color: var(--bs-primary); }
.dev-folder-crumbs .dev-crumb:hover { text-decoration: underline; }
.dev-folder-crumbs .dev-crumb-current { font-weight: 600; }

.dev-folder-list {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,.08));
    border-radius: 6px;
}
[data-bs-theme="dark"] .dev-folder-list { background: rgba(0,0,0,0.2); }

.dev-folder-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,.05));
    transition: background-color .1s;
}
.dev-folder-row:last-child { border-bottom: none; }
.dev-folder-row:hover { background: rgba(var(--bs-primary-rgb), 0.05); }
.dev-folder-name { cursor: pointer; }
.dev-folder-name:hover { color: var(--bs-primary); }
.dev-folder-drill { cursor: pointer; padding: 0 0.25rem; }
.dev-pick-btn { white-space: nowrap; font-size: 0.75rem; padding: 0.1rem 0.5rem; }

/* Language tabs in docs (Phase 13.2) — small, compact, with the codeblock
   visually anchored to the active tab so the relationship is obvious. */
.dev-lang-tabs { border-bottom: 1px solid var(--card-border, rgba(0,0,0,.1)); margin-bottom: 0; }
.dev-lang-tabs .nav-link {
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
}
.dev-lang-tabs .nav-link:hover { color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), 0.2); }
.dev-lang-tabs .nav-link.active {
    color: var(--bs-primary);
    background: var(--card-bg, rgba(0,0,0,0.04));
    border-color: var(--card-border, rgba(0,0,0,.1));
}
[data-bs-theme="dark"] .dev-lang-tabs .nav-link.active { background: rgba(255,255,255,0.05); }
.dev-lang-content .dev-codeblock {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Token reveal — icon-only copy button flush with the right edge of the
   input (Phase 13.3). Replaces the older dev-token-row layout that put
   a separate button next to the field. */
.dev-token-input .form-control {
    font-size: 0.88rem;
    background: var(--card-bg, #fff);
}
[data-bs-theme="dark"] .dev-token-input .form-control {
    background: rgba(255,255,255,0.04);
    color: var(--bs-body-color);
}
.dev-copy-btn {
    border-left: none;
    transition: color .12s, background-color .12s;
}
.dev-copy-btn:hover {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
}
.dev-copy-btn.btn-success {
    color: #fff;
    background: var(--bs-success);
    border-color: var(--bs-success);
}

/* ===== Dev console sidebar + workspace switcher ===== */
:root { --dev-accent: var(--bs-primary); }
.dev-shell { display: grid; grid-template-columns: 250px 1fr; gap: 0; min-height: calc(100vh - 70px); }
.dev-sidebar {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--card-border, rgba(255,255,255,.08));
    padding: 14px 0; position: sticky; top: 70px; height: calc(100vh - 70px); overflow-y: auto;
}
.dev-sidebar .nav-section { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); padding: 0.6rem 1.25rem 0.25rem; }
.dev-sidebar .nav-link { display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); padding: 10px 18px; border-radius: 8px; margin: 2px 10px; font-size: 0.92rem; }
.dev-sidebar .nav-link.active, .dev-sidebar .nav-link:hover { background: rgba(var(--bs-primary-rgb), 0.14); color: var(--bs-primary); }
.dev-sidebar .nav-link .badge { margin-left: auto; }
.dev-ws { margin-top: auto; padding: 10px; }
.ws-switcher { display: flex; align-items: center; gap: 10px; width: 100%; background: rgba(125,150,180,0.08); border: 1px solid var(--card-border, rgba(255,255,255,.1)); border-radius: 14px; padding: 9px 11px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.ws-switcher:hover { background: rgba(125,150,180,0.16); border-color: var(--bs-primary); }
.ws-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--bs-primary), #6610f2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ws-meta { flex: 1; min-width: 0; }
.ws-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); line-height: 1.1; }
.ws-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chevron { color: var(--bs-secondary-color); }
#workspaceMenu { max-height: 60vh; overflow-y: auto; border-radius: 14px; }
.ws-item.active { background: rgba(var(--bs-primary-rgb),0.12); }
.dev-main { padding: 1.5rem; max-width: 920px; }
@media (max-width: 768px) {
    .dev-shell { grid-template-columns: 1fr; }
    .dev-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--card-border); flex-direction: row; flex-wrap: wrap; }
    .dev-ws { margin-top: 0; width: 100%; }
}