/* ============================================================
   MonitorMix Branding — Layout dark sobre o RoundCube Elastic
   Mantém estrutura do p3.css mas usa paleta MonitorMix:
     - bg ink-950 #0b0a13
     - surface ink-900/800
     - brand purple-500 #8b5cf6 → purple-600 #7c3aed
     - accent gradient via fuchsia → amber (logo)
   Fontes: Inter (sans) + Space Grotesk (display) — Google Fonts
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap");

:root {
    --color-main: #7c3aed;
    --color-main-shadow: rgba(124, 58, 237, 0.2);
    --color-main-hover: #8b5cf6;
    --color-secondary: #d946ef;
    --color-link: #a78bfa;
    --color-link-hover: #c4b5fd;
    --color-btn-primary: #FFFFFF;
    --color-btn-primary-bg: #7c3aed;
    --color-btn-primary-bg-hover: #8b5cf6;
    --color-checked: #7c3aed;
    --color-checked-hover: #8b5cf6;
}

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

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

.task-login #layout-content {
    background:
      radial-gradient(circle at 20% 20%, rgba(124,58,237,0.35), transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(217,70,239,0.25), transparent 55%),
      linear-gradient(135deg, #0b0a13 0%, #13111c 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(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,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: 60px;
    margin: 0 auto 28px;
    background: url("mmx-logo.svg") center/contain no-repeat;
}
.task-login #login-form .formtitle,
.task-login #login-form h1 {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    color: #13111c !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: #7c3aed !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !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, #7c3aed 0%, #d946ef 100%) !important;
    border: 0 !important;
    color: #FFFFFF !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(124,58,237,0.35) !important;
    transition: all .15s;
}
.task-login #login-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #e879f9 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,0.45) !important;
}
.task-login #login-form a {
    color: #7c3aed !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("mmx-logo-elastic.svg") !important;
}

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

.skin-elastic .task-mail .messagelist .selected td,
.skin-elastic .listing tr.selected td {
    background: rgba(124,58,237,0.10) !important;
}
.skin-elastic a,
.skin-elastic .btn-link {
    color: #7c3aed;
}
.skin-elastic a:hover { color: #8b5cf6; }

.skin-elastic .btn-primary,
.skin-elastic button.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    border-color: #7c3aed !important;
}
.skin-elastic .btn-primary:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    border-color: #8b5cf6 !important;
}

/* Toolbar / topbar */
.skin-elastic #layout-menu,
.skin-elastic #taskmenu {
    background: linear-gradient(180deg, #13111c 0%, #0b0a13 100%) !important;
}
.skin-elastic #taskmenu a {
    color: #c4b5fd !important;
}
.skin-elastic #taskmenu a.selected,
.skin-elastic #taskmenu a:hover {
    background: rgba(124,58,237,0.20) !important;
    color: #FFFFFF !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;
}