.dark {
    background-color: rgb(32, 32, 32);
    color: white;
}

.dark .panel {
    background-color: rgb(46, 46, 46);
}

/* MODIFIED: Distinct background for top-panel in dark mode */
.dark .panel.top-panel {
    background-color: #18181b; /* Deep dark color, distinct from the #2e2e2e tab panels */
    border-bottom: 2px solid #000;
}

/* MODIFIED: Replaced .button with .btn for dark mode */
.dark .btn {
    background-color: rgb(31, 31, 31);
    border-color: #555 !important;
    color: white !important;
}

/* MODIFIED: Replaced .w3-button:hover with .btn:hover */
.dark .btn:hover {
    background-color: rgb(82, 82, 82) !important;
    color: white !important;
}

/* MODIFIED: Replaced w3-bordered and w3-table-all with internal classes */
.dark .table-bordered tr, .dark .table-all tr {
    border-bottom: 1px solid rgb(73, 73, 73);
}

.dark #logContainer {
    background-color: #2e2e2e;
    border: 1px solid #494949;
}

.dark .log-entry {
    border-bottom: 1px solid #494949;
}

/* Ensure new UI elements adhere to dark theme */
.dark .tab-description {
    color: #aaa;
}

.dark .category-header {
    color: #888;
    border-bottom: 1px solid #444;
}

.dark .ui-card, .dark .ui-row {
    background-color: #1a1a1a;
    border-color: transparent;
}

.dark .ui-card:hover, .dark .ui-row:hover {
    background-color: #252525;
    border-color: transparent;
}

.dark .ui-card.active, .dark .ui-row.active {
    border-color: #a8d08d !important;
    background-color: #1a1a1a;
}

.dark .card-image, .dark .row-image {
    background-color: #333;
}

.dark .card-title, .dark .row-title {
    color: #fff;
}

.dark .card-value, .dark .row-expense {
    color: #ffd700;
}

.dark .card-expense {
    color: #ff4c4c;
}

.dark .row-value {
    color: #aaa;
}

.dark .level-badge {
    background-color: #333;
    color: #fff;
    border-color: #444;
}

.dark .badge-text {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* NEW: Locked Card and Row Styles for Dark Mode */
.dark .locked-card, .dark .locked-row {
    background-color: #111;
    border-color: transparent;
}

.dark .locked-card:hover, .dark .locked-row:hover {
    background-color: #111;
    border-color: transparent;
}

.dark .locked-icon {
    color: #444;
}

.dark .locked-title {
    color: #666;
}

.dark .locked-text {
    color: #777;
}

/* Dynamic Text Colors for JS Injection */
.dark .color-income-val, .dark .color-expense-val { color: #ffd700; }
.dark .color-income-lbl { color: #a8d08d; }
.dark .color-expense-lbl { color: #ff4c4c; }

/* --- Dark mode for Layout and Scrollbar --- */
.dark .fixed-header-wrapper {
    background-color: rgb(32, 32, 32); /* Match dark theme body background */
}

.dark .scroll-container:hover::-webkit-scrollbar-thumb,
.dark .scroll-container:active::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); /* Lighter thumb for dark mode */
}

/* --- Dark mode for Modal --- */
.dark .modal-content {
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
}
.dark .modal-description {
    color: #aaa;
}

/* NEW: Dark mode for Word Processor App */
.dark .word-app-container {
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-color: #444;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.dark .tabs-container {
    background-color: #1e1e1e;
    border-bottom: 1px solid #444;
}

.dark .btn-active {
    background-color: #2e2e2e !important;
}