/* ============================================================
   EcoClean4me Branding — Layout claro sobre o RoundCube Elastic
   Mesma estrutura do mmx.css, com a paleta EcoClean4me.
   Paleta: SÓ no bloco :root logo abaixo (--eco-*). Trocar a paleta
   = mudar só esse bloco. Logo: eco-logo.png (trocar o arquivo).
   Fontes: Poppins (títulos) + Open Sans (texto) — Google Fonts
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");

:root {
    /* ---- Paleta EcoClean4me (único lugar com as cores) ---- */
    --eco-primary: #3f9a0c;
    --eco-primary-dark: #0b6a12;
    --eco-primary-light: #9ad80a;
    --eco-primary-rgb: 63,154,12;
    --eco-secondary: #2e8b10;
    --eco-secondary-dark: #1d6b0c;
    --eco-secondary-rgb: 46,139,16;
    --eco-dark: #4b5157;
    --eco-bg-light: #f6faf3;
    --eco-bg-light-2: #e6f3dc;

    /* ---- Variáveis do Elastic apontando pra paleta ---- */
    --color-main: var(--eco-primary-dark);
    --color-main-shadow: rgba(var(--eco-primary-rgb), 0.2);
    --color-main-hover: var(--eco-primary);
    --color-secondary: var(--eco-secondary);
    --color-link: var(--eco-secondary-dark);
    --color-link-hover: var(--eco-secondary);
    --color-btn-primary: #FFFFFF;
    --color-btn-primary-bg: var(--eco-primary-dark);
    --color-btn-primary-bg-hover: var(--eco-primary);
    --color-checked: var(--eco-primary-dark);
    --color-checked-hover: var(--eco-primary);
}

body { font-family: "Open Sans", system-ui, sans-serif !important; }

/* ============================================================
   TELA DE LOGIN
   ============================================================ */

.task-login #layout-content {
    background:
      radial-gradient(circle at 20% 20%, rgba(var(--eco-primary-rgb), 0.28), transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(var(--eco-secondary-rgb), 0.22), transparent 55%),
      linear-gradient(135deg, var(--eco-bg-light) 0%, var(--eco-bg-light-2) 100%) !important;
}
.task-login #layout-content > img#logo,
.task-login #layout-content > img.logo {
    display: none !important;
}
.task-login form#login-form,
.task-login #login-form.propform {
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px -12px rgba(39, 38, 39, 0.25), 0 0 0 1px rgba(39, 38, 39, 0.04) !important;
    padding: 44px 36px !important;
    max-width: 420px !important;
    width: 92% !important;
}
.task-login form#login-form::before {
    content: "";
    display: block;
    width: 220px; height: 62px;
    margin: 0 auto 28px;
    background: url("eco-logo.png") center/contain no-repeat;
}
.task-login #login-form .formtitle,
.task-login #login-form h1 {
    font-family: "Poppins", "Open Sans", sans-serif !important;
    color: var(--eco-dark) !important;
}
.task-login #login-form input[type="text"],
.task-login #login-form input[type="password"],
.task-login #login-form .form-control {
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    background: #FAFAFA !important;
    transition: all .15s !important;
}
.task-login #login-form input:focus {
    border-color: var(--eco-primary) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(var(--eco-primary-rgb), 0.18) !important;
}
.task-login #login-form button[type="submit"],
.task-login #login-form .btn-primary,
.task-login #login-form input[type="submit"] {
    background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-primary-dark) 100%) !important;
    border: 0 !important;
    color: #FFFFFF !important;
    font-family: "Poppins", "Open Sans", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 14px rgba(var(--eco-primary-rgb), 0.35) !important;
    transition: all .15s;
}
.task-login #login-form button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--eco-primary-light) 0%, var(--eco-primary) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--eco-primary-rgb), 0.45) !important;
}
.task-login #login-form a {
    color: var(--eco-secondary-dark) !important;
    font-weight: 600;
}

/* ============================================================
   WEBMAIL (área autenticada) — toques sutis pra manter usabilidade
   ============================================================ */

/* Override do logo do skin Elastic (sidebar + watermark) */
#logo,
img#logo,
img.logo {
    content: url("eco-logo.png") !important;
}

/* Watermark do painel vazio (área de preview sem email selecionado) */
.watermark,
#mainscreencontent .watermark,
.preview-area .watermark {
    background-image: url("eco-logo.png") !important;
}

.skin-elastic .task-mail .messagelist .selected td,
.skin-elastic .listing tr.selected td {
    background: rgba(var(--eco-primary-rgb), 0.12) !important;
}
.skin-elastic a,
.skin-elastic .btn-link {
    color: var(--eco-secondary-dark);
}
.skin-elastic a:hover { color: var(--eco-secondary); }

.skin-elastic .btn-primary,
.skin-elastic button.btn-primary {
    background: linear-gradient(135deg, var(--eco-primary-dark) 0%, var(--eco-primary) 100%) !important;
    border-color: var(--eco-primary-dark) !important;
}
.skin-elastic .btn-primary:hover {
    background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-primary-light) 100%) !important;
    border-color: var(--eco-primary) !important;
}

/* Toolbar / topbar (só no modo claro — o modo escuro do Elastic fica intacto) */
html:not(.dark-mode) .skin-elastic #layout-menu,
html:not(.dark-mode) .skin-elastic #taskmenu {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--eco-bg-light) 100%) !important;
}
html:not(.dark-mode) .skin-elastic #taskmenu a {
    color: var(--eco-dark) !important;
}
html:not(.dark-mode) .skin-elastic #taskmenu a.selected,
html:not(.dark-mode) .skin-elastic #taskmenu a:hover {
    background: rgba(var(--eco-primary-rgb), 0.16) !important;
    color: var(--eco-primary-dark) !important;
}

/* Avatares (usado pelo p3.js — vai pegar a paleta abaixo) */
.p3-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
}