/* Reusable Developer Workspace Stylesheet */

.dev-workspace {
    display: flex;
    flex-direction: column;
    background: rgba(18, 18, 20, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: width 0.3s ease, max-width 0.3s ease, height 0.3s ease;
}

/* Fullscreen Mode */
.dev-workspace-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #09090b !important;
}

.dev-workspace-fullscreen .workspace-body {
    flex: 1 1 0%;
    min-height: 0;
}

/* Hide sibling elements to resolve stacking context overlaps and scrollbar locks in full-screen */
body.workspace-fullscreen-active > *:not(#workspace-section):not(#api-modal):not([id*="toast"]):not([class*="toast"]) {
    display: none !important;
}

/* Workspace Layout Panels */
.workspace-body {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 520px;
}

/* Vertical Split (Side-by-Side) */
.workspace-body.split-vertical {
    flex-direction: row;
}

.workspace-body.split-vertical .panel-left {
    min-width: 250px;
    height: auto;
}

.workspace-body.split-vertical .panel-right {
    min-width: 250px;
    height: auto;
}

/* Horizontal Split (Stacked) */
.workspace-body.split-horizontal {
    flex-direction: column;
}

.workspace-body.split-horizontal .panel-left {
    width: 100% !important;
    min-height: 200px;
}

.workspace-body.split-horizontal .panel-right {
    width: 100% !important;
    min-height: 200px;
}

/* Panel Containers */
.workspace-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Workspace Resizable Splitter */
.workspace-splitter {
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    user-select: none;
    transition: background-color 0.2s ease;
    z-index: 30;
    flex-shrink: 0;
}

.workspace-splitter:hover,
.workspace-splitter.dragging {
    background: rgba(99, 102, 241, 0.3);
}

.workspace-splitter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.workspace-body.split-vertical > .workspace-splitter {
    width: 8px;
    cursor: col-resize;
    height: auto;
}

.workspace-body.split-vertical > .workspace-splitter::after {
    width: 2px;
    height: 30px;
}

.workspace-body.split-horizontal > .workspace-splitter {
    height: 8px;
    cursor: row-resize;
    width: 100%;
}

.workspace-body.split-horizontal > .workspace-splitter::after {
    width: 30px;
    height: 2px;
}

/* Workspace header & footer controls */
.workspace-header {
    background: rgba(9, 9, 11, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.workspace-footer {
    background: rgba(9, 9, 11, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Utility buttons and icons */
.workspace-btn-active {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

/* Mobile responsive degradation */
@media (max-width: 1023px) {
    .workspace-body {
        flex-direction: column !important;
        min-height: auto;
    }
    
    .panel-left, .panel-right {
        width: 100% !important;
        height: auto !important;
    }
    
    .workspace-splitter {
        display: none !important;
    }
}

/* ==========================================================================
   DEVELOPER WORKSPACE LIGHT THEME ADAPTATION
   Activates when the global theme is set to Light mode (html:not(.dark))
   ========================================================================== */

/* 1. Main Workspace container, panel headers/footers, and scrollbars */
html:not(.dark) #dev-workspace.dev-workspace {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #dev-workspace .workspace-header {
    background: rgba(248, 250, 252, 0.85) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) #dev-workspace .workspace-footer {
    background: rgba(248, 250, 252, 0.85) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) #dev-workspace .workspace-splitter {
    background: rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #dev-workspace .workspace-splitter::after {
    background: rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #dev-workspace .panel-right {
    border-left-color: rgba(0, 0, 0, 0.06) !important;
}

/* 2. Text colors & headings */
html:not(.dark) #dev-workspace .text-white,
html:not(.dark) #api-modal .text-white,
html:not(.dark) #workspace-shortcuts-modal .text-white {
    color: #0f172a !important;
}

html:not(.dark) #dev-workspace .text-zinc-100,
html:not(.dark) #api-modal .text-zinc-100,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-100 {
    color: #1e293b !important;
}

html:not(.dark) #dev-workspace .text-zinc-200,
html:not(.dark) #api-modal .text-zinc-200,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-200 {
    color: #334155 !important;
}

html:not(.dark) #dev-workspace .text-zinc-300,
html:not(.dark) #api-modal .text-zinc-300,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-300 {
    color: #475569 !important;
}

html:not(.dark) #dev-workspace .text-zinc-400,
html:not(.dark) #api-modal .text-zinc-400,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-400 {
    color: #64748b !important;
}

html:not(.dark) #dev-workspace .text-zinc-500,
html:not(.dark) #api-modal .text-zinc-500,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-500 {
    color: #94a3b8 !important;
}

html:not(.dark) #dev-workspace .text-zinc-600,
html:not(.dark) #api-modal .text-zinc-600,
html:not(.dark) #workspace-shortcuts-modal .text-zinc-600 {
    color: #cbd5e1 !important;
}

html:not(.dark) #dev-workspace .hover\:text-white:hover,
html:not(.dark) #api-modal .hover\:text-white:hover,
html:not(.dark) #workspace-shortcuts-modal .hover\:text-white:hover {
    color: #0f172a !important;
}

html:not(.dark) #dev-workspace h1,
html:not(.dark) #dev-workspace h2,
html:not(.dark) #dev-workspace h3,
html:not(.dark) #dev-workspace h4,
html:not(.dark) #api-modal h3,
html:not(.dark) #api-modal h4,
html:not(.dark) #workspace-shortcuts-modal h3 {
    color: #0f172a !important;
}

/* 3. Background Colors */
html:not(.dark) #dev-workspace .bg-zinc-950,
html:not(.dark) #api-modal .bg-zinc-950 {
    background-color: #f8fafc !important;
}

html:not(.dark) #dev-workspace .bg-zinc-900,
html:not(.dark) #api-modal .bg-zinc-900,
html:not(.dark) #workspace-shortcuts-modal .bg-zinc-900 {
    background-color: #ffffff !important;
}

html:not(.dark) #dev-workspace .bg-zinc-800,
html:not(.dark) #api-modal .bg-zinc-800 {
    background-color: #f1f5f9 !important;
}

html:not(.dark) #dev-workspace [class*="bg-zinc-950/"],
html:not(.dark) #dev-workspace [class*="bg-zinc-900/"],
html:not(.dark) #dev-workspace [class*="bg-zinc-800/"],
html:not(.dark) #api-modal [class*="bg-zinc-950/"],
html:not(.dark) #api-modal [class*="bg-zinc-900/"],
html:not(.dark) #api-modal [class*="bg-zinc-800/"] {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

html:not(.dark) #dev-workspace .bg-zinc-950\/20 {
    background-color: rgba(0, 0, 0, 0.01) !important;
}

html:not(.dark) #dev-workspace .bg-zinc-950\/40 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) #dev-workspace .bg-zinc-950\/60 {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #dev-workspace [class*="bg-white/"],
html:not(.dark) #api-modal [class*="bg-white/"],
html:not(.dark) #workspace-shortcuts-modal [class*="bg-white/"] {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

html:not(.dark) #dev-workspace .bg-white\/\[0\.05\] {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

html:not(.dark) #dev-workspace .bg-white\/\[0\.02\] {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

html:not(.dark) #dev-workspace .bg-white\/\[0\.01\] {
    background-color: rgba(0, 0, 0, 0.01) !important;
}

html:not(.dark) #dev-workspace .bg-red-950\/20 {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

/* 4. Form inputs, textareas, selects, options, placeholders */
html:not(.dark) #dev-workspace textarea,
html:not(.dark) #dev-workspace input[type="text"],
html:not(.dark) #dev-workspace input[type="search"],
html:not(.dark) #dev-workspace input[type="url"],
html:not(.dark) #dev-workspace select,
html:not(.dark) #api-modal textarea,
html:not(.dark) #api-modal input[type="text"],
html:not(.dark) #api-modal input[type="url"],
html:not(.dark) #api-modal select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html:not(.dark) #dev-workspace textarea:focus,
html:not(.dark) #dev-workspace input:focus,
html:not(.dark) #dev-workspace select:focus,
html:not(.dark) #api-modal textarea:focus,
html:not(.dark) #api-modal input:focus,
html:not(.dark) #api-modal select:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2) !important;
}

html:not(.dark) #dev-workspace textarea::placeholder,
html:not(.dark) #dev-workspace input::placeholder,
html:not(.dark) #api-modal textarea::placeholder,
html:not(.dark) #api-modal input::placeholder {
    color: #94a3b8 !important;
}

html:not(.dark) #dev-workspace select option,
html:not(.dark) #api-modal select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 5. Borders */
html:not(.dark) #dev-workspace [class*="border-white/"],
html:not(.dark) #api-modal [class*="border-white/"],
html:not(.dark) #workspace-shortcuts-modal [class*="border-white/"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #dev-workspace .border-white\/10,
html:not(.dark) #api-modal .border-white\/10,
html:not(.dark) #workspace-shortcuts-modal .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #dev-workspace .border-white\/5,
html:not(.dark) #api-modal .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #dev-workspace [class*="border-zinc-800"],
html:not(.dark) #api-modal [class*="border-zinc-800"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 6. Modals specifically */
html:not(.dark) #api-modal .inline-block.w-full.max-w-2xl,
html:not(.dark) #workspace-shortcuts-modal .inline-block.w-full.max-w-md {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #api-modal .border-b,
html:not(.dark) #api-modal .border-t,
html:not(.dark) #workspace-shortcuts-modal .border-b,
html:not(.dark) #workspace-shortcuts-modal .border-t {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) #workspace-shortcuts-modal .bg-zinc-900 {
    background-color: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
}

/* 7. Specific syntax highlight styles / Tree nodes / Line Numbers */
html:not(.dark) #dev-workspace .tree-node-content {
    border-left: 1px dashed rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #dev-workspace .line-num-span {
    color: rgba(0, 0, 0, 0.3) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) #dev-workspace #formatted-json-view {
    color: #0f172a !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}

html:not(.dark) #dev-workspace #input-line-numbers {
    background-color: rgba(0, 0, 0, 0.02) !important;
    color: #94a3b8 !important;
    border-right-color: rgba(0, 0, 0, 0.06) !important;
}

/* 8. Preset buttons and layout controls in light mode */
html:not(.dark) #dev-workspace button.bg-white\/\[0\.02\] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}

html:not(.dark) #dev-workspace button.bg-white\/\[0\.02\]:hover {
    background-color: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}

/* Active elements / Active tabs / Active presets */
html:not(.dark) #dev-workspace button.workspace-btn-active,
html:not(.dark) #dev-workspace button[id^="tab-"].bg-white\/\[0\.05\],
html:not(.dark) #dev-workspace button[id^="tab-"].text-white {
    background-color: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    color: #4f46e5 !important;
}

/* General buttons and labels acting as buttons (Upload, Clear, Sort, Print, etc.) */
html:not(.dark) #dev-workspace button.bg-zinc-900,
html:not(.dark) #dev-workspace label.bg-zinc-900,
html:not(.dark) #dev-workspace button.bg-white\/5,
html:not(.dark) #api-modal button.bg-zinc-900,
html:not(.dark) #api-modal button.bg-white\/5,
html:not(.dark) #workspace-shortcuts-modal button.bg-zinc-900 {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #dev-workspace button.bg-zinc-900:hover,
html:not(.dark) #dev-workspace label.bg-zinc-900:hover,
html:not(.dark) #dev-workspace button.bg-white\/5:hover,
html:not(.dark) #api-modal button.bg-zinc-900:hover,
html:not(.dark) #api-modal button.bg-white\/5:hover,
html:not(.dark) #workspace-shortcuts-modal button.bg-zinc-900:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Red button */
html:not(.dark) #dev-workspace button.bg-red-950\/20:hover {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

/* Tabs switcher wrapper */
html:not(.dark) #dev-workspace .flex.bg-zinc-950\/60 {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Validation status/check items */
html:not(.dark) #dev-workspace #validation-banner {
    background-color: rgba(0, 0, 0, 0.01) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) #dev-workspace #validation-banner #validation-icon {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #4b5563 !important;
}

html:not(.dark) #dev-workspace #validation-banner #validation-title {
    color: #0f172a !important;
}

html:not(.dark) #dev-workspace #validation-banner #validation-message {
    color: #4b5563 !important;
}

html:not(.dark) #dev-workspace [id^="chk-item-"] {
    background-color: rgba(0, 0, 0, 0.01) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #dev-workspace [id^="chk-item-"] span {
    color: #334155 !important;
}

/* Checklist states (Passed / Failed) */
html:not(.dark) #dev-workspace .bg-emerald-950\/5 {
    background-color: #f0fdf4 !important;
    border-color: rgba(34, 197, 94, 0.15) !important;
}

html:not(.dark) #dev-workspace .bg-rose-950\/5 {
    background-color: #fef2f2 !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

/* Compare / Diff Checker viewport & result lines in light mode */
html:not(.dark) #dev-workspace [class*="bg-emerald-950/"] {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}

html:not(.dark) #dev-workspace [class*="bg-red-950/"] {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

html:not(.dark) #dev-workspace .text-emerald-300 {
    color: #15803d !important;
}

html:not(.dark) #dev-workspace .text-red-300 {
    color: #b91c1c !important;
}

/* Drag overlay */
html:not(.dark) #dev-workspace #drag-overlay {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Draft history cards and stats panels */
html:not(.dark) #draft-history-container > div,
html:not(.dark) #stats-panel .bg-white\/\[0\.02\] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
}

html:not(.dark) #draft-history-container > div:hover {
    border-color: rgba(99, 102, 241, 0.25) !important;
}

/* Syntax Highlighting Light Mode Palette */
html:not(.dark) #dev-workspace .json-key {
    color: #4f46e5 !important; /* Indigo 600 */
}

html:not(.dark) #dev-workspace .json-string {
    color: #15803d !important; /* Green 700 */
}

html:not(.dark) #dev-workspace .json-number {
    color: #b45309 !important; /* Amber 700 */
}

html:not(.dark) #dev-workspace .json-boolean {
    color: #be185d !important; /* Pink 700 */
}

html:not(.dark) #dev-workspace .json-null {
    color: #6b7280 !important; /* Gray 500 */
}

html:not(.dark) #dev-workspace .error-line-highlight {
    background-color: rgba(239, 68, 68, 0.06) !important;
    border-left-color: #ef4444 !important;
}

/* Explicit definition for wide layout class to prevent Tailwind JIT compilation omission */
#workspace-section.max-w-\[98\%\] {
    max-width: 98% !important;
}