/**
 * Custom UI - Roundcube Elastic
 * Refonte complète du style (mobile-first)
 */

:root {
    --ui-primary: #0f6fff;
    --ui-primary-2: #0b57d0;
    --ui-accent: #ff7a00;
    --ui-bg: #f3f6fb;
    --ui-surface: #ffffff;
    --ui-text: #0f172a;
    --ui-text-soft: #64748b;
    --ui-border: #e2e8f0;
    --ui-selected: #e8f0ff;
    --ui-hover: #f6f9ff;
    --ui-sidebar: #0f172a;
    --ui-sidebar-text: #cbd5e1;
}

body {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

#layout,
#layout-content,
#layout-list,
#layout-preview,
#layout-sidebar,
.content,
.contentframe {
    background: var(--ui-surface) !important;
}

#header,
.app-header {
    background: linear-gradient(90deg, var(--ui-primary), var(--ui-primary-2)) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
}

#header *,
.app-header * {
    color: #fff !important;
}

#header .header-title:before {
    content: none;
}

#toolbar,
.toolbar {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

#messagelist .message,
.listbox .listitem {
    border-bottom: 1px solid #edf2f7 !important;
    transition: background-color 0.15s ease !important;
}

#messagelist .message:hover,
.listbox .listitem:hover {
    background: var(--ui-hover) !important;
}

#messagelist .message.selected,
.listbox .listitem.selected {
    background: var(--ui-selected) !important;
}

#messagelist .message.unread .subject,
#messagelist .message.unread .from {
    color: var(--ui-text) !important;
    font-weight: 700 !important;
}

.listbox .listitem .date,
.listbox .listitem .size,
.listbox .listitem .subject,
.listbox .listitem .from,
.listbox .listitem .to {
    color: var(--ui-text) !important;
}

#messagecontframe,
#messagecontent,
.iframe-wrapper {
    background: #fff !important;
}

a.compose,
button.compose,
.floating-action-buttons a,
.floating-action-buttons button {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(255, 122, 0, 0.35) !important;
}

.btn-primary,
button.primary,
input.button.mainaction,
a.button.primary,
#login-form .submit,
#login-form input[type="submit"] {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.btn-primary:hover,
button.primary:hover,
#login-form .submit:hover {
    background: var(--ui-primary-2) !important;
    border-color: var(--ui-primary-2) !important;
}

#layout > .sidebar .unreadcount,
.unreadcount {
    background: var(--ui-accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

#taskmenu,
.taskmenu {
    background: #fff !important;
    border-top: 1px solid var(--ui-border) !important;
}

#taskmenu a,
.taskmenu a {
    color: var(--ui-text-soft) !important;
}

#taskmenu a.selected,
#taskmenu a:hover,
.taskmenu a.selected,
.taskmenu a:hover {
    color: var(--ui-primary) !important;
}

.watermark {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

#login-form .formbox {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10) !important;
}

#login-form input[type="text"],
#login-form input[type="password"],
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ui-text) !important;
}

#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 111, 255, 0.12) !important;
}

@media (min-width: 768px) {
    body {
        background: var(--ui-bg) !important;
    }

    #layout {
        margin: 10px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10) !important;
    }

    #layout > .sidebar {
        background: var(--ui-sidebar) !important;
    }

    #layout > .sidebar .listitem a,
    #layout > .sidebar .listitem span,
    #layout > .sidebar .folder-name,
    #layout > .sidebar .inner {
        color: var(--ui-sidebar-text) !important;
    }

    #layout > .sidebar .listitem.selected > a,
    #layout > .sidebar .listitem:hover > a {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    a.compose,
    button.compose {
        border-radius: 999px !important;
        padding: 8px 18px !important;
    }
}

@media (max-width: 767px) {
    body,
    #layout,
    #layout-content,
    #layout-list,
    #layout-preview {
        background: #fff !important;
    }

    #layout > .sidebar,
    #layout > .sidebar .scroller {
        background: #fff !important;
    }

    #layout > .sidebar .listitem a,
    #layout > .sidebar .listitem span,
    #layout > .sidebar .folder-name {
        color: var(--ui-text) !important;
        font-size: 15px !important;
    }

    #login-form .formbox {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 18px 14px !important;
        margin: 0 !important;
    }

    #taskmenu,
    .taskmenu {
        box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.08) !important;
    }
}