/* ============================================================
   P3 Branding — Layout Gmail-like sobre o RoundCube Elastic
   Mantém compatibilidade com o JS do Elastic (mesmas IDs)
   ============================================================ */

:root {
    --color-main: #0F3D91;
    --color-main-shadow: rgba(15, 61, 145, 0.2);
    --color-main-hover: #1A4FA8;
    --color-secondary: #00C2A8;
    --color-link: #0F3D91;
    --color-link-hover: #1A4FA8;
    --color-btn-primary: #FFFFFF;
    --color-btn-primary-bg: #0F3D91;
    --color-btn-primary-bg-hover: #1A4FA8;
    --color-checked: #0F3D91;
    --color-checked-hover: #1A4FA8;
}

/* ============================================================
   TELA DE LOGIN (mantida do passo anterior)
   ============================================================ */

.task-login #layout-content {
    background: linear-gradient(135deg, #0F3D91 0%, #0A2C6F 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 50px -12px rgba(0,0,0,0.35) !important;
    padding: 40px 36px !important;
    max-width: 420px !important;
    width: 92% !important;
}
.task-login form#login-form::before {
    content: "";
    display: block;
    width: 200px; height: 56px;
    margin: 0 auto 28px;
    background: url("logo.svg") center/contain no-repeat;
}
.task-login #login-form input[type="text"],
.task-login #login-form input[type="password"],
.task-login #login-form .form-control {
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
}
.task-login #login-form input:focus {
    border-color: #0F3D91 !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(15,61,145,0.12) !important;
}
.task-login #login-form button[type="submit"],
.task-login #login-form .btn-primary,
.task-login #login-form input[type="submit"] {
    background: linear-gradient(180deg, #0F3D91, #0A2C6F) !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 12px rgba(15,61,145,0.25) !important;
    transition: all .15s;
}
.task-login #login-form button[type="submit"]:hover {
    background: linear-gradient(180deg, #1A4FA8, #0F3D91) !important;
    transform: translateY(-1px);
}
.task-login #login-form a {
    color: #0F3D91 !important;
    font-weight: 600;
}

/* ============================================================
   WEBMAIL — LAYOUT GMAIL-LIKE
   ============================================================ */

/* Tipografia geral */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ----- Sidebar de tarefas (vertical, ícone+label) ----- */
#layout-menu,
.skin-elastic #layout-menu {
    background: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
    width: 80px !important;
    min-width: 80px !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Logo P3 no topo da sidebar lateral (header fixo) */
#layout-menu::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 14px 0 14px 0;
    background: url("favicon.svg") center/contain no-repeat;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Esconder o popover-header (botão Fechar) que só faz sentido em mobile */
#layout-menu .popover-header {
    display: none !important;
}

/* Container dos botões de tarefa */
#layout-menu #taskmenu,
#layout-menu .toolbar {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: stretch !important;
}

/* Cada botão de tarefa = ícone empilhado em cima do label */
#layout-menu .button,
#layout-menu a,
#layout-menu a.button {
    color: #6B7280 !important;
    background: transparent !important;
    border-radius: 12px !important;
    margin: 2px 0 !important;
    padding: 10px 4px 8px !important;
    width: 68px !important;
    height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all .15s !important;
    font-size: 0 !important;  /* zera espaço entre ícone e label */
    text-align: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    border: 0 !important;
}
#layout-menu .button:hover,
#layout-menu a:hover,
#layout-menu a.button:hover {
    color: #0F3D91 !important;
    background: #E8EFFF !important;
}
#layout-menu .button.selected,
#layout-menu a.selected,
#layout-menu a.button.selected {
    color: #0F3D91 !important;
    background: #E8EFFF !important;
    font-weight: 600 !important;
}

/* O ícone (font-icon do Elastic) */
#layout-menu .button::before,
#layout-menu a::before,
#layout-menu a.button::before {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Label do botão (texto "E-mail", "Contatos", etc.) */
#layout-menu .button .inner,
#layout-menu a .inner,
#layout-menu a > span:not(.icon):not(.unreadcount),
#layout-menu .button > span:not(.icon):not(.unreadcount) {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: inherit !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* ----- Sidebar de pastas ----- */
#layout-sidebar {
    background: #F8FAFC !important;
    border-right: 1px solid #E2E8F0 !important;
    width: 260px !important;
}
#layout-sidebar .header {
    background: transparent !important;
    border-bottom: 1px solid #E2E8F0 !important;
    height: 64px !important;
    padding: 0 20px !important;
    display: flex;
    align-items: center;
}
#layout-sidebar .header .username,
#layout-sidebar .header .header-title {
    color: #0B1F44 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
/* Botão Compor (destacado) */
#layout-sidebar .toolbar a.button.create,
.toolbar a.button.compose,
a.button.create-message,
button[data-task="mail"][data-command*="compose"] {
    background: linear-gradient(180deg, #0F3D91, #0A2C6F) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 24px !important;
    padding: 12px 24px !important;
    margin: 16px 20px !important;
    box-shadow: 0 4px 12px rgba(15,61,145,0.25) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#layout-sidebar .toolbar a.button.create:hover {
    background: linear-gradient(180deg, #1A4FA8, #0F3D91) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(15,61,145,0.35) !important;
}

/* Lista de pastas */
#mailboxlist {
    padding: 8px 8px !important;
}
#mailboxlist li {
    margin: 2px 0 !important;
}
#mailboxlist li > a,
.treelist li > a {
    border-radius: 0 24px 24px 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
    transition: all .15s !important;
    margin-right: 8px !important;
}
#mailboxlist li > a:hover,
.treelist li > a:hover {
    background: #E8EFFF !important;
    color: #0F3D91 !important;
}
#mailboxlist li.selected > a,
.treelist li.selected > a {
    background: #C7D5F5 !important;
    color: #0A2C6F !important;
    font-weight: 700 !important;
}
#mailboxlist li .unreadcount,
.treelist li .unreadcount {
    background: transparent !important;
    color: #0F3D91 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 0 !important;
}

/* ----- Header da lista de email (área central) ----- */
#layout-list .header,
#mainscreencontent .header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    height: 64px !important;
    padding: 0 20px !important;
}

/* Search bar estilo Gmail (pill) */
#layout-list .header #quicksearchbar,
#quicksearchbar,
.quicksearchbar,
form.quicksearch {
    background: #F1F5F9 !important;
    border-radius: 28px !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    transition: all .15s;
    max-width: 720px;
    width: 100%;
    height: 44px;
    display: flex !important;
    align-items: center !important;
}
#quicksearchbar:focus-within {
    background: #FFFFFF !important;
    border-color: #0F3D91 !important;
    box-shadow: 0 0 0 4px rgba(15,61,145,0.08) !important;
}
#quicksearchbar input,
#quicksearchbar input.searchfield,
input.quicksearch {
    border: 0 !important;
    background: transparent !important;
    height: 100% !important;
    font-size: 14.5px !important;
    color: #1F2937 !important;
    box-shadow: none !important;
    padding: 0 8px !important;
}
#quicksearchbar input::placeholder {
    color: #94A3B8 !important;
}

/* Toolbar superior — botões mais elegantes */
.toolbar a.button:not(.create),
.toolbar button.btn {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
    color: #6B7280 !important;
    transition: all .15s !important;
}
.toolbar a.button:not(.create):hover,
.toolbar button.btn:hover {
    background: #F1F5F9 !important;
    color: #0F3D91 !important;
}

/* ============================================================
   LISTA DE MENSAGENS — Gmail-like linha única
   Estrutura HTML do Elastic:
     tr
     ├── td.selection (checkbox, 0px)
     ├── td.subject
     │   ├── span.p3-avatar      <- injetado por p3.js
     │   ├── span.fromto         <- "Guilherme"
     │   ├── span.date           <- "Hoje 11:01"
     │   ├── span.size           <- "5 KB" (vamos esconder)
     │   └── span.subject        <- "Re: Convite: ..."
     └── td.flags (35px)
   ============================================================ */

.messagelist {
    background: #FFFFFF !important;
}
.messagelist thead { display: none !important; }

/* Matar list-style + marker herdado e qualquer pseudo-element decorativo
   que o Elastic injeta (bullet "•", indicador de unread, etc.) */
.messagelist,
.messagelist tbody,
.messagelist tbody tr,
.messagelist tbody td,
.messagelist tbody td.subject,
.messagelist tbody td.subject > *,
.messagelist *,
.messagelist *::marker {
    list-style: none !important;
    list-style-type: none !important;
}
.messagelist *::marker {
    content: "" !important;
    display: none !important;
    color: transparent !important;
}
/* Esconder pseudo-elements injetados pelo Elastic na lista (bullet etc.)
   Usar seletor universal (*) pra pegar todos descendentes */
.messagelist td.subject::before,
.messagelist td.subject::after,
.messagelist td.subject *::before,
.messagelist td.subject *::after,
.messagelist tbody tr::before,
.messagelist tbody tr::after {
    content: none !important;
    display: none !important;
}

/* Linhas compactas */
.messagelist tbody tr {
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    transition: all .12s !important;
    cursor: pointer;
    height: auto !important;
}
.messagelist tbody tr.message {
    /* Forçar altura mais densa */
    line-height: 1 !important;
}
.messagelist tbody tr:hover {
    background: #F8FAFC !important;
    box-shadow: inset 4px 0 0 #0F3D91, 0 1px 3px rgba(15,61,145,0.08) !important;
    z-index: 2;
}
.messagelist tbody tr.selected {
    background: #E8EFFF !important;
    box-shadow: inset 4px 0 0 #0F3D91 !important;
}
.messagelist tbody tr.unread {
    background: #FFFFFF !important;
}

/* Esconder coluna .flags (a estrela vai pro fim do td.subject via CSS) */
.messagelist tbody td.flags,
.messagelist tbody td.selection {
    display: none !important;
}

/* td.subject = container, layout 2 linhas compacto (Gmail-mobile style) */
.messagelist tbody td.subject {
    padding: 6px 14px 6px 16px !important;
    font-size: 13.5px !important;
    border: 0 !important;
    vertical-align: middle !important;
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "avatar from   date"
        "avatar subj   subj" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    width: 100% !important;
    overflow: hidden;
}

/* Avatar — 2 linhas verticais, menor */
.messagelist tbody tr .p3-avatar {
    grid-area: avatar;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Sender — linha 1 esquerda (compacto) */
.messagelist tbody td.subject > .fromto {
    grid-area: from;
    font-size: 13.5px !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    align-self: end;
}
.messagelist tbody tr.unread td.subject > .fromto {
    color: #0B1F44 !important;
    font-weight: 700 !important;
}

/* Subject — linha 2 (compacto) */
.messagelist tbody td.subject > .subject {
    grid-area: subj;
    font-size: 12.5px !important;
    color: #6B7280 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    align-self: start;
}
.messagelist tbody tr.unread td.subject > .subject {
    color: #0B1F44 !important;
    font-weight: 600 !important;
}

/* Date — linha 1 direita (mais discreta) */
.messagelist tbody td.subject > .date {
    grid-area: date;
    font-size: 11px !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right;
    flex-shrink: 0;
    align-self: end;
    line-height: 1.25 !important;
}
.messagelist tbody tr.unread td.subject > .date {
    color: #0F3D91 !important;
    font-weight: 700 !important;
}

/* Esconder o tamanho do email (poluição visual) */
.messagelist tbody td.subject > .size {
    display: none !important;
}

/* Esconder outros spans que o Elastic injeta (status icon antes do subject) */
.messagelist tbody td.subject > .status,
.messagelist tbody td.subject > .threads {
    display: none !important;
}

/* Indicador "unread" — barrinha azul à esquerda do avatar */
.messagelist tbody tr.unread td.subject {
    position: relative;
}
.messagelist tbody tr.unread td.subject::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0F3D91;
    box-shadow: 0 0 0 3px rgba(15,61,145,0.2);
}

/* Linha de hover — ícones de ação aparecem (lado direito) */
.messagelist tbody tr.contextRow .p3-actions,
.messagelist tbody tr:hover .p3-actions {
    opacity: 1;
}
.p3-actions {
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .12s;
    margin-left: 8px;
}

/* Layout responsivo já é 2 linhas — mantém em qualquer largura */

/* ----- Área de preview ----- */
#mainscreencontent #layout-content {
    background: #FFFFFF !important;
}
#mainscreencontent #layout-content > .header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    height: 64px !important;
}

/* Conteúdo do email com mais aire */
#messagebody,
.messageview {
    padding: 24px 32px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}
#messagebody h1, #messagebody h2 {
    color: #0B1F44 !important;
}

/* Botões primários no app */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.formbuttons button.mainaction,
button.mainaction {
    background: linear-gradient(180deg, #0F3D91, #0A2C6F) !important;
    border-color: #0F3D91 !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(15,61,145,0.15) !important;
}
.btn-primary:hover,
button.btn-primary:hover {
    background: linear-gradient(180deg, #1A4FA8, #0F3D91) !important;
}

/* Links */
a:not(.btn):not(.button) {
    color: #0F3D91;
}
a:not(.btn):not(.button):hover {
    color: #1A4FA8;
}

/* Toolbar buttons em estado hover/pressed */
.toolbar a.button.pressed {
    background: #E8EFFF !important;
    color: #0F3D91 !important;
}

/* Badges */
.unreadcount,
.badge.unread {
    background: #0F3D91 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Tabs / abas (configurações etc) */
.tabbed .tab.selected,
ul.tabbed li.selected {
    border-bottom-color: #0F3D91 !important;
    color: #0F3D91 !important;
}

/* Painel de pastas — header dos folders */
#mailboxlist-header,
#layout-sidebar .header h2,
#layout-sidebar .header h3 {
    color: #6B7280 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    font-weight: 700 !important;
}

/* Mobile: layout responsivo já cuidado pelo Elastic */
@media (max-width: 768px) {
    #layout-menu {
        width: 100% !important;
        flex-direction: row !important;
    }
    #layout-menu::before { display: none; }
}