/* Glassmorphism CSS for Roundcube Elastic Skin */

/* 1. Global Vibrant Mesh Background */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    background-image: 
        radial-gradient(at 40% 20%, hsla(280,100%,74%,0.4) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189,100%,56%,0.4) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(355,100%,93%,0.4) 0px, transparent 50%),
        radial-gradient(at 80% 50%, hsla(340,100%,76%,0.4) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(22,100%,77%,0.4) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(242,100%,70%,0.4) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(343,100%,76%,0.4) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #2c3e50;
}

/* Ensure Dark Mode text remains visible if the user toggles it */
html.dark-mode body {
    background: linear-gradient(135deg, #1f1c2c 0%, #928dab 100%);
    background-image: 
        radial-gradient(at 40% 20%, hsla(280,100%,30%,0.6) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189,100%,20%,0.6) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(355,100%,20%,0.6) 0px, transparent 50%);
    color: #f0f0f0;
}

/* 2. Remove default background colors from main structural elements */
#layout, #layout-sidebar, #layout-content, #layout-list, .header, .listbox, .footer, .scroller, #taskbar {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. The Glass Effect Mixin */
.glass-panel {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

html.dark-mode .glass-panel {
    background: rgba(30, 30, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. Apply Glass Effect to Main UI Components */

/* Login Form */
#login-form {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 40px;
    margin-top: 10vh;
}
html.dark-mode #login-form {
    background: rgba(20, 20, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Main Layout Panels */
#layout > div {
    border-radius: 16px;
    margin: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

html.dark-mode #layout > div {
    background: rgba(30, 30, 30, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sidebar Taskbar (Left Menu) */
#taskbar {
    border-right: none !important;
}

#taskbar a {
    transition: all 0.3s ease;
    border-radius: 12px;
    margin: 4px;
}
#taskbar a:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}
html.dark-mode #taskbar a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* List Items (Emails, Folders) */
.treelist li a, .messagelist tr td, .contactlist li {
    background: transparent !important;
    transition: background 0.2s ease, transform 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html.dark-mode .treelist li a, html.dark-mode .messagelist tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.treelist li.selected > a, .messagelist tr.selected td {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px;
}
html.dark-mode .treelist li.selected > a, html.dark-mode .messagelist tr.selected td {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Buttons */
.btn, .button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
}
.btn:hover, .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.5);
}

/* Header & Toolbars */
.header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.toolbar a {
    border-radius: 8px;
    transition: background 0.2s;
}
.toolbar a:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Email preview pane / Content pane */
#message-header {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 12px;
    margin: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
html.dark-mode #message-header {
    background: rgba(40, 40, 45, 0.5) !important;
    border-color: rgba(255,255,255,0.05);
}

/* Fix text colors inside iframe */
iframe#messagecontframe {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px;
}
html.dark-mode iframe#messagecontframe {
    background: #1e1e1e !important;
}