/*
 * Sentinel Mail — custom skin CSS overrides
 * Skin: sentinel (extends elastic). Palette: black / white / green only.
 * Backgrounds #060806 family, accent #00e676, text white/light.
 * Loaded via meta.json "links" before Elastic's stylesheet in <head>,
 * so key rules use !important to win the cascade regardless of order.
 */

:root {
    --sentinel-bg: #060806;
    --sentinel-panel: #0b100b;
    --sentinel-panel-2: #0d120d;
    --sentinel-border: #223322;
    --sentinel-text: #f2f5f2;
    --sentinel-muted: #a9bda9;
    --sentinel-accent: #00e676;
    --sentinel-accent-hover: #00c853;
}

html, body {
    background: var(--sentinel-bg) !important;
    color: var(--sentinel-text) !important;
}

a { color: var(--sentinel-accent) !important; }
a:hover { color: var(--sentinel-accent-hover) !important; }

/* Layout surfaces */
#layout, #layout-content, #layout-list, #layout-sidebar,
#layout-menu, .header, .footer, .toolbar, .searchbar,
#message-header, .message-header, .records-table,
.formcontent, .content, .boxinformation, .main, .uibox {
    background-color: var(--sentinel-panel) !important;
    color: var(--sentinel-text) !important;
    border-color: var(--sentinel-border) !important;
}
#layout-content, #layout-list, #layout-sidebar { background-color: var(--sentinel-bg) !important; }
.header, .toolbar.listing, .footer { background-color: var(--sentinel-panel-2) !important; }

/* Task menu (left rail) */
#taskmenu, #layout-menu { background-color: #060806 !important; }
#taskmenu a { color: #ffffff !important; }
#taskmenu a.selected, #taskmenu a:hover, #taskmenu a.selected:hover {
    background-color: #12240f !important;
    color: var(--sentinel-accent) !important;
}
#taskmenu .action-buttons a { color: var(--sentinel-accent) !important; }

/* Headings / titles */
h1, h2, h3, .header-title, .boxtitle, legend { color: #ffffff !important; }

/* Buttons */
.btn-primary, button.mainaction, input.mainaction, .button.mainaction,
a.button.mainaction, #login-form button[type="submit"], .propform .mainaction {
    background-color: var(--sentinel-accent) !important;
    border-color: var(--sentinel-accent) !important;
    color: #04150a !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, #login-form button[type="submit"]:hover {
    background-color: var(--sentinel-accent-hover) !important;
    border-color: var(--sentinel-accent-hover) !important;
    color: #04150a !important;
}
.btn, .button, button, input[type="button"] { border-color: var(--sentinel-border); }
.btn-secondary, .button:not(.mainaction) { color: var(--sentinel-text); }

/* Forms */
input, select, textarea,
.form-control, .input-group, .searchbar input, .recipient-input input {
    background-color: #0a0f0a !important;
    color: var(--sentinel-text) !important;
    border-color: var(--sentinel-border) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--sentinel-accent) !important;
    box-shadow: 0 0 0 .15rem rgba(0, 230, 118, .25) !important;
    outline: none !important;
}
label, .form-group label, td.title, .propform td.title { color: var(--sentinel-muted) !important; }

/* Listings (mail / folders / contacts) */
.listing, .listing li, .listing tbody td, .treelist li, table.listing {
    background-color: transparent !important;
    color: var(--sentinel-text) !important;
    border-color: var(--sentinel-border) !important;
}
.listing li a, .listing tbody td a, .treelist li a { color: var(--sentinel-text) !important; }
.listing li.selected, .listing tbody tr.selected > td,
.listing li.selected > a, .treelist li.selected > a {
    background-color: #14301c !important;
    color: #ffffff !important;
}
.listing li:hover, .listing tbody tr:hover > td { background-color: #0f1a0f !important; }
.listing .unread, .messagelist .unread td, .folderlist .unread { color: #ffffff !important; font-weight: 700; }
.count, .badge, .listing .badge {
    background-color: var(--sentinel-accent) !important;
    color: #04150a !important;
}

/* Menus / popups / dialogs */
.popover, .popover-body, .popupmenu, .menu, .ui-dialog, .modal-content,
.ui-widget-content, .tox-dialog, div.tox .tox-dialog__body-content {
    background-color: var(--sentinel-panel-2) !important;
    color: var(--sentinel-text) !important;
    border-color: var(--sentinel-border) !important;
}
.popupmenu li a, .menu li a, .popover-body li a { color: var(--sentinel-text) !important; }
.popupmenu li a:hover, .menu li a:hover, .popupmenu li a.active:hover {
    background-color: var(--sentinel-accent) !important;
    color: #04150a !important;
}

/* Login page */
body.task-login, .task-login #layout, .task-login #layout-content {
    background-color: var(--sentinel-bg) !important;
    color: var(--sentinel-text) !important;
}
.task-login #logo { filter: none; }
#login-form, #login-form table, .task-login .propform {
    background-color: var(--sentinel-panel) !important;
    color: var(--sentinel-text) !important;
}
#login-footer, #login-footer a { color: var(--sentinel-muted) !important; }

/* Message view / compose */
#messagebody, .message-part, .message-htmlpart, #composebody, .compose-headers {
    background-color: #ffffff !important;
    color: #111111 !important; /* message content keeps a readable white canvas */
}
.headers-table td, .headers-table th { color: var(--sentinel-text); border-color: var(--sentinel-border) !important; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #060806; }
::-webkit-scrollbar-thumb { background: #223322; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--sentinel-accent); }

/* Dark-mode class parity: keep the same Sentinel palette */
html.dark-mode body, html.dark-mode #layout-content,
html.dark-mode #layout-list, html.dark-mode #layout-sidebar {
    background-color: var(--sentinel-bg) !important;
    color: var(--sentinel-text) !important;
}