/* IDE Theme Variables - Light & Dark */
:root {
    /* Light Theme Colors */
    --ide-bg: #f5f5f5;
    --ide-titlebar-bg: #e8e8e8;
    --ide-tabbar-bg: #ececec;
    --ide-sidebar-bg: #f3f3f3;
    --ide-content-bg: #ffffff;
    --ide-statusbar-bg: #007acc;

    --ide-border: #d4d4d4;
    --ide-border-light: #e5e5e5;

    --ide-text-primary: #1f2937;
    --ide-text-secondary: #6b7280;
    --ide-text-tertiary: #9ca3af;
    --ide-text-inverse: #ffffff;

    --ide-accent-primary: #007acc;
    --ide-accent-hover: #005a9e;

    --ide-folder-icon: #dcb67a;
    --ide-folder-category: #4d9fd9;
    --ide-file-icon: #6b7280;

    --ide-hover-bg: #e5e5e5;
    --ide-active-bg: #cce7ff;
    --ide-active-text: #007acc;

    --ide-scrollbar-track: #f3f3f3;
    --ide-scrollbar-thumb: #c1c1c1;
    --ide-scrollbar-thumb-hover: #a6a6a6;

    --ide-profile-border: #007acc;
    --ide-profile-status: #22c55e;

    /* Syntax highlighting for light theme */
    --syntax-bg: #ffffff;
    --syntax-pre-bg: #f9fafb;
    --syntax-text: #1f2937;
    --syntax-border: #8b5cf6;
    --syntax-keyword: #af00db;
    --syntax-string: #a31515;
    --syntax-number: #098658;
    --syntax-comment: #008000;
    --syntax-function: #795e26;
    --syntax-class: #267f99;
    --syntax-variable: #001080;
    --syntax-operator: #af00db;
    --syntax-constant: #0070c1;
    --syntax-tag: #0070c1;
    --syntax-attribute: #1f2328;
    --syntax-escape: #116329;
    --syntax-linenumber: #999999;
    --syntax-lang-badge: #6b7280;
    --syntax-copy-btn-bg: #e5e7eb;
    --syntax-copy-btn-border: #d1d5db;
    --syntax-copy-btn-text: #4b5563;
    --syntax-copy-btn-hover-bg: #d1d5db;

    /* Error and success colors */
    --color-error: #dc2626;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-success: #16a34a;
    --color-success-bg: rgba(34, 197, 94, 0.1);

    /* Selection colors */
    --selection-bg: #007acc;
    --selection-text: #ffffff;
}

.dark {
    /* Dark Theme Colors */
    --ide-bg: #1e1e1e;
    --ide-titlebar-bg: #1f2937;
    --ide-tabbar-bg: #1f2937;
    --ide-sidebar-bg: #0f172a;
    --ide-content-bg: #111827;
    --ide-statusbar-bg: #007acc;

    --ide-border: #374151;
    --ide-border-light: #2d3748;

    --ide-text-primary: #e5e7eb;
    --ide-text-secondary: #9ca3af;
    --ide-text-tertiary: #6b7280;
    --ide-text-inverse: #ffffff;

    --ide-accent-primary: #60a5fa;
    --ide-accent-hover: #93c5fd;

    --ide-folder-icon: #dcb67a;
    --ide-folder-category: #4d9fd9;
    --ide-file-icon: #6b7280;

    --ide-hover-bg: #374151;
    --ide-active-bg: #111827;
    --ide-active-text: #60a5fa;

    --ide-scrollbar-track: #1a1d23;
    --ide-scrollbar-thumb: #374151;
    --ide-scrollbar-thumb-hover: #4b5563;

    --ide-profile-border: #60a5fa;
    --ide-profile-status: #22c55e;

    /* Syntax highlighting for dark theme */
    --syntax-bg: #111827;
    --syntax-pre-bg: #111827;
    --syntax-text: #d4d4d4;
    --syntax-border: #a78bfa;
    --syntax-keyword: #c586c0;
    --syntax-string: #ce9178;
    --syntax-number: #b5cea8;
    --syntax-comment: #6a9955;
    --syntax-function: #dcdcaa;
    --syntax-class: #4ec9b0;
    --syntax-variable: #9cdcfe;
    --syntax-operator: #c586c0;
    --syntax-constant: #4fc1ff;
    --syntax-tag: #569cd6;
    --syntax-attribute: #9cdcfe;
    --syntax-escape: #d7ba7d;
    --syntax-linenumber: #858585;
    --syntax-lang-badge: #9ca3af;
    --syntax-copy-btn-bg: #374151;
    --syntax-copy-btn-border: #4b5563;
    --syntax-copy-btn-text: #d1d5db;
    --syntax-copy-btn-hover-bg: #4b5563;

    /* Error and success colors */
    --color-error: #f87171;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-success: #4ade80;
    --color-success-bg: rgba(34, 197, 94, 0.1);

    /* Selection colors */
    --selection-bg: #264f78;
    --selection-text: #ffffff;
}

/* Apply Theme Variables */
body {
    background-color: var(--ide-bg);
}

.ide-window {
    background-color: var(--ide-bg);
}

.window-titlebar {
    background-color: var(--ide-titlebar-bg);
    border-bottom-color: var(--ide-border);
}

.window-titlebar span {
    color: var(--ide-text-secondary);
}

.window-titlebar button,
.window-titlebar a {
    color: var(--ide-text-tertiary);
}

.window-titlebar button:hover,
.window-titlebar a:hover {
    color: var(--ide-text-primary);
}

.tab-bar {
    background-color: var(--ide-tabbar-bg);
    border-bottom-color: var(--ide-border);
}

.tab-item {
    border-right-color: var(--ide-border);
    color: var(--ide-text-secondary);
}

.tab-item:hover {
    color: var(--ide-text-primary);
    background-color: var(--ide-hover-bg);
}

.tab-item.active {
    background-color: var(--ide-content-bg) !important;
    color: var(--ide-active-text) !important;
}

#mobile-sidebar-toggle {
    color: var(--ide-text-secondary);
    border-right-color: var(--ide-border);
}

#mobile-sidebar-toggle:hover {
    color: var(--ide-text-primary);
}

.file-explorer {
    background-color: var(--ide-sidebar-bg);
    border-right: 1px solid var(--ide-border);
}

.file-explorer .text-gray-400 {
    color: var(--ide-text-tertiary) !important;
}

.file-explorer .text-gray-300 {
    color: var(--ide-text-secondary) !important;
}

.file-explorer .text-white {
    color: var(--ide-text-primary) !important;
}

.file-explorer .bg-gray-800 {
    background-color: var(--ide-hover-bg) !important;
}

.file-explorer .border-gray-700 {
    border-color: var(--ide-border-light) !important;
}

.file-explorer .text-yellow-500 {
    color: var(--ide-folder-icon) !important;
}

.file-explorer .text-blue-400 {
    color: var(--ide-folder-category) !important;
}

.file-explorer .text-gray-500 {
    color: var(--ide-file-icon) !important;
}

.file-explorer .group:hover .text-gray-500 {
    color: var(--ide-active-text) !important;
}

.file-explorer .group:hover .text-gray-400 {
    color: var(--ide-text-primary) !important;
}

#main-content {
    background-color: var(--ide-content-bg);
    position: relative;
}

/* Ensure sticky TOC works properly */
.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.status-bar {
    background-color: var(--ide-statusbar-bg);
    color: var(--ide-text-inverse);
}

#sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar for file explorer */
.file-explorer::-webkit-scrollbar {
    width: 8px;
}

.file-explorer::-webkit-scrollbar-track {
    background: var(--ide-scrollbar-track);
}

.file-explorer::-webkit-scrollbar-thumb {
    background: var(--ide-scrollbar-thumb);
    border-radius: 4px;
}

.file-explorer::-webkit-scrollbar-thumb:hover {
    background: var(--ide-scrollbar-thumb-hover);
}

/* Smooth rotation for folder icons */
.rotate-90 {
    transform: rotate(90deg);
}

/* Line clamp utility for multiline text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subtle hover enhancement for file items */
.file-item:hover {
    background-color: var(--ide-hover-bg) !important;
}

/* Active/current page styling */
.file-item.active {
    background-color: var(--ide-active-bg) !important;
    border-left: 3px solid var(--ide-accent-primary);
    padding-left: calc(0.5rem - 3px);
}

.file-item.active span {
    color: var(--ide-active-text) !important;
    font-weight: 600;
}

.file-item.active svg {
    color: var(--ide-accent-primary) !important;
}

/* Mobile sidebar - takes full height of content area */
@media (max-width: 1023px) {
    #mobile-sidebar {
        height: 100%;
    }
}

/* Hide scrollbar on tab bar for cleaner look */
.tab-bar::-webkit-scrollbar {
    height: 0px;
}

/* Ensure smooth scrolling on tab bar */
.tab-bar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* Content area prose/article styling */
.prose {
    color: var(--ide-text-primary) !important;
    max-width: none;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: var(--ide-text-primary) !important;
}

.prose p, .prose li {
    color: var(--ide-text-primary) !important;
}

.prose strong {
    color: var(--ide-text-primary) !important;
}

.prose a {
    color: var(--ide-accent-primary) !important;
}

.prose a:hover {
    color: var(--ide-accent-hover) !important;
}

.prose code {
    color: var(--ide-text-primary) !important;
    background-color: var(--ide-hover-bg);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre {
    background-color: var(--ide-sidebar-bg) !important;
    border: 1px solid var(--ide-border);
}

.prose pre code {
    background-color: transparent;
    padding: 0;
}

/* Search Modal */
#modal-search-input {
    background-color: var(--ide-sidebar-bg) !important;
    color: var(--ide-text-primary) !important;
    border-color: var(--ide-border) !important;
}

#modal-search-input::placeholder {
    color: var(--ide-text-tertiary);
}

#modal-search-input:focus {
    outline: 2px solid var(--ide-accent-primary);
    outline-offset: 2px;
}

#search-results::-webkit-scrollbar {
    width: 8px;
}

#search-results::-webkit-scrollbar-track {
    background: var(--ide-scrollbar-track);
}

#search-results::-webkit-scrollbar-thumb {
    background: var(--ide-scrollbar-thumb);
    border-radius: 4px;
}

#search-results::-webkit-scrollbar-thumb:hover {
    background: var(--ide-scrollbar-thumb-hover);
}

kbd {
    font-family: monospace;
    font-size: 0.875em;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Transition utilities */
* {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Documentation-specific styles */
.doc-content {
    padding: 2rem;
    max-width: 50rem;
}

.doc-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--ide-text-primary);
}

.doc-content h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--ide-text-primary);
}

.doc-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--ide-text-primary);
}

.doc-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.doc-content ul, .doc-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.doc-content li {
    margin-bottom: 0.5rem;
}

.doc-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.doc-content th, .doc-content td {
    padding: 0.75rem;
    border: 1px solid var(--ide-border);
}

.doc-content th {
    background-color: var(--ide-sidebar-bg);
    font-weight: 600;
}

/* Code blocks with syntax highlighting */
.chroma {
    background-color: var(--ide-sidebar-bg) !important;
    border: 1px solid var(--ide-border);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.chroma code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}