/*
 * File: custom_stylez.css
 * Description: Custom stylesheet for Roundcube Elastic skin
 * Used for: webmail.javierleyva.com
 */

/* ========================================================================= */
/* 1. BRANDING & COLORS */
/* ========================================================================= */

/* Define the new primary color (e.g., a dark blue or green) */
:root {
    --color-primary: #3C8DBC; /* New brand color: Light Blue */
    --color-primary-dark: #2A6496; /* Darker shade for hovers/active states */
}

/* Update the main header background and text */
header#layout-header {
    background-color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Update active menu items and button backgrounds */
.button.primary, 
.listbox a:focus, .listbox a:hover, 
#messagelist .message.focused, 
#messagelist .message.selected {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Highlight the folder currently selected */
.listing.folder-list a.selected, 
.listing.folder-list a:focus, 
.listing.folder-list a:hover {
    background-color: var(--color-primary);
    color: #FFF; /* Ensure text is white for contrast */
}


/* ========================================================================= */
/* 2. LOGIN SCREEN CUSTOMIZATION */
/* ========================================================================= */

/* Update the login box styling */
#login-form {
    border-top: 5px solid var(--color-primary);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Ensure custom logo is visible on the login screen */
/* This relies on your config: $config['skin_logo'] = array("elastic:login" => "/images/javierleyva.com.svg"); */
#login-form h1.logo {
    background-image: url("/images/javierleyva.com.svg") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 200px; /* Adjust width as needed for your SVG */
    height: 60px; /* Adjust height as needed for your SVG */
}


/* ========================================================================= */
/* 3. LAYOUT & HIDING ELEMENTS */
/* ========================================================================= */

/* Remove the "About" link from the bottom right corner */
#layout-footer a[onclick*="command('about')"] {
    display: none;
}

/* Hide the server name/host in the footer (often redundant/unnecessary) */
#layout-footer span.server-info {
    display: none;
}

/* Adjust font sizes in the message list for better scanning */
#messagelist .message .subject, 
#messagelist .message .from {
    font-size: 14px;
    font-weight: 500;
}

/* Adjust the padding in the message list for a less dense feel */
#messagelist .message {
    padding: 6px 10px;
}

/* ========================================================================= */
/* 4. RESPONSIVENESS ADJUSTMENTS (Optional) */
/* ========================================================================= */

/* Example: Reduce padding on mobile screens */
@media (max-width: 768px) {
    #layout-header {
        padding: 5px 10px;
    }
}