/* =========================================================
   ENGLISH VIP - Roundcube custom theme
   Claro + Escuro padronizado + Glass buttons
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
    --vip-light-bg: #f5f7fa;
    --vip-light-panel: #ffffff;
    --vip-light-border: #e6e9ee;
    --vip-light-text: #2c363a;
    --vip-light-muted: #6b7680;
    --vip-light-hover: #eef3f8;
    --vip-light-selected: #e7edf5;

    --vip-dark-bg: #0b0d10;
    --vip-dark-panel: #111418;
    --vip-dark-panel-2: #151a1f;
    --vip-dark-border: rgba(255,255,255,.08);
    --vip-dark-text: #e8edf2;
    --vip-dark-muted: #aab4be;
    --vip-dark-hover: rgba(255,255,255,.06);
    --vip-dark-selected: rgba(255,255,255,.10);

    --vip-glass-light: rgba(255,255,255,.38);
    --vip-glass-light-border: rgba(255,255,255,.45);

    --vip-glass-dark: rgba(255,255,255,.08);
    --vip-glass-dark-border: rgba(255,255,255,.12);

    --vip-accent: #667eea;
    --vip-accent-2: #764ba2;
    --vip-danger: #ff5a52;
}

/* =========================================================
   MODO CLARO
   ========================================================= */
html:not(.dark-mode),
html:not(.dark-mode) body {
    background: var(--vip-light-bg) !important;
    color: var(--vip-light-text) !important;
}

html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #layout-menu .popover-header,
html:not(.dark-mode) #layout-menu .special-buttons {
    background: var(--vip-light-panel) !important;
    border-color: var(--vip-light-border) !important;
}

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #layout>div>.header,
html:not(.dark-mode) #layout>div>.footer {
    background: var(--vip-light-panel) !important;
    color: var(--vip-light-text) !important;
    border-color: var(--vip-light-border) !important;
}

html:not(.dark-mode) #taskmenu,
html:not(.dark-mode) #taskmenu .action-buttons {
    background: transparent !important;
}

html:not(.dark-mode) #taskmenu a {
    color: var(--vip-light-text) !important;
    background: transparent !important;
    border-color: var(--vip-light-border) !important;
}

html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus {
    background: var(--vip-light-hover) !important;
    color: #000 !important;
}

html:not(.dark-mode) #taskmenu a.selected {
    background: var(--vip-light-selected) !important;
    color: #000 !important;
}

html:not(.dark-mode) #layout-menu .special-buttons a.logout {
    color: #d93025 !important;
}

/* =========================================================
   MODO ESCURO PADRONIZADO
   ========================================================= */
html.dark-mode,
html.dark-mode body {
    background: var(--vip-dark-bg) !important;
    color: var(--vip-dark-text) !important;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout>div>.header,
html.dark-mode #layout>div>.footer,
html.dark-mode .searchbar,
html.dark-mode .menu.pagenav.pagenav-list,
html.dark-mode .menu.pagenav.pagenav-list + .navlist,
html.dark-mode .menu.pagenav.pagenav-list.expanded + .navlist {
    background: var(--vip-dark-panel) !important;
    color: var(--vip-dark-text) !important;
    border-color: var(--vip-dark-border) !important;
}

html.dark-mode #taskmenu,
html.dark-mode #taskmenu .action-buttons {
    background: transparent !important;
}

html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a,
html.dark-mode .searchbar a,
html.dark-mode .searchbar input,
html.dark-mode .searchbar form:before,
html.dark-mode .menu.pagenav .pagenav-text,
html.dark-mode .menu.pagenav a {
    color: var(--vip-dark-text) !important;
    border-color: var(--vip-dark-border) !important;
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus,
html.dark-mode .menu.toolbar a:hover,
html.dark-mode .menu.toolbar a:focus,
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus {
    background: var(--vip-dark-hover) !important;
    color: #fff !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
    background: var(--vip-dark-selected) !important;
    color: #fff !important;
}

html.dark-mode #layout-menu .special-buttons a.logout {
    color: var(--vip-danger) !important;
}

html.dark-mode #messagelist tbody tr,
html.dark-mode table.records-table tbody tr {
    background: transparent !important;
    border-color: var(--vip-dark-border) !important;
}

html.dark-mode #messagelist tbody tr:hover,
html.dark-mode table.records-table tbody tr:hover {
    background: rgba(255,255,255,.035) !important;
}

html.dark-mode #messagelist tbody tr.selected,
html.dark-mode table.records-table tbody tr.selected {
    background: rgba(255,255,255,.07) !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: #0f1317 !important;
    color: var(--vip-dark-text) !important;
    border: 1px solid var(--vip-dark-border) !important;
}

/* =========================================================
   GLASS / LIQUID GLASS (APROXIMADO)
   ========================================================= */

/* Botões principais do topo e ações */
#layout .header a.button,
#layout .header .toolbar a,
#layout .header .dropbutton a,
#taskmenu a,
a.button,
button,
input[type="button"],
input[type="submit"] {
    border-radius: 14px !important;
    transition: all .18s ease !important;
    position: relative;
    overflow: hidden;
}

/* Claro */
html:not(.dark-mode) #layout .header a.button,
html:not(.dark-mode) #layout .header .toolbar a,
html:not(.dark-mode) #layout .header .dropbutton a,
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) a.button,
html:not(.dark-mode) button,
html:not(.dark-mode) input[type="button"],
html:not(.dark-mode) input[type="submit"] {
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)) !important;
    border: 1px solid var(--vip-glass-light-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 4px 14px rgba(0,0,0,.06) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Escuro */
html.dark-mode #layout .header a.button,
html.dark-mode #layout .header .toolbar a,
html.dark-mode #layout .header .dropbutton a,
html.dark-mode #taskmenu a,
html.dark-mode a.button,
html.dark-mode button,
html.dark-mode input[type="button"],
html.dark-mode input[type="submit"] {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    border: 1px solid var(--vip-glass-dark-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 20px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Hover */
#layout .header a.button:hover,
#layout .header .toolbar a:hover,
#layout .header .dropbutton a:hover,
#taskmenu a:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 24px rgba(0,0,0,.18) !important;
}

/* Selecionado com leve destaque */
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) .menu.toolbar a.selected {
    background: linear-gradient(180deg, rgba(102,126,234,.25), rgba(118,75,162,.14)) !important;
    border-color: rgba(102,126,234,.35) !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
    background: linear-gradient(180deg, rgba(102,126,234,.22), rgba(118,75,162,.12)) !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* =========================================================
   LOGO / ÁREA CENTRAL
   ========================================================= */
html.dark-mode #layout-content {
    background:
        radial-gradient(circle at center, rgba(255,255,255,.02), rgba(255,255,255,0) 45%),
        var(--vip-dark-panel) !important;
}

/* =========================================================
   SEGURANÇA VISUAL
   ========================================================= */
#taskmenu a.logout:hover {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255,90,82,.35), rgba(255,90,82,.18)) !important;
}

/* ===== FIX: botão Enviar no compose - modo claro ===== */
html:not(.dark-mode) #layout-content .footer a.button,
html:not(.dark-mode) #layout-content .footer input[type="button"],
html:not(.dark-mode) #layout-content .footer input[type="submit"] {
    background: #ffffff !important;
    color: #2c363a !important;
    border: 1px solid #d9e0e7 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* botão principal Enviar */
html:not(.dark-mode) a.button.send,
html:not(.dark-mode) input.button.send,
html:not(.dark-mode) input[type="submit"].send,
html:not(.dark-mode) #layout-content .footer a.button.send,
html:not(.dark-mode) #layout-content .footer input[type="submit"] {
    background: linear-gradient(180deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102,126,234,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 20px rgba(102,126,234,.28) !important;
}

/* hover do Enviar */
html:not(.dark-mode) a.button.send:hover,
html:not(.dark-mode) input.button.send:hover,
html:not(.dark-mode) input[type="submit"].send:hover,
html:not(.dark-mode) #layout-content .footer a.button.send:hover,
html:not(.dark-mode) #layout-content .footer input[type="submit"]:hover {
    background: linear-gradient(180deg, #5f76df, #6d4596) !important;
    color: #ffffff !important;
}

/* ===== FIX REAL: botão Enviar do compose no modo claro ===== */
html:not(.dark-mode) #composeview-bottom .btn.btn-primary.send,
html:not(.dark-mode) #composeview-bottom a.btn.btn-primary.send,
html:not(.dark-mode) #composeview-bottom .send.btn-primary {
    background: linear-gradient(180deg, #667eea, #764ba2) !important;
    border: 1px solid rgba(102,126,234,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 20px rgba(102,126,234,.28) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* texto e ícone do Enviar */
html:not(.dark-mode) #composeview-bottom .btn.btn-primary.send .inner,
html:not(.dark-mode) #composeview-bottom a.btn.btn-primary.send .inner,
html:not(.dark-mode) #composeview-bottom .send.btn-primary .inner,
html:not(.dark-mode) #composeview-bottom .btn.btn-primary.send:before,
html:not(.dark-mode) #composeview-bottom a.btn.btn-primary.send:before,
html:not(.dark-mode) #composeview-bottom .send.btn-primary:before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* hover */
html:not(.dark-mode) #composeview-bottom .btn.btn-primary.send:hover,
html:not(.dark-mode) #composeview-bottom a.btn.btn-primary.send:hover,
html:not(.dark-mode) #composeview-bottom .send.btn-primary:hover {
    background: linear-gradient(180deg, #5f76df, #6d4596) !important;
    color: #ffffff !important;
}

/* mantém os outros botões do rodapé claros, sem afetar o Enviar */
html:not(.dark-mode) #composeview-bottom .btn:not(.btn-primary),
html:not(.dark-mode) #composeview-bottom a.btn:not(.btn-primary) {
    background: #ffffff !important;
    color: #2c363a !important;
    border: 1px solid #d9e0e7 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ===== FIX DEFINITIVO: botão Enviar no compose - modo claro ===== */

/* Botão real do compose */
html:not(.dark-mode) .formbuttons .btn.btn-primary.send,
html:not(.dark-mode) .formbuttons a.btn.btn-primary.send,
html:not(.dark-mode) .formbuttons .button.send {
    background: linear-gradient(180deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102,126,234,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 20px rgba(102,126,234,.28) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Texto e ícone do botão Enviar */
html:not(.dark-mode) .formbuttons .btn.btn-primary.send .inner,
html:not(.dark-mode) .formbuttons a.btn.btn-primary.send .inner,
html:not(.dark-mode) .formbuttons .button.send .inner,
html:not(.dark-mode) .formbuttons .btn.btn-primary.send:before,
html:not(.dark-mode) .formbuttons a.btn.btn-primary.send:before,
html:not(.dark-mode) .formbuttons .button.send:before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Hover do Enviar */
html:not(.dark-mode) .formbuttons .btn.btn-primary.send:hover,
html:not(.dark-mode) .formbuttons a.btn.btn-primary.send:hover,
html:not(.dark-mode) .formbuttons .button.send:hover {
    background: linear-gradient(180deg, #5f76df, #6d4596) !important;
    color: #ffffff !important;
}

/* Botão "Abrir em nova janela" no modo claro */
html:not(.dark-mode) .formbuttons .btn.btn-link.extwin,
html:not(.dark-mode) .formbuttons a.btn.btn-link.extwin {
    background: #ffffff !important;
    color: #2c363a !important;
    border: 1px solid #d9e0e7 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Texto e ícone do botão secundário */
html:not(.dark-mode) .formbuttons .btn.btn-link.extwin .inner,
html:not(.dark-mode) .formbuttons a.btn.btn-link.extwin .inner,
html:not(.dark-mode) .formbuttons .btn.btn-link.extwin:before,
html:not(.dark-mode) .formbuttons a.btn.btn-link.extwin:before {
    color: #2c363a !important;
    opacity: 1 !important;
}


/* ===== LOGIN: botão ENTRAR ===== */

/* Modo claro */
html:not(.dark-mode) #login-form #rcmloginsubmit,
html:not(.dark-mode) #login-form input#rcmloginsubmit,
html:not(.dark-mode) .task-login #rcmloginsubmit {
    background: linear-gradient(180deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102,126,234,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 20px rgba(102,126,234,.24) !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hover claro */
html:not(.dark-mode) #login-form #rcmloginsubmit:hover,
html:not(.dark-mode) #login-form input#rcmloginsubmit:hover,
html:not(.dark-mode) .task-login #rcmloginsubmit:hover {
    background: linear-gradient(180deg, #5f76df, #6d4596) !important;
    color: #ffffff !important;
}

/* Focus claro */
html:not(.dark-mode) #login-form #rcmloginsubmit:focus,
html:not(.dark-mode) #login-form input#rcmloginsubmit:focus,
html:not(.dark-mode) .task-login #rcmloginsubmit:focus {
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 0 3px rgba(102,126,234,.18),
        0 8px 20px rgba(102,126,234,.24) !important;
}

/* Modo escuro */
html.dark-mode #login-form #rcmloginsubmit,
html.dark-mode #login-form input#rcmloginsubmit,
html.dark-mode .task-login #rcmloginsubmit {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(0,0,0,.28) !important;
    border-radius: 14px !important;
    opacity: 1 !important;
}

/* Hover escuro */
html.dark-mode #login-form #rcmloginsubmit:hover,
html.dark-mode #login-form input#rcmloginsubmit:hover,
html.dark-mode .task-login #rcmloginsubmit:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
    color: #ffffff !important;
}