/* 
 * DIGITAL ELECTRONICS - Sovereign Mail Hub Theme
 * Custom skin override to match digitalelectronics.store
 * Primary: #2563eb (blue), Background: #0a0a0a (dark), Surface: #111111
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===== GLOBAL RESET & BASE ===== */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html, body {
    background: #0a0a0a !important;
    color: #f1f5f9 !important;
}

/* ===== LAYOUT ===== */
#layout {
    background: #0a0a0a !important;
}

#layout > .content {
    background: #0a0a0a !important;
}

/* ===== HEADER / TOP NAV ===== */
#layout-header,
.header,
nav.navbar {
    background: #111111 !important;
    border-bottom: 1px solid #1e2a3a !important;
    box-shadow: 0 1px 0 rgba(37, 99, 235, 0.15) !important;
}

/* App logo / product name in header */
#layout-header .menu-header,
.skin-elastic #header .menu-header {
    color: #f1f5f9 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ===== SIDEBAR ===== */
#layout-sidebar,
.sidebar,
#folder-list-wrapper {
    background: #0f0f0f !important;
    border-right: 1px solid #1a1a2e !important;
}

#taskmenu,
.taskmenu {
    background: #111111 !important;
    border-right: 1px solid #1e1e2e !important;
}

/* Sidebar icons / nav items */
.taskmenu a,
.taskmenu li a {
    color: #64748b !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
}

.taskmenu a:hover,
.taskmenu a.active,
.taskmenu a.selected {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.12) !important;
}

/* Folder list */
#folder-list li,
.folderlist li {
    border-radius: 8px !important;
}

#folder-list li a,
.folderlist li a {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.15s !important;
}

#folder-list li a:hover,
#folder-list li.selected a,
.folderlist li.selected a {
    color: #ffffff !important;
    background: rgba(37, 99, 235, 0.15) !important;
}

#folder-list li.unread a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ===== MESSAGE LIST ===== */
#messagelist-header,
.message-list-header {
    background: #111111 !important;
    border-bottom: 1px solid #1e1e2e !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

table#messagelist,
.messagelist {
    background: #0a0a0a !important;
}

table#messagelist tbody tr,
.messagelist li {
    border-bottom: 1px solid #141414 !important;
    transition: background 0.1s ease !important;
}

table#messagelist tbody tr:hover,
.messagelist li:hover {
    background: #111111 !important;
}

table#messagelist tbody tr.selected,
.messagelist li.selected {
    background: #0f1f3d !important;
    border-left: 3px solid #2563eb !important;
}

table#messagelist tbody tr td,
.messagelist li .sender,
.messagelist li .subject {
    color: #cbd5e1 !important;
}

table#messagelist tbody tr.unread td,
table#messagelist tbody tr.unread td.subject {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ===== MESSAGE VIEW ===== */
#messageframe,
#message-content,
.message-part {
    background: #111111 !important;
    border-radius: 16px !important;
    border: 1px solid #1e1e2e !important;
    color: #e2e8f0 !important;
}

#message-header,
.message-header {
    background: #111111 !important;
    border-bottom: 1px solid #1e1e2e !important;
    padding: 20px 24px !important;
}

.message-header .subject,
h2.subject {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
}

.message-header .headers-table td {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.message-header .headers-table td.header-title {
    color: #64748b !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
}

/* ===== COMPOSE WINDOW ===== */
#compose-container,
#compose-body {
    background: #111111 !important;
}

.compose-header,
#compose-header {
    background: #111111 !important;
    border-bottom: 1px solid #1e1e2e !important;
    padding: 20px 24px !important;
}

.form-group label,
.compose-header label {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
.form-control,
.subject-line input {
    background: #1a1a2e !important;
    border: 1px solid #1e2a3a !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    transition: border-color 0.15s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
.form-control:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    background: #0f1f3d !important;
}

/* Compose editor area */
#composebody,
.mce-edit-area,
iframe#composebody {
    background: #111111 !important;
    color: #e2e8f0 !important;
}

/* ===== BUTTONS ===== */
.button,
a.button,
input[type="submit"],
input[type="button"],
button,
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
}

.button.mainaction,
.btn-primary,
input[type="submit"].mainaction,
a.button.send {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.button.mainaction:hover,
.btn-primary:hover,
a.button.send:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
    transform: translateY(-1px) !important;
}

.button.secondary,
.btn-secondary {
    background: #1a1a2e !important;
    color: #94a3b8 !important;
    border: 1px solid #1e2a3a !important;
}

.button.secondary:hover {
    background: #1e2a3a !important;
    color: #f1f5f9 !important;
}

/* Toolbar buttons */
.toolbar .button,
#toolbar .button {
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    border-radius: 8px !important;
}

.toolbar .button:hover,
#toolbar .button:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563eb !important;
}

/* ===== SEARCH ===== */
.searchbox,
#searchbox,
input[type="search"] {
    background: #1a1a2e !important;
    border: 1px solid #1e2a3a !important;
    color: #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 8px 16px 8px 36px !important;
}

.searchbox:focus,
input[type="search"]:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ===== LOGIN PAGE ===== */
#login-form,
.login-content,
body.task-login {
    background: #0a0a0a !important;
}

#login-form .card,
.login-card {
    background: #111111 !important;
    border: 1px solid #1e1e2e !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(37, 99, 235, 0.1) !important;
    padding: 40px !important;
}

#login-form h1,
.login-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    letter-spacing: -1px !important;
    margin-bottom: 6px !important;
}

/* ===== SETTINGS ===== */
#settings-section,
.settings-body {
    background: #111111 !important;
    border-radius: 16px !important;
    border: 1px solid #1e1e2e !important;
}

.section-title,
h3.settingstitle {
    color: #f1f5f9 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

/* ===== DIALOGS & MODALS ===== */
.ui-dialog,
.modal-dialog .modal-content,
.popup {
    background: #111111 !important;
    border: 1px solid #1e2a3a !important;
    border-radius: 20px !important;
    color: #f1f5f9 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7) !important;
}

.ui-dialog .ui-dialog-titlebar,
.modal-header {
    background: #111111 !important;
    border-bottom: 1px solid #1e1e2e !important;
    color: #ffffff !important;
    border-radius: 20px 20px 0 0 !important;
    font-weight: 800 !important;
}

/* ===== SCROLLBARS (webkit) ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #1e2a3a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* ===== DROPDOWNS & MENUS ===== */
.dropdownmenu,
.menu,
ul.menu {
    background: #111111 !important;
    border: 1px solid #1e2a3a !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

.dropdownmenu li a,
.menu li a {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    transition: all 0.1s !important;
}

.dropdownmenu li a:hover,
.menu li a:hover {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important;
}

/* ===== NOTIFICATIONS / ALERTS ===== */
.notify,
.message,
#messagestack div {
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.notify.notice,
.message.notice {
    background: rgba(37, 99, 235, 0.15) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    color: #93c5fd !important;
}

.notify.confirmation,
.message.confirmation {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

.notify.error,
.message.error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* ===== TABLES ===== */
table th {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #1e1e2e !important;
}

table td {
    border-bottom: 1px solid #141414 !important;
    color: #cbd5e1 !important;
}

/* ===== LINKS ===== */
a {
    color: #2563eb !important;
    text-decoration: none !important;
}

a:hover {
    color: #60a5fa !important;
}

/* ===== CONTACT LIST ===== */
#contacts-list li,
.addressbook-list li {
    border-bottom: 1px solid #141414 !important;
    color: #cbd5e1 !important;
}

#contacts-list li.selected {
    background: #0f1f3d !important;
    border-left: 3px solid #2563eb !important;
}

/* ===== BRAND ACCENT STRIP ===== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    z-index: 9999;
}

@keyframes shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ===== QUOTA / PROGRESS BARS ===== */
.quota-display,
.progress {
    background: #1a1a2e !important;
    border-radius: 999px !important;
}

.quota-display .bar,
.progress-bar {
    background: #2563eb !important;
    border-radius: 999px !important;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 768px) {
    #layout-sidebar {
        background: #0f0f0f !important;
    }
}