/* ============================================================
   OwnCargo Mail — Custom Skin (extends Elastic)
   Dark theme with blue accent branding
   ============================================================ */

/* Import elastic base CSS — MUST be first */
@import url("../../elastic/styles/styles.min.css");

/* ===== GLOBAL FONT ===== */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== ANIMATIONS ===== */
@keyframes ocFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ocPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes ocShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║                    LOGIN PAGE                           ║
   ╚══════════════════════════════════════════════════════════╝ */

body.login-page {
    background: #020617 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide Elastic's default login layout elements */
body.login-page #layout,
body.login-page #layout-content,
body.login-page .task-login #layout,
body.login-page #logo,
body.login-page #login-footer,
body.login-page .voice,
body.login-page noscript .noscriptwarning {
    display: none !important;
}

/* Reset elastic's generic form spacing that shifts content down */
body.login-page .propform,
body.login-page #login-form.propform,
body.login-page .formcontent {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Kill any elastic table styling on login */
body.login-page table.propform,
body.login-page .propform table {
    margin: 0 !important;
    padding: 0 !important;
}

.oc-login-container {
    width: 100%;
    max-width: 420px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    animation: ocFadeIn 0.6s ease-out;
}

.oc-login-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.8));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 24px;
    padding: 2.5rem 2.25rem 2rem;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(56, 189, 248, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.oc-login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.oc-logo-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.2));
}

.oc-login-title {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    letter-spacing: -0.7px !important;
    margin: 0 0 0.4rem 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    line-height: 1.3 !important;
}

.oc-login-title span {
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.oc-login-subtitle {
    color: #64748b !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Form reset inside login */
body.login-page form,
body.login-page #login-form,
body.login-page .propform,
body.login-page #login-form.propform {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.login-page #login-form table,
body.login-page form table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

body.login-page #login-form table tbody {
    display: block !important;
}

body.login-page #login-form table tr {
    display: block !important;
    margin-bottom: 1.25rem !important;
    background: none !important;
    border: none !important;
}

body.login-page #login-form table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
}

body.login-page #login-form table td.title {
    margin-bottom: 0.5rem !important;
}

body.login-page #login-form label,
body.login-page .propform label {
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    background: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Login inputs */
body.login-page input[type="text"],
body.login-page input[type="password"],
body.login-page input[type="email"],
body.login-page input.form-control,
body.login-page #rcmloginuser,
body.login-page #rcmloginpwd {
    width: 100% !important;
    padding: 0.9rem 1.15rem !important;
    background: rgba(2, 6, 23, 0.8) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 12px !important;
    color: #f1f5f9 !important;
    font-size: 0.95rem !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
}

body.login-page input[type="text"]:focus,
body.login-page input[type="password"]:focus,
body.login-page #rcmloginuser:focus,
body.login-page #rcmloginpwd:focus {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), 0 0 20px rgba(56, 189, 248, 0.05) !important;
    background: rgba(2, 6, 23, 0.95) !important;
}

body.login-page select,
body.login-page #rcmloginhost {
    width: 100% !important;
    padding: 0.9rem 1.15rem !important;
    background: rgba(2, 6, 23, 0.8) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 12px !important;
    color: #f1f5f9 !important;
    font-size: 0.95rem !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

body.login-page input::placeholder {
    color: #475569 !important;
}

/* Hide Roundcube's default submit rendered by loginform */
body.login-page #login-form .formbuttons,
body.login-page #login-form button.mainaction,
body.login-page #login-form input[type="submit"],
body.login-page #login-form .button.submit {
    display: none !important;
}

/* Custom submit button */
.oc-submit-area {
    margin-top: 1.75rem;
}

.oc-submit-btn {
    width: 100%;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    text-align: center;
}

.oc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.3);
    filter: brightness(1.05);
}

.oc-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.2);
}

.oc-btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.oc-submit-btn:hover .oc-btn-arrow {
    transform: translateX(3px);
}

/* Login footer */
.oc-login-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.oc-login-footer p {
    color: #475569 !important;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    margin: 0;
}

.oc-login-footer a {
    color: #38bdf8 !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.oc-login-footer a:hover {
    color: #7dd3fc !important;
}

/* Login messages */
body.login-page #message {
    position: fixed !important;
    top: 1.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    max-width: 420px !important;
    width: calc(100% - 3rem) !important;
}

body.login-page #message:empty {
    display: none !important;
}

body.login-page #message .error,
body.login-page #message .warning,
body.login-page .message.error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 12px !important;
    color: #fca5a5 !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    backdrop-filter: blur(12px) !important;
}

body.login-page #message .confirmation {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    border-radius: 12px !important;
    color: #6ee7b7 !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

/* Login responsive */
@media (max-width: 480px) {
    .oc-login-card {
        padding: 2rem 1.5rem 1.75rem;
        border-radius: 20px;
    }
    .oc-login-title {
        font-size: 1.45rem !important;
    }
    .oc-login-container {
        margin: 1rem auto;
    }
    .oc-logo-icon {
        width: 48px;
        height: 48px;
    }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║                 MAIN MAIL UI (DARK THEME)               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Force dark mode */
html {
    color-scheme: dark;
}

body:not(.login-page) {
    background: #0b1120 !important;
    color: #cbd5e1 !important;
}

/* ---- Layout skeleton ---- */
#layout {
    background: #0b1120 !important;
}

#layout > div > .header,
#layout > div > .footer {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
    color: #e2e8f0 !important;
}

#layout > div > .header a.button,
#layout > div > .footer a.button {
    color: #94a3b8 !important;
}

#layout > div > .header a.button:hover,
#layout > div > .footer a.button:hover {
    color: #38bdf8 !important;
}

/* ---- Left task menu (icons sidebar) ---- */
#layout-menu,
.menu.toolbar {
    background: #070c18 !important;
    border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
}

#layout-menu a.button {
    color: #64748b !important;
}

#layout-menu a.button:hover {
    color: #e2e8f0 !important;
    background: rgba(56, 189, 248, 0.06) !important;
}

#layout-menu a.button.selected,
#layout-menu a.button:focus {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
}

#layout-menu a.button.selected::before {
    color: #38bdf8 !important;
}

#layout-menu .special-buttons {
    background: transparent !important;
}

#layout-menu .special-buttons a {
    color: #64748b !important;
}

#layout-menu .special-buttons a:hover {
    color: #e2e8f0 !important;
}

/* ---- Sidebar (folders) ---- */
#layout-sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
}

#layout-sidebar .header {
    background: #0f172a !important;
}

/* Folder list */
#mailboxlist li a,
.listing.iconized li a {
    color: #94a3b8 !important;
}

#mailboxlist li a:hover,
.listing.iconized li a:hover {
    color: #e2e8f0 !important;
    background: rgba(56, 189, 248, 0.05) !important;
}

#mailboxlist li.selected > a,
.listing.iconized li.selected > a {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1) !important;
}

#mailboxlist li.selected > a::before {
    color: #38bdf8 !important;
}

#mailboxlist li a::before,
.listing.iconized li a::before {
    color: #475569 !important;
}

#mailboxlist li.selected > a::before {
    color: #38bdf8 !important;
}

/* Unread count badge */
#mailboxlist .unreadcount,
.listing .unreadcount {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
    border: none !important;
}

/* ---- Message list panel ---- */
#layout-list {
    background: #0f172a !important;
    border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
}

#layout-list .header {
    background: #0f172a !important;
}

/* Search bar */
.searchbar {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

.searchbar input {
    color: #e2e8f0 !important;
    background: transparent !important;
}

.searchbar input::placeholder {
    color: #475569 !important;
}

.searchbar a,
.searchbar form::before {
    color: #64748b !important;
}

.searchbar a:hover {
    color: #38bdf8 !important;
}

/* Message list rows */
#messagelist {
    background: transparent !important;
}

#messagelist tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important;
}

#messagelist tr td {
    color: #94a3b8 !important;
    border-color: transparent !important;
}

#messagelist tr td.subject a,
#messagelist tr td.subject span {
    color: #cbd5e1 !important;
}

#messagelist tr.unread td.subject a,
#messagelist tr.unread td.subject span {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

#messagelist tr.unread td {
    color: #e2e8f0 !important;
}

/* Hover */
#messagelist tr:hover td {
    background: rgba(56, 189, 248, 0.03) !important;
}

/* Selected */
#messagelist tr.selected td {
    background: rgba(56, 189, 248, 0.08) !important;
    color: #e2e8f0 !important;
}

#messagelist tr.selected td.subject a,
#messagelist tr.selected td.subject span {
    color: #38bdf8 !important;
}

/* Focus indicator */
#messagelist tr.focused td {
    box-shadow: inset 3px 0 0 #38bdf8 !important;
}

/* Flagged */
#messagelist tr.flagged td.flag span::before {
    color: #f59e0b !important;
}

/* Deleted */
#messagelist tr.deleted td {
    opacity: 0.4 !important;
}

/* Thread toggle */
#messagelist .threads .msgicon::before {
    color: #475569 !important;
}

/* Date, size columns */
#messagelist td.date,
#messagelist td.size {
    color: #64748b !important;
    font-size: 0.82rem !important;
}

/* ---- Content panel (message view) ---- */
#layout-content {
    background: #0b1120 !important;
}

#layout-content .header {
    background: #0f172a !important;
}

/* Message headers */
.message-header,
.message-headerbox {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
    color: #e2e8f0 !important;
}

.message-header .header-title,
.message-headerbox .header-title {
    color: #f1f5f9 !important;
}

.message-header td.header,
.message-headerbox td.header {
    color: #64748b !important;
}

.message-header td.header-value,
.message-headerbox td.header-value {
    color: #cbd5e1 !important;
}

.message-header a,
.message-headerbox a {
    color: #38bdf8 !important;
}

/* Subject line */
#message-header h2.subject,
.message-subject {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

/* Message body */
#messagebody,
.message-part {
    background: transparent !important;
    color: #cbd5e1 !important;
}

/* Blockquotes in messages */
blockquote {
    border-left-color: rgba(56, 189, 248, 0.3) !important;
    color: #94a3b8 !important;
}

blockquote blockquote {
    border-left-color: rgba(16, 185, 129, 0.3) !important;
}

/* Attachments */
#attachment-list,
.attachmentslist {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
}

#attachment-list li a,
.attachmentslist a {
    color: #94a3b8 !important;
}

#attachment-list li a:hover,
.attachmentslist a:hover {
    color: #38bdf8 !important;
}

/* ---- Toolbar ---- */
.toolbar {
    background: #0f172a !important;
}

.toolbar a.button {
    color: #94a3b8 !important;
}

.toolbar a.button:hover:not(.disabled) {
    color: #e2e8f0 !important;
    background: rgba(56, 189, 248, 0.06) !important;
}

.toolbar a.button.disabled {
    opacity: 0.3 !important;
}

.toolbar a.button::before {
    color: inherit !important;
}

/* ---- Compose ---- */
#composebody,
.mce-content-body,
textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Compose headers */
#compose-content .compose-header-table td {
    border-color: rgba(148, 163, 184, 0.08) !important;
}

/* ---- Forms (non-login) ---- */
body:not(.login-page) input[type="text"],
body:not(.login-page) input[type="password"],
body:not(.login-page) input[type="email"],
body:not(.login-page) input[type="search"],
body:not(.login-page) input[type="url"],
body:not(.login-page) input.form-control,
body:not(.login-page) textarea.form-control {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #e2e8f0 !important;
}

body:not(.login-page) input:focus,
body:not(.login-page) textarea:focus,
body:not(.login-page) select:focus {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08) !important;
    outline: none !important;
}

body:not(.login-page) select {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #e2e8f0 !important;
}

/* ---- Buttons ---- */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
    background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
}

.btn-primary:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2) !important;
}

.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
}

.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #e2e8f0 !important;
}

/* ---- Popups / Dialogs ---- */
.popover,
.popup,
.popupmenu {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
    color: #e2e8f0 !important;
}

.popupmenu ul li a,
.popover .listing li a,
.popup .listing li a,
.menu.listing li a {
    color: #94a3b8 !important;
}

.popupmenu ul li a:hover,
.popover .listing li a:hover,
.popup .listing li a:hover,
.menu.listing li a:hover {
    color: #e2e8f0 !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

/* Modal dialogs */
.ui-dialog {
    background: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
    color: #f1f5f9 !important;
}

.ui-dialog .ui-dialog-content {
    color: #cbd5e1 !important;
}

.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* ---- Settings ---- */
#sections-table li a,
#sections-table .listitem a {
    color: #94a3b8 !important;
}

#sections-table li.selected a,
#sections-table .listitem.selected a {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

.formcontent,
.propform,
#prefs-details {
    background: transparent !important;
    color: #cbd5e1 !important;
}

.propform .form-group label,
#prefs-details label {
    color: #94a3b8 !important;
}

fieldset legend {
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* ---- Contacts / Addressbook ---- */
#contacts-table,
#directorylist {
    background: transparent !important;
}

#contacts-table tr td,
.contactlist tr td {
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.04) !important;
}

#contacts-table tr.selected td,
.contactlist tr.selected td {
    background: rgba(56, 189, 248, 0.08) !important;
    color: #38bdf8 !important;
}

#contactphoto {
    background: rgba(56, 189, 248, 0.06) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* ---- Notifications (message stack) ---- */
#messagestack {
    z-index: 10000 !important;
}

#messagestack div {
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

#messagestack .alert-info,
#messagestack .notice {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}

#messagestack .alert-success,
#messagestack .confirmation {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

#messagestack .alert-warning,
#messagestack .warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

#messagestack .alert-danger,
#messagestack .error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

#messagestack .loading {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
}

/* ---- Scrollbars ---- */
body:not(.login-page) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body:not(.login-page) ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

body:not(.login-page) ::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.2);
    border-radius: 3px;
}

body:not(.login-page) ::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.35);
}

/* ---- Page navigation ---- */
.pagenav .button,
.menu.pagenav a {
    color: #64748b !important;
}

.pagenav .button:hover,
.menu.pagenav a:hover {
    color: #38bdf8 !important;
}

.pagenav .pagenav-text {
    color: #64748b !important;
}

/* ---- Empty watermark ---- */
#messagecontframe .watermark,
.watermark {
    color: #1e293b !important;
}

/* ---- Splitter ---- */
.splitter {
    background: rgba(148, 163, 184, 0.06) !important;
}

.splitter:hover {
    background: rgba(56, 189, 248, 0.1) !important;
}

/* ---- Checkbox styling ---- */
body:not(.login-page) input[type="checkbox"] + label::before,
body:not(.login-page) .custom-switch .custom-control-label::before {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body:not(.login-page) input[type="checkbox"]:checked + label::before,
body:not(.login-page) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
}

/* ---- Table borders ---- */
body:not(.login-page) table.records-table tr {
    border-color: rgba(148, 163, 184, 0.06) !important;
}

/* ---- Quota bar ---- */
.quota {
    color: #64748b !important;
}

.quota .bar {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

.quota .bar .value {
    background: linear-gradient(90deg, #38bdf8, #6366f1) !important;
}

/* ---- Tooltip ---- */
.tooltip .tooltip-inner {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
}

/* ---- Mobile overrides ---- */
@media screen and (max-width: 768px) {
    #layout-menu {
        background: #070c18 !important;
    }

    .popover {
        background: #1e293b !important;
    }

    .popover .popover-header {
        background: rgba(15, 23, 42, 0.8) !important;
        border-color: rgba(148, 163, 184, 0.1) !important;
        color: #e2e8f0 !important;
    }
}

@media screen and (max-width: 480px) {
    #layout-menu {
        background: #0f172a !important;
        border: none !important;
    }
}

/* ---- Accessibility: focus rings ---- */
body:not(.login-page) a:focus-visible,
body:not(.login-page) button:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.5) !important;
    outline-offset: 2px !important;
}

/* ---- Link colors ---- */
body:not(.login-page) a {
    color: #38bdf8;
}

body:not(.login-page) a:hover {
    color: #7dd3fc;
}

/* ---- TinyMCE editor (compose) dark ---- */
.mce-panel {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

.mce-toolbar .mce-btn button {
    color: #94a3b8 !important;
}

.mce-toolbar .mce-btn:hover button {
    color: #e2e8f0 !important;
}

.mce-menubar .mce-menubtn button {
    color: #94a3b8 !important;
}

.mce-menu {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

.mce-menu-item:hover {
    background: rgba(56, 189, 248, 0.08) !important;
}

/* ---- Card style for content areas ---- */
#identity-details .formcontent,
#folder-details .formcontent {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.06) !important;
    padding: 1rem !important;
}

/* ---- Listing headers ---- */
.listing thead td,
.listing thead th,
table.records-table thead td,
table.records-table thead th {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #64748b !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ---- Drag and drop indicator ---- */
.droptarget {
    background: rgba(56, 189, 248, 0.1) !important;
    border: 2px dashed rgba(56, 189, 248, 0.3) !important;
}

/* ---- Print view: keep it light ---- */
@media print {
    body {
        background: white !important;
        color: #000 !important;
    }
}