/* ============================================================
   Global
   ============================================================ */
:root {
    --bg-base:    #0d0d14;
    --bg-sidebar: #12121d;
    --bg-panel:   #16161f;
    --bg-card:    #1c1c2b;
    --border:     rgba(255,255,255,0.08);
    --text-muted: #6c757d;
    --accent:     #198754;
}

html, body {
    height: 100%;
    background-color: var(--bg-base);
    color: #dee2e6;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.font-mono {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    background-color: #0a0a12 !important;
    border-color: var(--border) !important;
}

/* ============================================================
   Inspect layout
   ============================================================ */
.inspect-topbar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
}

#hook-url-input {
    background: var(--bg-card);
    border: 1px solid rgba(25,135,84,0.3);
    color: #20c997 !important;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: .82rem;
}

#hook-url-input:focus {
    box-shadow: 0 0 0 2px rgba(25,135,84,0.25);
    border-color: var(--accent);
}

/* ============================================================
   Request list (left panel)
   ============================================================ */
.request-list-panel {
    width: 280px;
    min-width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
}

.panel-header {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
}

#request-list {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-card) transparent;
}

#request-list::-webkit-scrollbar { width: 5px; }
#request-list::-webkit-scrollbar-track { background: transparent; }
#request-list::-webkit-scrollbar-thumb { background: var(--bg-card); border-radius: 3px; }

.request-item {
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.request-item:hover {
    background: rgba(255,255,255,0.04);
}

.request-item.active {
    background: rgba(25,135,84,0.12);
    border-left: 3px solid var(--accent);
}

/* New request flash animation */
.request-item.request-new {
    animation: flashNew .6s ease-out;
}

@keyframes flashNew {
    0%   { background: rgba(25,135,84,0.3); }
    100% { background: transparent; }
}

/* ============================================================
   Method badges
   ============================================================ */
.method-badge {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: .7rem !important;
    letter-spacing: .04em;
    padding: .25em .55em;
    border-radius: .2rem;
}

.method-GET     { background: #0d6efd !important; }
.method-POST    { background: #198754 !important; }
.method-PUT     { background: #fd7e14 !important; color: #000 !important; }
.method-DELETE  { background: #dc3545 !important; }
.method-PATCH   { background: #6f42c1 !important; }
.method-HEAD    { background: #0dcaf0 !important; color: #000 !important; }
.method-OPTIONS { background: #6c757d !important; }

/* ============================================================
   Detail panel (right)
   ============================================================ */
.detail-panel {
    background: var(--bg-panel);
}

.detail-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.detail-meta {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: .75rem !important;
}

/* ============================================================
   Tabs
   ============================================================ */
.detail-tabs {
    border-bottom: 1px solid var(--border);
    margin-top: .75rem;
}

.detail-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .4rem .8rem;
    font-size: .85rem;
    background: transparent;
    border-radius: 0;
    transition: color .15s, border-color .15s;
}

.detail-tabs .nav-link:hover {
    color: #adb5bd;
    border-bottom-color: rgba(255,255,255,0.2);
}

.detail-tabs .nav-link.active {
    color: #fff;
    border-bottom-color: var(--accent);
    background: transparent;
}

.tab-content-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-card) transparent;
}

.tab-content-wrap::-webkit-scrollbar { width: 5px; }
.tab-content-wrap::-webkit-scrollbar-thumb { background: var(--bg-card); border-radius: 3px; }

/* ============================================================
   Tables inside tabs
   ============================================================ */
.table-dark {
    --bs-table-bg: var(--bg-card);
    --bs-table-striped-bg: var(--bg-panel);
    --bs-table-hover-bg: rgba(255,255,255,0.05);
    --bs-table-border-color: var(--border);
    font-size: .82rem;
}

.table th {
    color: #6c757d;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ============================================================
   Code blocks
   ============================================================ */
#body-content, #body-raw, #raw-content {
    background: #1e1e2e !important;
    border: 1px solid var(--border);
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: none;
}

#body-content code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: .8rem;
}

/* ============================================================
   Poll indicator
   ============================================================ */
#poll-indicator.active {
    background: rgba(25,135,84,0.2) !important;
    color: #20c997 !important;
}

/* ============================================================
   Scrollbar for request list and tab content
   ============================================================ */
.overflow-y-auto {
    overflow-y: auto !important;
}

/* ============================================================
   Homepage
   ============================================================ */
.ls-2 { letter-spacing: .1em; }