/**
 * Dra. Louise Chateaubriand - Webmail
 * Réplica pixel-a-pixel do admin login (admin.css)
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --nude-100: #F8F6F3;
    --nude-200: #EEEBE6;
    --nude-300: #DBD2C8;
    --nude-400: #C4B8AB;
    --nude-500: #8E7468;
    --nude-600: #553234;
    --nude-700: #462829;
    --dark-200: #3D322E;
    --dark-300: #2C2420;
    --dark-400: #1E1814;
    --white: #FFFFFF;
    --success: #059669;
    --danger: #dc2626;
}

/* ═══════════════════════════════════════════
   LOGIN PAGE - Igual ao admin.php
   ═══════════════════════════════════════════ */

body.task-login {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    background: var(--nude-100);
    color: var(--dark-200);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

body.task-login #logo,
body.task-login .voice { display: none !important; }

body.task-login #layout {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
}

/* Fundo dark gradient + radial animado — idêntico .login-page */
body.task-login #layout-content {
    background: linear-gradient(145deg, var(--dark-400) 0%, var(--dark-300) 50%, #3A2E28 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 1.5rem !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}

body.task-login #layout-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(85, 50, 52, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(85, 50, 52, 0.04) 0%, transparent 40%);
    animation: loginBgMove 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes loginBgMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-3%, -2%); }
}

/* Card — idêntico .login-box */
body.task-login .login-card {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--nude-300);
    margin: 0 auto;
}

/* Logomarca — idêntico .login-logo-img */
body.task-login .login-header {
    text-align: center;
    margin-bottom: 0;
}
body.task-login #login-logo {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto 1.5rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
}
body.task-login .login-title { display: none !important; }
body.task-login .login-subtitle { display: none !important; }

/* Divider — idêntico .login-divider */
body.task-login .login-divider {
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--nude-300), transparent) !important;
    border-radius: 0 !important;
    margin: 0 0 1.5rem !important;
    border: 0 !important;
}

/* Form reset */
body.task-login #login-form {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    position: static !important;
    top: auto !important;
}

/* Table → flex (estilo admin: campos empilhados) */
body.task-login #login-form > table {
    width: 100% !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}
body.task-login #login-form > table,
body.task-login #login-form > table > tbody,
body.task-login #login-form > table > tbody > tr,
body.task-login #login-form > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
}
body.task-login #login-form > table > tbody > tr {
    position: relative !important;
    margin-bottom: 1rem !important;
}
body.task-login #login-form > table > tbody > tr > td { padding: 0 !important; }

/* Labels ocultos (admin usa só placeholder) */
body.task-login #login-form > table > tbody > tr > td.title { display: none !important; }

/* Ícones dentro dos inputs — replica .login-field i.field-icon */
body.task-login #login-form > table > tbody > tr:nth-child(1) > td:last-child::before,
body.task-login #login-form > table > tbody > tr:nth-child(2) > td:last-child::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    opacity: 0.85;
}
/* Envelope (user) */
body.task-login #login-form > table > tbody > tr:nth-child(1) > td:last-child::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%238E7468' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/></svg>");
}
/* Key (password) */
body.task-login #login-form > table > tbody > tr:nth-child(2) > td:last-child::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%238E7468' d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z'/></svg>");
}

/* Input group — flat, sem borda extra do Roundcube */
body.task-login #login-form .input-group {
    display: block !important;
    border: none !important;
    background: none !important;
    overflow: visible !important;
    position: relative !important;
}
body.task-login #login-form .input-group .icon,
body.task-login #login-form .input-group .input-group-prepend,
body.task-login #login-form .input-group-text { display: none !important; }

/* Inputs — idêntico .login-box input */
body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
    width: 100% !important;
    padding: 0.85rem 1rem 0.85rem 2.5rem !important;
    border: 1.5px solid var(--nude-300) !important;
    border-radius: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark-200) !important;
    background: var(--nude-100) !important;
    transition: all 0.2s !important;
    outline: none !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}
body.task-login #login-form input:focus {
    border-color: var(--nude-500) !important;
    background: var(--white) !important;
    box-shadow: 0 0 0 3px rgba(85, 50, 52, 0.15) !important;
}
body.task-login #login-form input::placeholder {
    color: var(--nude-600) !important;
    opacity: 1 !important;
}

/* Botão — idêntico .login-btn */
body.task-login #login-form .formbuttons {
    margin: 0 !important;
    padding: 0 !important;
}
body.task-login #login-form .formbuttons .submit,
body.task-login #login-form button.mainaction,
body.task-login #rcmloginsubmit {
    width: 100% !important;
    padding: 0.9rem !important;
    background: linear-gradient(135deg, var(--nude-500), var(--nude-600)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(85, 50, 52, 0.3) !important;
    margin-top: 0.5rem !important;
    letter-spacing: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}
body.task-login #login-form button.mainaction::before,
body.task-login #rcmloginsubmit::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-67.9L32 314.1c-17.7 0-32-14.3-32-32l0-52.3c0-17.7 14.3-32 32-32l128 0 0-67.9c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
body.task-login #rcmloginsubmit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(85, 50, 52, 0.4) !important;
}

/* Forgot password — idêntico .login-forgot */
body.task-login .login-forgot {
    text-align: center;
    margin-top: 0.75rem !important;
}
body.task-login .login-forgot a {
    font-size: 0.8rem !important;
    color: var(--nude-600) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s !important;
}
body.task-login .login-forgot a:hover {
    color: var(--nude-500) !important;
    text-decoration: underline !important;
}

/* Register — oculto por JSON */
body.task-login .login-register { display: none !important; }

/* Features grid — idêntico .login-features */
body.task-login .login-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-top: 1.25rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--nude-200) !important;
}
body.task-login .login-feature {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    color: var(--nude-600) !important;
    font-weight: 500 !important;
}
body.task-login .login-feature i {
    color: var(--nude-500) !important;
    font-size: 0.7rem !important;
    width: 16px !important;
    text-align: center !important;
}

/* Back link — idêntico .login-footer */
body.task-login .login-back {
    text-align: center;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--nude-200) !important;
}
body.task-login .login-back a {
    font-size: 0.75rem !important;
    color: var(--nude-600) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}
body.task-login .login-back a:hover {
    color: var(--nude-700) !important;
}

/* Mensagens de erro do Roundcube */
body.task-login #messagestack {
    margin: 0 0 1rem !important;
    position: static !important;
}
body.task-login #messagestack .alert,
body.task-login #messagestack .error,
body.task-login #messagestack .warning {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: var(--danger) !important;
    padding: 0.65rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

body.task-login .noscriptwarning {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 12px auto;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--danger);
}

/* Footer Roundcube default */
body.task-login #login-footer:empty { display: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE MOBILE - LOGIN
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    body.task-login #layout-content { padding: 1.25rem !important; }
    body.task-login .login-card {
        padding: 2.5rem 2rem !important;
        border-radius: 18px !important;
    }
    body.task-login #login-logo { max-width: 320px !important; margin-bottom: 1.4rem !important; }
}

@media (max-width: 600px) {
    body.task-login #layout-content { padding: 1rem !important; }
    body.task-login .login-card {
        padding: 2rem 1.5rem !important;
        border-radius: 16px !important;
    }
    body.task-login #login-logo { max-width: 280px !important; margin-bottom: 1.25rem !important; }
    body.task-login .login-features { gap: 0.4rem !important; }
    body.task-login .login-feature { font-size: 0.68rem !important; }
    body.task-login #login-form input {
        font-size: 16px !important; /* evita zoom iOS */
        padding: 0.9rem 1rem 0.9rem 2.5rem !important;
    }
    body.task-login #login-form .formbuttons .submit,
    body.task-login #rcmloginsubmit {
        padding: 1rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
}

@media (max-width: 380px) {
    body.task-login .login-card { padding: 1.5rem 1.25rem !important; }
    body.task-login #login-logo { max-width: 240px !important; }
    body.task-login .login-features { grid-template-columns: 1fr !important; }
}

/* Altura pequena (landscape em celular) */
@media (max-height: 600px) and (orientation: landscape) {
    body.task-login #layout-content { padding: 1rem !important; align-items: flex-start !important; }
    body.task-login .login-card { padding: 1.5rem 1.5rem !important; margin: 1rem auto !important; }
    body.task-login #login-logo { max-width: 220px !important; margin-bottom: 0.75rem !important; }
    body.task-login .login-divider { margin-bottom: 1rem !important; }
    body.task-login .login-features { margin-top: 0.75rem !important; padding-top: 0.75rem !important; }
    body.task-login .login-back { margin-top: 1rem !important; padding-top: 1rem !important; }
}

/* ═══════════════════════════════════════════
   APP (pós-login) - Toolbar & UI
   ═══════════════════════════════════════════ */

body:not(.task-login) {
    font-family: 'DM Sans', -apple-system, sans-serif;
}

#layout > .header,
#layout > div > .header {
    background: linear-gradient(135deg, var(--nude-600) 0%, var(--nude-500) 100%) !important;
}

.menu a.button,
#layout > .header a.button,
#layout > div > .header a.button,
.header .header-title,
.header a.button::before,
#layout .header span.inner {
    color: var(--nude-100) !important;
}

.menu a.button:hover,
#layout > .header a.button:hover,
#layout > div > .header a.button:hover {
    background: rgba(248, 246, 243, 0.15) !important;
}

.searchbar input { border-color: rgba(248, 246, 243, 0.3) !important; }

.menu a.button.selected,
.menu a.button.active,
.menu a.button:focus,
#layout .header a.button.selected {
    background: rgba(142, 116, 104, 0.6) !important;
    color: var(--nude-100) !important;
}

#mailboxlist li a:hover,
#mailboxlist li.selected > a,
.listing li a:hover {
    background: rgba(85, 50, 52, 0.08) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > a::before {
    color: var(--nude-600) !important;
    font-weight: 600;
}

a, .listing a.active { color: var(--nude-600); }
a:hover { color: var(--nude-500); }

.btn-primary,
a.btn-primary,
.formbuttons .btn-primary,
button.mainaction {
    background: linear-gradient(135deg, var(--nude-500), var(--nude-600)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(85, 50, 52, 0.25) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.mainaction:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

#taskmenu a::before { color: var(--nude-100) !important; }
#taskmenu a:hover { background: rgba(248, 246, 243, 0.15) !important; }
#taskmenu a.selected,
#taskmenu a.button.selected { background: rgba(142, 116, 104, 0.5) !important; }

#compose-toolbar {
    background: linear-gradient(135deg, var(--nude-600) 0%, var(--nude-500) 100%) !important;
}
#compose-toolbar a.button { color: var(--nude-100) !important; }

input[type="checkbox"]:checked { accent-color: var(--nude-600); }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--nude-200); }
::-webkit-scrollbar-thumb { background: var(--nude-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nude-600); }
::selection { background: var(--nude-500); color: var(--nude-100); }

/* Responsivo app pós-login */
@media (max-width: 1024px) {
    body:not(.task-login) .messagelist td.subject { font-size: 0.9rem; }
}

@media (max-width: 768px) {
    body:not(.task-login) { font-size: 14px; }
    #layout { min-height: 100vh; min-height: 100dvh; }
    #layout > .header,
    #layout > div > .header {
        padding: 0 0.5rem !important;
        padding-top: env(safe-area-inset-top) !important;
    }
    button.btn, a.button, .btn { min-height: 44px; }
    .menu a.button { padding: 0 0.65rem !important; }
    #taskmenu a.button { min-width: 44px; }
    #mailboxlist { font-size: 0.88rem; }
    .messagelist td.subject a { font-size: 0.9rem; }
    #mailview-right, #messageframe { width: 100% !important; }
}

@media (max-width: 600px) {
    .searchbar input { font-size: 16px; }
    .messagelist td.flags,
    .messagelist td.attachment { display: none; }
    .messagelist td.subject { padding: 0.75rem 0.5rem !important; }

    /* Sidebar drawer overlay */
    #mailboxlist, .sidebar, #layout-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -110% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1000 !important;
        background: var(--nude-100) !important;
        box-shadow: 4px 0 30px rgba(0,0,0,0.25) !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }
    #mailboxlist.show, .sidebar.show, #layout-sidebar.show { left: 0 !important; }

    /* Compose fullscreen */
    #compose-content, .compose-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
    }
    #compose-subject input,
    #compose-contacts input,
    .compose-headers input { font-size: 16px !important; }

    .menu a.button .inner,
    #taskmenu a.button .inner { display: none !important; }
    .menu a.button,
    #taskmenu a.button {
        padding: 0 0.5rem !important;
        min-width: 44px !important;
    }
    .header .header-title { font-size: 0.95rem !important; }
}

@media (max-width: 480px) {
    #layout-sidebar { width: 100% !important; max-width: 100% !important; }
    .messagelist td.date { font-size: 0.72rem !important; }
    .messagelist .from,
    .messagelist .to { font-size: 0.82rem !important; }
}

@supports (padding: max(0px)) {
    #layout > .header,
    #layout > div > .header {
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
    }
}

@supports (padding: max(0px)) {
    body {
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
    }
}

/* Print */
@media print {
    body { background: white !important; color: black !important; }
    .header, .sidebar, #taskmenu, #compose-toolbar, .searchbar, .menu { display: none !important; }
    .message-htmlpart, .message-part { font-family: Georgia, 'Cormorant Garamond', serif; font-size: 12pt; line-height: 1.55; }
    @page { margin: 1.4cm; }
}