/** JahCo Theme Overrides for Elastic Skin **/

:root {
    --jahco-bg: #0f172a;
    --jahco-sidebar: #1e293b; /* Slate 800 */
    --jahco-border: #334155; /* Slate 700 */
    --jahco-text: #e2e8f0; /* Slate 200 */
    --jahco-text-muted: #94a3b8; /* Slate 400 */
    --jahco-primary: #3b82f6; /* Blue 500 */
    --jahco-primary-hover: #2563eb; /* Blue 600 */
    --jahco-accent: #a855f7; /* Purple 500 */
}

body {
    background-color: var(--jahco-bg) !important;
    color: var(--jahco-text) !important;
}

/* Layout Containers */
#layout-sidebar, 
#layout-list, 
#layout-content {
    background-color: var(--jahco-bg) !important;
}

/* Sidebar (Folder List) */
#layout-sidebar {
    background-color: var(--jahco-sidebar) !important;
    border-right: 1px solid var(--jahco-border) !important;
}

.listbox .listitem {
    color: var(--jahco-text) !important;
}

.listbox .listitem:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.listbox .listitem.selected {
    background-color: var(--jahco-primary) !important;
    color: white !important;
}

.listbox .listitem.selected > a {
    color: white !important;
}

/* Message List */
.messagelist tr td {
    background-color: var(--jahco-bg) !important;
    color: var(--jahco-text) !important;
    border-bottom: 1px solid var(--jahco-border) !important;
}

.messagelist tr.selected td {
    background-color: rgba(59, 130, 246, 0.2) !important; /* Blue tint */
    color: white !important;
}

.messagelist tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.messagelist tr.unread td {
    font-weight: bold;
    color: white !important;
}

/* Headers & Toolbars */
.header, .footer, .toolbar {
    background-color: var(--jahco-sidebar) !important;
    border-color: var(--jahco-border) !important;
    color: var(--jahco-text) !important;
}

.toolbar a.button {
    color: var(--jahco-text) !important;
}

/* Preview Pane / Content */
.frame-content {
    background-color: var(--jahco-bg) !important;
}

/* Inputs */
input.form-control, 
textarea.form-control, 
select.form-control {
    background-color: #020617 !important; /* Slate 950 */
    border: 1px solid var(--jahco-border) !important;
    color: white !important;
}

input.form-control:focus {
    border-color: var(--jahco-primary) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--jahco-primary) !important;
    border-color: var(--jahco-primary) !important;
}

.btn-primary:hover {
    background-color: var(--jahco-primary-hover) !important;
}

.btn-secondary {
    background-color: var(--jahco-sidebar) !important;
    border-color: var(--jahco-border) !important;
    color: var(--jahco-text) !important;
}

/* Popups / Menus */
.popover, .menu {
    background-color: var(--jahco-sidebar) !important;
    border: 1px solid var(--jahco-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}

.popover-header {
    background-color: var(--jahco-bg) !important;
    border-bottom: 1px solid var(--jahco-border) !important;
    color: white !important;
}

.popover-body {
    color: var(--jahco-text) !important;
}

.dropdown-menu {
    background-color: var(--jahco-sidebar) !important;
    border: 1px solid var(--jahco-border) !important;
}

.dropdown-item {
    color: var(--jahco-text) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--jahco-primary) !important;
    color: white !important;
}

/* Logo Area */
#logo {
    filter: brightness(0) invert(1); /* Make default logo white if it's black */
}