/* TJH Networks Roundcube Theme
   Colours: bg #08080f | bg2 #0d0d18 | accent #e94560 | text #d8d8d8
   Fonts: Rajdhani (body) | Black Ops One (brand) | Share Tech Mono (mono)
*/

/* ── Variables ── */
:root {
    --tjh-bg:      #08080f;
    --tjh-bg2:     #0d0d18;
    --tjh-bg3:     #12121e;
    --tjh-accent:  #e94560;
    --tjh-accent2: #ff6b6b;
    --tjh-text:    #d8d8d8;
    --tjh-muted:   #888;
    --tjh-border:  rgba(255,255,255,0.07);
    --tjh-border-accent: rgba(233,69,96,0.25);
    --tjh-card:    rgba(255,255,255,0.03);
    --tjh-select:  rgba(233,69,96,0.15);
}

/* ── Base ── */
html, body {
    background: var(--tjh-bg) !important;
    color: var(--tjh-text) !important;
    font-family: 'Rajdhani', sans-serif !important;
}

/* ── Main layout panels ── */
#layout,
#layout-content,
#layout-content > .formcontent,
#layout-content > .content {
    background: var(--tjh-bg) !important;
    color: var(--tjh-text) !important;
}

#layout-sidebar,
#layout-list {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border) !important;
}

/* ── Task menu (leftmost icon bar) ── */
#taskmenu,
#layout-menu,
.taskmenu {
    background: #060610 !important;
    border-color: var(--tjh-border-accent) !important;
}

#taskmenu a,
#taskmenu a.button,
.taskmenu a {
    color: var(--tjh-muted) !important;
}

#taskmenu a:hover,
.taskmenu a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.05) !important;
}

#taskmenu a.selected,
.taskmenu a.selected,
#taskmenu a.active,
.taskmenu a.active {
    color: var(--tjh-accent) !important;
    background: var(--tjh-select) !important;
}

/* ── Headers & Footers ── */
#layout > div > .header,
#layout > div > .footer,
.header,
.footer {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

#layout > div > .header {
    border-bottom-color: var(--tjh-border) !important;
}

.header-title,
.header .header-title {
    color: var(--tjh-text) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
}

/* ── Toolbar buttons ── */
.toolbar a.button,
.header a.button,
a.button {
    color: var(--tjh-muted) !important;
}

.toolbar a.button:hover,
.header a.button:hover,
a.button:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.05) !important;
}

/* ── Listing (message list, folder list) ── */
.listing,
.listing tbody,
ul.listing {
    background: var(--tjh-bg2) !important;
    color: var(--tjh-text) !important;
}

.listing tbody tr,
.listing li,
ul.listing li {
    background: transparent !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

.listing tbody tr:hover,
.listing li:hover,
ul.listing li:hover {
    background: var(--tjh-card) !important;
}

.listing tbody tr.selected,
.listing li.selected,
ul.listing li.selected,
.listing tbody tr.focused,
ul.listing li.focused {
    background: var(--tjh-select) !important;
    color: #fff !important;
}

.listing td,
.listing th {
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

/* Unread messages */
.listing tr.unread td.subject,
.listing tr.unread .subject a {
    color: #fff !important;
}

/* Message count badge */
.listing .badge,
.badge {
    background: var(--tjh-accent) !important;
    color: #fff !important;
}

/* ── Sidebar / folder tree ── */
#folderlist-content,
#mailboxlist,
.folderlist {
    background: var(--tjh-bg2) !important;
    color: var(--tjh-text) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--tjh-bg2); }
::-webkit-scrollbar-thumb { background: #2a2a3e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tjh-accent); }

/* ── Forms & Inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control {
    background: var(--tjh-bg3) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--tjh-text) !important;
    font-family: 'Rajdhani', sans-serif !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(233,69,96,0.2) !important;
    color: var(--tjh-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--tjh-muted) !important;
    opacity: 1 !important;
}

/* ── Buttons ── */
.btn-primary,
input[type="submit"].button.mainaction,
a.button.mainaction {
    background: var(--tjh-accent) !important;
    border-color: var(--tjh-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
input[type="submit"].button.mainaction:hover,
a.button.mainaction:hover {
    background: #c73250 !important;
    border-color: #c73250 !important;
}

.btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--tjh-text) !important;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

/* ── Search bar ── */
#searchbar,
.searchbar,
.searchform {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-border) !important;
}

/* ── Login page ── */
body.task-login {
    background: var(--tjh-bg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#login-form,
#layout-content.no-navbar {
    background: var(--tjh-bg) !important;
}

#logo {
    filter: none !important;
}

/* ── Compose / message view ── */
#message-content,
.message-content,
#message-header,
.message-header {
    background: var(--tjh-bg) !important;
    color: var(--tjh-text) !important;
}

.headers-table td,
.headers-table th {
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

.headers-table .header-title {
    color: var(--tjh-muted) !important;
}

/* ── Popover menus / dropdowns ── */
.popover,
.dropdown-menu {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border-accent) !important;
    color: var(--tjh-text) !important;
}

.dropdown-item,
.popover .popover-body a {
    color: var(--tjh-text) !important;
}

.dropdown-item:hover,
.popover .popover-body a:hover {
    background: var(--tjh-select) !important;
    color: #fff !important;
}

.dropdown-divider {
    border-color: var(--tjh-border) !important;
}

/* ── Dialogs / modals ── */
.ui-dialog,
.modal-content {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border-accent) !important;
    color: var(--tjh-text) !important;
}

.ui-dialog .ui-dialog-titlebar,
.modal-header {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

.modal-footer {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-border) !important;
}

/* ── Tables ── */
table {
    color: var(--tjh-text) !important;
}

th {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-muted) !important;
}

td {
    border-color: var(--tjh-border) !important;
}

/* ── Links ── */
a {
    color: var(--tjh-accent) !important;
}

a:hover {
    color: var(--tjh-accent2) !important;
}

/* ── Notification messages ── */
.message-error,
.message-warning,
.message-information,
.message-success {
    border-color: var(--tjh-border) !important;
}

/* ── Quota bar ── */
.quota-content {
    background: var(--tjh-bg3) !important;
}

.quota-bar .bar {
    background: var(--tjh-accent) !important;
}

/* ── Checkbox & radio ── */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--tjh-accent);
}

/* ── Compose recipients ── */
.recipient-input,
.input-group {
    background: var(--tjh-bg3) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* ── Attachment list ── */
.attachmentlist li {
    background: var(--tjh-bg3) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

/* ── Status bar / footer info ── */
#statusbar,
.statusbar {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-muted) !important;
}

/* ── Folder tree expand/collapse icons ── */
.treetoggle::before {
    color: var(--tjh-muted) !important;
}

/* ── Settings tabs ── */
.tabsbar,
.nav-tabs {
    border-color: var(--tjh-border) !important;
    background: var(--tjh-bg2) !important;
}

.nav-tabs .nav-link {
    color: var(--tjh-muted) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--tjh-text) !important;
    border-color: var(--tjh-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--tjh-accent) !important;
    background: var(--tjh-bg) !important;
    border-color: var(--tjh-border) var(--tjh-border) var(--tjh-bg) !important;
}

/* ── Card panels in settings ── */
.card,
.card-header,
.card-body {
    background: var(--tjh-bg2) !important;
    border-color: var(--tjh-border) !important;
    color: var(--tjh-text) !important;
}

.card-header {
    background: var(--tjh-bg3) !important;
}

/* ── Bootstrap overrides ── */
.bg-light { background: var(--tjh-bg2) !important; }
.bg-white { background: var(--tjh-bg) !important; }
.text-dark { color: var(--tjh-text) !important; }
.border { border-color: var(--tjh-border) !important; }

/* ── Scroller / list pager ── */
.pagenav a,
.listing-title span {
    color: var(--tjh-muted) !important;
}