/* Public Shared Styles - VS Code Dark Theme */

/* Import VS Code theme variables */
:root {
    --vscode-bg-primary: #1e1e1e;
    --vscode-bg-secondary: #252526;
    --vscode-bg-tertiary: #2d2d30;
    --vscode-bg-elevated: #333333;
    --vscode-border: #454545;
    --vscode-text-primary: #cccccc;
    --vscode-text-secondary: #969696;
    --vscode-text-disabled: #656565;
    --vscode-accent-blue: #007acc;
    --vscode-accent-blue-hover: #1177bb;
    --vscode-accent-green: #4ec9b0;
    --vscode-accent-orange: #ce9178;
    --vscode-accent-yellow: #dcdcaa;
    --vscode-accent-purple: #c586c0;
    --vscode-accent-red: #f44747;
    --vscode-warning: #ffcc02;
    --vscode-error: #f44747;
    --vscode-success: #89d185;
}

/* Global Dark Mode Styling */
body {
    background-color: var(--vscode-bg-primary) !important;
    color: var(--vscode-text-primary) !important;
}

.container {
    background-color: var(--vscode-bg-primary);
    color: var(--vscode-text-primary);
}

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

p, li, .text-muted {
    color: var(--vscode-text-secondary) !important;
}

/* Table dark mode styling */
.table {
    color: var(--vscode-text-primary) !important;
    background-color: var(--vscode-bg-secondary) !important;
    border-color: var(--vscode-border);
}

.table-hover tbody tr:hover {
    background-color: var(--vscode-bg-tertiary) !important;
}

/* Enhanced table styling for dark mode */
.table-dark {
    --bs-table-bg: var(--vscode-bg-secondary);
    --bs-table-striped-bg: var(--vscode-bg-tertiary);
    --bs-table-hover-bg: var(--vscode-bg-elevated);
    --bs-table-border-color: var(--vscode-border);
}

.table-dark th {
    background-color: var(--vscode-bg-elevated) !important;
    border-color: var(--vscode-border) !important;
    font-weight: 600;
    color: var(--vscode-text-primary);
}

.table-dark td {
    border-color: var(--vscode-border) !important;
}

/* Alert dark styling */
.alert-danger {
    background-color: rgba(244, 71, 71, 0.15) !important;
    border-color: var(--vscode-error) !important;
    color: var(--vscode-error) !important;
}

/* Spinner dark mode */
.spinner-border {
    color: var(--vscode-text-secondary) !important;
}

/* Dark button styling */
.btn-info {
    background-color: var(--vscode-accent-blue) !important;
    border-color: var(--vscode-accent-blue) !important;
    color: var(--vscode-text-primary) !important;
}

.btn-success {
    background-color: var(--vscode-success) !important;
    border-color: var(--vscode-success) !important;
    color: var(--vscode-bg-primary) !important;
}

.btn-primary {
    background-color: var(--vscode-accent-blue) !important;
    border-color: var(--vscode-accent-blue) !important;
    color: var(--vscode-text-primary) !important;
}

/* Logout button styling */
#logoutBtn {
    color: var(--vscode-error) !important;
    text-decoration: underline;
}

#logoutBtn:hover {
    color: var(--vscode-accent-red) !important;
}

/* Empty state styling */
.fa-folder-open {
    color: var(--vscode-text-secondary) !important;
}

/* Welcome text styling */
.welcome-text {
    color: var(--vscode-text-primary) !important;
    font-weight: 500;
}

/* Custom styling for code blocks in dark mode */
pre[class*="language-"] {
    background: var(--vscode-bg-primary) !important;
    border: 1px solid var(--vscode-border) !important;
    border-radius: 0.375rem;
    margin: 1rem 0;
    padding: 1rem;
}

code[class*="language-"] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    background: var(--vscode-bg-primary) !important;
    color: var(--vscode-text-primary) !important;
}

/* Inline code styling */
code {
    background-color: var(--vscode-bg-tertiary) !important;
    color: var(--vscode-text-primary) !important;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* XML/HTML specific styling for dark theme */
.token.tag {
    color: #79c0ff !important;
}

.token.attr-name {
    color: #ffa657 !important;
}

.token.attr-value {
    color: #a5d6ff !important;
}

.token.comment {
    color: #7c7c7c !important;
}

.token.punctuation {
    color: #c9d1d9 !important;
}

/* Card dark mode styling */
.card {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}

.card-header {
    background-color: #495057 !important;
    border-bottom-color: #6c757d !important;
}

/* List group dark mode */
.list-group-item {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}

.list-group-item:hover {
    background-color: #495057 !important;
}

/* Nav tabs dark mode */
.nav-tabs .nav-link {
    color: #dee2e6 !important;
    border-color: #495057 !important;
}

.nav-tabs .nav-link.active {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #f8f9fa !important;
}

/* Form controls dark mode */
.form-control {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #f8f9fa !important;
}

.form-control:focus {
    background-color: #495057 !important;
    border-color: #0d6efd !important;
    color: #f8f9fa !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.form-select {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #f8f9fa !important;
}

/* Modal dark mode */
.modal-content {
    background-color: #343a40 !important;
    border-color: #495057 !important;
}

.modal-header {
    border-bottom-color: #495057 !important;
}

.modal-footer {
    border-top-color: #495057 !important;
}

/* Dropdown dark mode */
.dropdown-menu {
    background-color: #343a40 !important;
    border-color: #495057 !important;
}

.dropdown-item {
    color: #dee2e6 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #495057 !important;
    color: #f8f9fa !important;
}

.dropdown-divider {
    border-color: #495057 !important;
}

/* Progress bar dark mode */
.progress {
    background-color: #495057 !important;
}

/* Breadcrumb dark mode */
.breadcrumb {
    background-color: #343a40 !important;
}

.breadcrumb-item a {
    color: #0d6efd !important;
}

/* Pagination dark mode */
.page-link {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #dee2e6 !important;
}

.page-link:hover {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #f8f9fa !important;
}

.page-item.active .page-link {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Accordion dark mode */
.accordion-item {
    background-color: #343a40 !important;
    border-color: #495057 !important;
}

.accordion-button {
    background-color: #495057 !important;
    color: #f8f9fa !important;
}

.accordion-button:not(.collapsed) {
    background-color: #6c757d !important;
    color: #f8f9fa !important;
}

.accordion-body {
    background-color: #343a40 !important;
    color: #dee2e6 !important;
}