/* Base dark theme colors */
[data-theme="dark"] {
    --bg-color: #1a1f2c;
    --border-color: rgba(16, 185, 129, 0.2);
    --text-color: rgba(255, 255, 255, 0.95);
    --text-muted: rgba(255, 255, 255, 0.7);
}

/* Remove white outlines from containers */
[data-theme="dark"] .fade-in {
    background-color: var(--bg-color) !important;
    padding: 8px !important;
}

[data-theme="dark"] .document-card {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    margin: 0 !important;
}

/* Fix column spacing */
[data-theme="dark"] .row.row-cols-1.row-cols-md-3.g-4 {
    background-color: var(--bg-color) !important;
    margin: 0 -8px !important;
}

[data-theme="dark"] .col {
    background-color: var(--bg-color) !important;
    padding: 8px !important;
}

/* Ensure consistent dark background */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .row,
[data-theme="dark"] main,
[data-theme="dark"] section {
    background-color: var(--bg-color) !important;
}

/* Remove any remaining gaps */
[data-theme="dark"] .fade-in > *,
[data-theme="dark"] .document-card > * {
    background-color: var(--bg-color) !important;
}

/* Reset any default margin/padding colors */
[data-theme="dark"] * {
    background-color: var(--bg-color);
}

/* Preserve specific component backgrounds */
[data-theme="dark"] .btn,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text {
    background-color: transparent;
}

/* Ensure proper background for fade-in containers */
[data-theme="dark"] .fade-in {
    background-color: var(--bg-color) !important;
}

/* Fix any remaining gaps */
[data-theme="dark"] body > *,
[data-theme="dark"] .container > *,
[data-theme="dark"] .container-fluid > * {
    background-color: var(--bg-color) !important;
}

/* Reset document card background and borders */
[data-theme="dark"] .document-card {
    background-color: var(--bg-color) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    padding: 0 !important;
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer {
    background-color: var(--bg-color) !important;
    border: none !important;
}

/* Remove any nested background colors */
[data-theme="dark"] .document-card *:not(.btn):not(.form-control):not(.input-group-text) {
    background-color: var(--bg-color) !important;
}

/* Fix container padding */
[data-theme="dark"] .col.fade-in {
    background-color: var(--bg-color) !important;
    padding: 0.5rem !important;
}

/* Preserve button and form control backgrounds */
[data-theme="dark"] .btn,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text {
    background-color: transparent !important;
}

/* Ensure container background matches */
[data-theme="dark"] .row.row-cols-1.row-cols-md-3.g-4 {
    background-color: var(--bg-color) !important;
}

[data-theme="dark"] .row > * {
    background-color: var(--bg-color) !important;
    padding: 0.5rem !important;
}

/* Fix any remaining gaps */
[data-theme="dark"] .fade-in > *,
[data-theme="dark"] .document-card > * {
    background-color: var(--bg-color) !important;
}

[data-theme="dark"] .feature-card {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Fix container margins and padding */
[data-theme="dark"] .row {
    margin: 0 !important;
}

[data-theme="dark"] .col {
    padding: 0.5rem !important;
}

/* Card body and footer spacing */
[data-theme="dark"] .card-body {
    background-color: var(--bg-color) !important;
    padding: 1.5rem !important;
}

[data-theme="dark"] .card-footer {
    background-color: var(--bg-color) !important;
    padding: 1.25rem !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Text colors */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] p {
    color: var(--text-color) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Ensure proper contrast for small text */
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--text-muted) !important;
}

/* Footer styles */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background-color: var(--bg-color) !important;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] footer *,
[data-theme="dark"] .footer * {
    color: var(--text-color) !important;
}

[data-theme="dark"] footer .text-muted,
[data-theme="dark"] .footer .text-muted {
    color: var(--text-muted) !important;
}

/* Search box dark mode */
[data-theme="dark"] .search-group {
    background: var(--bg-color) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] .search-group .input-group-text {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color);
    color: var(--text-muted) !important;
}

[data-theme="dark"] .search-group .form-control {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color);
    color: var(--text-color) !important;
}

[data-theme="dark"] .search-group .btn-link {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .search-group:focus-within {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Add subtle hover effects */
[data-theme="dark"] .document-card:hover {
    border-color: rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .card:hover {
    border-color: rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
}

/* Search input placeholder color in dark mode */
[data-theme="dark"] .search-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}

/* For Firefox */
[data-theme="dark"] .search-group .form-control::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}

/* For Chrome/Safari/Edge */
[data-theme="dark"] .search-group .form-control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* For Internet Explorer */
[data-theme="dark"] .search-group .form-control:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}