/* ════════════════════════════════════════════
   DevKit — Shared styles
   Included on all pages after theme-1.css
   ════════════════════════════════════════════ */

/* ─── Scrollbar ─── */
::-webkit-scrollbar          { width: 7px; height: 7px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #4a4a5a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5FCB71; }
::-webkit-scrollbar-corner   { background: transparent; }
html, body, * { scrollbar-width: thin; scrollbar-color: #4a4a5a transparent; }

/* ─── Toolbar ─── */
.toolbar,
.md-toolbar,
.json-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    background: #f5f5f5 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: .4rem .75rem !important;
    gap: .3rem;
    flex-shrink: 0;
    min-height: 46px;
}

/* ─── Buttons ─── */
.btn,
.btn-tool {
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    height: 32px !important;
    padding: 0 .75rem !important;
    font-size: .82rem !important;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid #d0d0d0 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.btn:hover,
.btn-tool:hover {
    background: #efefef !important;
    border-color: #bbb !important;
}

/* Primary button */
.btn.primary,
.btn-tool.primary {
    background: #5FCB71 !important;
    border-color: #5FCB71 !important;
    color: #fff !important;
}
.btn.primary:hover,
.btn-tool.primary:hover {
    background: #4cc560 !important;
    border-color: #4cc560 !important;
}

/* Danger button */
.btn.danger,
.btn-tool.danger {
    background: #fff !important;
    border-color: #e0a0a0 !important;
    color: #c0392b !important;
}
.btn.danger:hover,
.btn-tool.danger:hover {
    background: #fdf0ef !important;
    border-color: #e74c3c !important;
}

/* ─── Toolbar separator ─── */
.sep,
.toolbar-sep {
    width: 1px !important;
    height: 22px !important;
    background: #ddd !important;
    margin: 0 .2rem !important;
    flex-shrink: 0;
}

/* ─── Select inside toolbar ─── */
.toolbar select,
.md-toolbar select,
.json-toolbar select,
.indent-select {
    height: 32px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding: 0 .5rem;
    font-size: .82rem;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
}

/* ─── Pane labels ─── */
.pane-label {
    background: #292929 !important;
    color: rgba(255,255,255,.55) !important;
    font-size: .68rem !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .75rem !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}
.pane-label button {
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 3px;
    color: rgba(255,255,255,.6);
    font-size: .68rem;
    padding: .15rem .45rem;
    cursor: pointer;
    height: 22px;
    display: inline-flex;
    align-items: center;
}
.pane-label button:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}