:root {
    --shield-red-primary: #ef4444;
    --shield-red-hover: #dc2626;
    --shield-red-light: #fef2f2;
    --shield-red-border: #fecaca;
    --bg-light-base: #f8fafc;
    --sidebar-width: 300px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light-base);
    color: #1e293b;
    overflow-x: hidden;
}

/* Navbar Layout */
.navbar-shield {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

/* Sidebar Component */
.sidebar-wrapper {
    width: var(--sidebar-width);
    background-color: var(--shield-red-light);
    border-right: 1px solid var(--shield-red-border);
    position: fixed;
    top: 57px;
    bottom: 0;
    left: 0;
    z-index: 1020;
    overflow-y: auto;
    padding: 1.5rem 1rem;
}

.sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #475569;
    margin-bottom: 0.5rem;
}

.endpoint-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    color: #334155;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.endpoint-item:hover {
    background-color: rgba(239, 68, 68, 0.08);
    color: var(--shield-red-hover);
}

.endpoint-item.active {
    background-color: #ffffff;
    border: 1px solid var(--shield-red-border);
    color: #991b1b;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05);
}

.badge-method {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    width: 48px;
    text-align: center;
}

.badge-get { background-color: #c7ecde; color: #1b9662; }
.badge-post { background-color: #dbeafe; color: #1e40af; }
.badge-put { background-color: #f6dbfe; color: #7519aa; }
.badge-delete { background-color: #fee2e2; color: #991b1b; }

/* Main Workspace Section */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: 57px;
    padding: 2.5rem;
}

/* Form/Table Stylings */
.table-param th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background-color: #f1f5f9;
}

.table-param td {
    font-size: 0.9rem;
    vertical-align: middle;
}

.type-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #b45309;
    background: #fffbeb;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #fde68a;
}

.req-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
}

/* Postman Interactive Core Container */
.card-workbench {
    border: 1px solid var(--shield-red-border);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.workbench-header {
    background-color: var(--shield-red-primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 0.6rem 1.25rem;
}

.btn-send {
    background-color: var(--shield-red-primary);
    color: #ffffff;
    font-weight: 600;
    border: none;
}

.btn-send:hover {
    background-color: var(--shield-red-hover);
    color: #ffffff;
}

/* Response Code Snippet Container */
.response-container {
    background-color: #1e293b;
    color: #f8fafc;
    border-radius: 6px;
    padding: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    position: relative;
}

.response-badge {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: bold;
}