/* EZVibe Gmail-Style Theme for SnappyMail */

:root {
    --ezvibe-blue: #1a73e8;
    --ezvibe-blue-hover: #1557b0;
    --ezvibe-red: #d93025;
    --ezvibe-green: #188038;
    --ezvibe-yellow: #f9ab00;
    --ezvibe-bg: #f6f8fc;
    --ezvibe-white: #ffffff;
    --ezvibe-sidebar-bg: #f6f8fc;
    --ezvibe-border: #e0e0e0;
    --ezvibe-text: #202124;
    --ezvibe-text-secondary: #5f6368;
    --ezvibe-hover: rgba(26, 115, 232, 0.08);
    --ezvibe-selected: #e8f0fe;
    --ezvibe-compose-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
}

/* === GLOBAL === */
html, body {
    background: var(--ezvibe-bg) !important;
    color: var(--ezvibe-text) !important;
    font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* === TOP BAR / HEADER === */
.b-header,
#rl-top,
.header-panel,
[data-bind*="topPanel"] {
    background: var(--ezvibe-white) !important;
    border-bottom: 1px solid var(--ezvibe-border) !important;
    box-shadow: none !important;
    color: var(--ezvibe-text) !important;
}

/* Logo area */
.b-header .logo-image,
.header-panel .logo-image,
.b-header .e-logo,
[data-bind*="leftPanelLogo"] {
    filter: none !important;
}

/* === SEARCH BAR (Gmail style) === */
.search-input,
.e-search,
[data-bind*="searchFocus"],
.b-search,
input[type="search"],
.search-bar {
    background: #eaf1fb !important;
    border: none !important;
    border-radius: 24px !important;
    color: var(--ezvibe-text) !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    max-width: 720px !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
.search-input:focus,
.e-search:focus,
[data-bind*="searchFocus"]:focus,
.b-search:focus,
input[type="search"]:focus,
.search-bar:focus {
    background: var(--ezvibe-white) !important;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3) !important;
}

/* === LEFT SIDEBAR / FOLDER LIST === */
.b-folders,
.folderList,
#V-FolderList,
[data-bind*="folderList"],
.b-side-panel,
aside {
    background: var(--ezvibe-sidebar-bg) !important;
    border-right: none !important;
}

/* Folder items */
.b-folders li a,
.folderList .folder-item,
[data-bind*="folderName"],
.b-folders .e-item,
.e-folder {
    color: var(--ezvibe-text) !important;
    border-radius: 0 24px 24px 0 !important;
    padding: 4px 12px 4px 24px !important;
    margin-right: 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    transition: background 0.15s !important;
}
.b-folders li a:hover,
.folderList .folder-item:hover,
.e-folder:hover {
    background: var(--ezvibe-hover) !important;
    color: var(--ezvibe-text) !important;
}
.b-folders li a.selected,
.b-folders li a.active,
.folderList .folder-item.selected,
.e-folder.selected,
.e-folder.focused {
    background: var(--ezvibe-selected) !important;
    color: var(--ezvibe-blue) !important;
    font-weight: 600 !important;
}

/* Unread count badge */
.b-folders .count,
.b-folders .unread-count,
.e-folder .count-badge {
    color: var(--ezvibe-text) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* === COMPOSE BUTTON (Gmail floating style) === */
.b-compose-btn,
.compose-button,
[data-bind*="compose"],
a[href="#/compose"],
.buttonCompose {
    background: var(--ezvibe-white) !important;
    color: var(--ezvibe-text) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 12px 24px 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: var(--ezvibe-compose-shadow) !important;
    transition: box-shadow 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.b-compose-btn:hover,
.compose-button:hover,
[data-bind*="compose"]:hover,
a[href="#/compose"]:hover,
.buttonCompose:hover {
    box-shadow: 0 1px 4px 0 rgba(60,64,67,0.38), 0 6px 12px 4px rgba(60,64,67,0.2) !important;
    background: #f8fcff !important;
}

/* === MESSAGE LIST === */
.messageList,
.b-message-list,
#V-MessageList,
[data-bind*="messageList"] {
    background: var(--ezvibe-white) !important;
    border-radius: 8px !important;
}

/* Message list toolbar */
.messageList .toolbar,
.b-message-list-toolbar,
.messageListTop {
    background: var(--ezvibe-white) !important;
    border-bottom: 1px solid var(--ezvibe-border) !important;
    padding: 4px 8px !important;
}

/* Individual message rows */
.messageList .b-message-list-item,
.messageListItem,
[data-bind*="messageListItem"],
.e-message-item {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 4px 12px !important;
    transition: background 0.1s, box-shadow 0.1s !important;
    cursor: pointer !important;
    background: var(--ezvibe-white) !important;
}
.messageList .b-message-list-item:hover,
.messageListItem:hover,
.e-message-item:hover {
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
                0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149) !important;
    z-index: 1 !important;
    position: relative !important;
}
/* Unread messages */
.messageList .b-message-list-item.unseen,
.messageListItem.unseen,
.e-message-item.unseen {
    font-weight: 700 !important;
    background: var(--ezvibe-white) !important;
}
/* Selected/active message */
.messageList .b-message-list-item.selected,
.messageList .b-message-list-item.focused,
.messageListItem.selected,
.e-message-item.selected {
    background: #c2dbff !important;
}

/* Sender name */
.messageList .from,
.e-message-item .from,
.senderAddress {
    color: var(--ezvibe-text) !important;
    font-size: 14px !important;
}

/* Subject */
.messageList .subject,
.e-message-item .subject {
    color: var(--ezvibe-text) !important;
    font-size: 14px !important;
}

/* Preview text */
.messageList .preview,
.e-message-item .preview {
    color: var(--ezvibe-text-secondary) !important;
    font-size: 14px !important;
}

/* Date */
.messageList .date,
.e-message-item .date {
    color: var(--ezvibe-text-secondary) !important;
    font-size: 12px !important;
}

/* Star/flag */
.messageList .flagParent i,
.e-message-item .e-flag {
    color: var(--ezvibe-text-secondary) !important;
}
.messageList .flagParent.flagged i,
.e-message-item .e-flag.flagged {
    color: var(--ezvibe-yellow) !important;
}

/* === READING PANE === */
.b-message-view,
#V-MessageView,
.messageView,
[data-bind*="messageView"] {
    background: var(--ezvibe-white) !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

/* Message header in reading pane */
.b-message-view .subject-title,
.messageView .subject {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--ezvibe-text) !important;
    padding: 16px 24px 8px !important;
}

.b-message-view .from-info,
.messageView .from {
    color: var(--ezvibe-text) !important;
    font-size: 14px !important;
}

.b-message-view .to-info,
.messageView .to {
    color: var(--ezvibe-text-secondary) !important;
    font-size: 13px !important;
}

/* === BUTTONS & ACTIONS === */
.btn,
button,
.button,
[data-bind*="click"] {
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}

/* Primary actions (send, etc.) */
.btn-primary,
.buttonPrimary,
[data-bind*="sendCommand"] {
    background: var(--ezvibe-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 24px !important;
}
.btn-primary:hover,
.buttonPrimary:hover {
    background: var(--ezvibe-blue-hover) !important;
    box-shadow: 0 1px 2px rgba(60,64,67,0.3) !important;
}

/* Danger buttons */
.btn-danger {
    color: var(--ezvibe-red) !important;
}

/* === TOOLBAR ICONS === */
.toolbar i,
.toolbar .icon,
.b-toolbar .e-btn,
.messageListTop i {
    color: var(--ezvibe-text-secondary) !important;
    font-size: 20px !important;
}
.toolbar i:hover,
.toolbar .icon:hover,
.b-toolbar .e-btn:hover {
    color: var(--ezvibe-text) !important;
    background: var(--ezvibe-hover) !important;
    border-radius: 50% !important;
}

/* === CHECKBOXES === */
input[type="checkbox"] {
    accent-color: var(--ezvibe-blue) !important;
}

/* === SCROLLBAR (subtle Gmail style) === */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-thumb {
    background: #dadce0 !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6 !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}

/* === COMPOSE WINDOW === */
.b-compose,
.popupCompose,
#popups .compose,
[data-bind*="composeMessage"] {
    background: var(--ezvibe-white) !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 8px 10px 1px rgba(60,64,67,0.302), 0 3px 14px 3px rgba(60,64,67,0.149) !important;
}

/* Compose header */
.b-compose .header,
.popupCompose .header,
.compose-header {
    background: var(--ezvibe-text) !important;
    color: white !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

/* Compose inputs */
.b-compose input,
.popupCompose input,
.compose-to input,
.compose-subject input {
    border: none !important;
    border-bottom: 1px solid var(--ezvibe-border) !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    background: transparent !important;
    color: var(--ezvibe-text) !important;
}

/* === MODALS & POPUPS === */
.modal,
.popup,
.b-popup {
    border-radius: 8px !important;
    box-shadow: 0 8px 10px 1px rgba(60,64,67,0.302), 0 3px 14px 3px rgba(60,64,67,0.149) !important;
    background: var(--ezvibe-white) !important;
}

/* === TABS === */
.nav-tabs,
.b-tabs {
    border-bottom: 1px solid var(--ezvibe-border) !important;
}
.nav-tabs .active,
.b-tabs .active {
    border-bottom: 2px solid var(--ezvibe-blue) !important;
    color: var(--ezvibe-blue) !important;
}

/* === SETTINGS PAGE === */
.b-settings,
[data-bind*="settingsMenu"] {
    background: var(--ezvibe-white) !important;
    border-radius: 8px !important;
}

/* === DROPDOWN MENUS === */
.dropdown-menu,
.b-dropdown,
.popover {
    background: var(--ezvibe-white) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px 2px rgba(60,64,67,0.149), 0 1px 2px rgba(60,64,67,0.302) !important;
}
.dropdown-menu li:hover,
.b-dropdown li:hover {
    background: var(--ezvibe-hover) !important;
}

/* === LOADING SPINNER === */
.loading,
.b-loading {
    color: var(--ezvibe-blue) !important;
}

/* === EMPTY STATE === */
.b-empty-list,
.emptyList {
    color: var(--ezvibe-text-secondary) !important;
}

/* === NOTIFICATION / TOAST === */
.toast,
.notification,
.b-notification {
    border-radius: 4px !important;
    box-shadow: 0 3px 5px -1px rgba(60,64,67,0.302), 0 6px 10px rgba(60,64,67,0.149) !important;
}

/* === LOGIN PAGE === */
.b-login,
#V-Login,
.loginPage {
    background: var(--ezvibe-bg) !important;
}
.b-login .loginContent,
.loginPage .loginContent {
    background: var(--ezvibe-white) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(60,64,67,0.302) !important;
}

/* === ATTACHMENT CHIPS === */
.attachmentItem,
.b-attachment {
    background: #f1f3f4 !important;
    border: 1px solid var(--ezvibe-border) !important;
    border-radius: 16px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    color: var(--ezvibe-text) !important;
}
.attachmentItem:hover,
.b-attachment:hover {
    background: #e8eaed !important;
}

/* === QUOTA BAR === */
.quota-bar,
.b-quota {
    background: #e8eaed !important;
    border-radius: 4px !important;
}
.quota-bar .used,
.b-quota .used {
    background: var(--ezvibe-blue) !important;
    border-radius: 4px !important;
}

/* === REMOVE DARK THEME ARTIFACTS === */
.dark-theme,
[data-theme="dark"] {
    /* Override any dark theme leftovers */
    background: var(--ezvibe-bg) !important;
    color: var(--ezvibe-text) !important;
}

/* === LINKS === */
a {
    color: var(--ezvibe-blue) !important;
    text-decoration: none !important;
}
a:hover {
    text-decoration: underline !important;
}

/* === AVATAR / PROFILE ICON === */
.avatar,
.contact-avatar,
.b-avatar {
    border-radius: 50% !important;
    background: var(--ezvibe-blue) !important;
    color: white !important;
}

/* === SPLITTER / RESIZE BAR === */
.b-resizer,
.resizer,
.splitbar {
    background: var(--ezvibe-border) !important;
    width: 1px !important;
}

/* Make sure nothing is dark/black background */
.layout,
.b-content,
#rl-content,
main,
[role="main"] {
    background: var(--ezvibe-bg) !important;
}