/* =========================================================
   Roundcube Elastic – Gestagi Edition
   CSS FINAL • Compatível com Roundcube 1.6+
========================================================= */

/* =========================
   RESET SEGURO
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* =========================
   TIPOGRAFIA GLOBAL
========================= */
body {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: #0b1120;
    background: #f8fafc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================
   LINKS
========================= */
a {
    color: #2563eb;
    text-decoration: none;
}

a:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* =========================
   LAYOUT BASE (ELASTIC)
========================= */
#layout {
    min-height: 100vh;
    background: #f8fafc;
}

/* =========================================================
   MENU LATERAL – GESTAGI (COESO E UNIFICADO)
========================================================= */

#layout-menu {
    width: 100px;
    background: linear-gradient(180deg, #020617, #0b1120);
    color: #e5e7eb;
    border-right: 1px solid #1e293b;
}
#layout>div>.header a.button {
    color: #002998;
}
/* =========================
   HEADER (LOGO)
========================= */
#layout-menu .popover-header {

    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617 !important;
    border-bottom: 1px solid #1e293b;
}

#layout-menu #logo {

    opacity: 0.95;
}

#layout-menu .button.cancel {
    display: none;
}

/* =========================
   TASK MENU (BASE)
========================= */
#taskmenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    gap: 0.75rem;
}

#taskmenu a:active {
    background: none;
}
/* =========================
   BOTÃO BASE (TODOS)
========================= */
#taskmenu a {
    width: 82px;
    height: 64px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;


    text-align: center;

    font-size: 12px;
    font-weight: 600;

    color: #cbd5f5;
    background: none;
    text-decoration: none;

    transition: background .2s ease, color .2s ease, transform .15s ease;
}

/* Texto interno */
#taskmenu .inner {
    font-size: 1em;
    line-height: 1.1;
}

/* Hover ÚNICO (para TODOS) */
#taskmenu a:hover {
    background: none !important;
    color: #1aa1ff;
}
#taskmenu .action-buttons a {
    color: #96fdfa;
    background: 0 0;
}
/* =========================
   ATIVO (SEM QUEBRAR PADRÃO)
========================= */
#taskmenu a.selected {
    background: none;
    color: #0090ff;
}
#taskmenu a.selected:hover {
    background: none;
    color: #0090ff;
}

/* =========================
   COMPOSE (DESTAQUE SUAVE)
========================= */
#taskmenu .compose {
    height: 72px;
    color: #ffffff;
    font-weight: 700;
}

#taskmenu .compose:hover {
    background: none;
    transform: translateY(-2px);
}

/* =========================
   ÁREA INFERIOR (IGUAL AO RESTO)
========================= */
#taskmenu .special-buttons {
    margin-top: auto;
    padding-top: 1rem;

    position: relative;
    align-items: center;
    gap: 0.5rem;

    background: transparent;
}

/* =========================
   LOGOUT (SEMÂNTICA, NÃO ESTILO)
========================= */
#taskmenu .logout {
    color: #fca5a5;
}

#taskmenu .logout:hover {
    background: #1e293b;
    color: #fecaca;
}

/* =========================
   LOGOUT (DESTAQUE SEM QUEBRAR)
========================= */
#taskmenu .logout {
    color: #f87171;
}

#taskmenu .logout:hover {
    background: rgba(248,113,113,.15);
    color: #f87171;
}
/* linha abaixo de cada item */
#taskmenu a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;

    height: 1px;
    background: rgba(255,255,255,.08);
}

/* remove a linha do último item do bloco */
#taskmenu a:last-child::after {
    display: none;
}

/* não mostrar divisor no item ativo */
#taskmenu a.selected::after {
    display: none;
}
/* =========================
   DARK MODE (CONTÍNUO)
========================= */
.dark-mode #layout-menu {
    background: linear-gradient(180deg, #020617, #0b1120);
}


/* =========================
   LISTA DE MENSAGENS
========================= */
#layout-list {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;

}
.listing li a,
.listing li, .listing tbody td {

    cursor: pointer;

}
.listing li a:hover{
    background: #e1f3ff;
}
/* Tabela */
.listing,
.records-table {
    border-collapse: collapse;
}

.listing tr,
.records-table tr {
    height: 36px;
}

.listing tr:hover,
.records-table tr:hover {
    background: #eef2ff;
}
/* =========================================================
   HEADER – CHECKBOX "SELECIONAR TODOS"
========================================================= */

.list-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 1rem;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    user-select: none;
}

.list-select-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    cursor: pointer;
}

.list-select-all span {
    cursor: pointer;
}

/* Dark mode */
.dark-mode .list-select-all {
    color: #cbd5f5;
}



/* =========================
   ÁREA DE LEITURA / PREVIEW
========================= */
#layout-content {
    background: #ffffff;
}

/* =========================
   CARDS / PAINÉIS
========================= */
.box,
.panel,
.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

/* =========================
   BOTÕES
========================= */
button,
.button,
.btn {

    color: #ffffff;
  
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

button:hover,
.button:hover,
.btn:hover {
    background: #1e40af;
}

.btn-secondary {
    background: #e5e7eb;
    color: #0b1120;
    border-color: #cbd5f5;
}

/* =========================
   FORMULÁRIOS
========================= */
input,
select,
textarea {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #cbd5f5;
    font-size: 14px;
    background: #ffffff;
    color: #0b1120;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* =========================
   AVATAR / FOTO
========================= */
.avatar,
.contact-photo {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    object-fit: cover;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #e5e7eb;
}

::-webkit-scrollbar-thumb {
    background: #2563eb;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e40af;
}

/* =========================
   DARK MODE
========================= */
.dark-mode body {
    background: #0b1120;
    color: #e5e7eb;
}

.dark-mode #layout {
    background: #0b1120;
}

.dark-mode #layout-menu {
    background: #020617;
    border-color: #1e293b;
}

.dark-mode #layout-list {
    background: #0f172a;
    border-color: #1e293b;
}

.dark-mode #layout-content {
    background: #020617;
}

.dark-mode .box,
.dark-mode .panel,
.dark-mode .card {
    background: #111827;
    border-color: #1f2933;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: #111827;
    border-color: #1f2933;
    color: #e5e7eb;
}

.dark-mode a {
    color: #60a5fa;
}

.dark-mode a:hover {
    color: #93c5fd;
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 768px) {

    #layout-menu {
        border-right: none;
        border-bottom: 1px solid #1e293b;
    }

    #layout-list {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}
/* =========================================================
   LISTA DE MENSAGENS – POLIMENTO VISUAL (GESTAGI)
========================================================= */
.listing.focus:not(.withselection) tbody tr.focused>td.selection+td {
    border-left: 6px solid #29b1f6 !important;
}
.listing:not(.withselection) tbody tr>td.selection+td 
 {
 
    border-bottom: 1px solid #c1d5df !important;
 
}
/* Painel da lista */
#layout-list {
    background: linear-gradient(180deg, #f9fafb, #f1f5f9);
    border-right: 1px solid #e2e8f0;
    position: relative;
}

/* Cabeçalho da lista */
#layout-list .header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* Área de conteúdo da lista */
#messagelist-content {
    padding: 2rem 1.5rem;
}

/* =========================
   ESTADO VAZIO
========================= */

/* Texto "A lista está vazia" */
#messagelist-content .empty,
#messagelist-content .listempty,
#messagelist-content .empty-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    font-size: 15px;
    font-weight: 500;
    color: #94a3b8;
    text-align: center;
}

/* Ícone sutil antes do texto (se existir) */
#messagelist-content .empty::before,
#messagelist-content .listempty::before {
    content: "✉";
    display: block;
    font-size: 28px;
    margin-bottom: 0.75rem;
    opacity: 0.35;
}
#message-header>.header {
    display: flex;

    margin-bottom: 5px;
}

#message-header {
    border-bottom: 2px solid #9ab1f3;
    padding: 10px;
}ul.treelist li>a {
     cursor: pointer;
 }
ul.treelist li>a:hover {
    color: #002998;
}
ul.treelist li.selected>a {
    font-weight: bold;
}
/* =========================
   LISTAGEM (quando houver mensagens)
========================= */

#messagelist tr {
    transition: background .15s ease;
}

#messagelist tr:hover {
    background: #eef2ff;
}

/* Mensagem não lida */
#messagelist tr.unread {
    font-weight: 600;
}

/* =========================
   SEARCH BAR
========================= */
#layout-list .searchbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* Input de busca */
#layout-list input[type="search"] {
    border-radius: 999px;
    padding-left: 2.2rem;
}

/* =========================
   DARK MODE
========================= */
.dark-mode #layout-list {
    background: linear-gradient(180deg, #0f172a, #020617);
    border-color: #1e293b;
}

.dark-mode #layout-list .header,
.dark-mode #layout-list .searchbar {
    background: #020617;
    border-color: #1e293b;
}

.dark-mode #messagelist-content .empty,
.dark-mode #messagelist-content .listempty {
    color: #94a3b8;
}
/* =========================================================
   MOBILE – GESTAGI (Roundcube Elastic)
========================================================= */

@media (max-width: 768px) {

    /* =========================
       TASKMENU – BASE
    ========================= */
    #taskmenu {
        display: flex;
        flex-direction: column;
        padding: 12px;
        gap: 4px;
    }

    /* =========================
       LINKS – PADRÃO
    ========================= */
    #taskmenu a {
        display: flex;
        align-items: center;
        gap: 14px;

        min-height: 48px; /* alvo de toque */
        padding: 12px 14px;

       border-bottom: none;

        font-weight: 500;
        line-height: 1.2;

        color: #e5e7eb;
        background: transparent;
        text-decoration: none;

        transition: background .15s ease, color .15s ease;
    }

    #taskmenu a:hover {
        background: rgba(255,255,255,.06);
    }

    /* =========================
       ITEM ATIVO (CLARO, NÃO AGRESSIVO)
    ========================= */
    #taskmenu a.selected {
        background: rgba(37,99,235,.14);
        color: #60a5fa;
        font-weight: 600;
          font-size: 1.1em !important;
    }

    /* =========================
       COMPOSE – AÇÃO PRINCIPAL
    ========================= */
    #taskmenu .compose {
        margin-bottom: 10px;
  font-size: 1.1em !important;
        font-weight: 600;
        color: #ffffff;

        background: rgba(37,99,235,.12);
    }

    #taskmenu .compose:hover {
        background: rgba(37,99,235,.18);
    }

    /* =========================
       DIVISÃO VISUAL (SEÇÕES)
    ========================= */
    #taskmenu::after {
        content: "";
        height: 1px;
        background: rgba(255,255,255,.08);
        margin: 10px 0;
    }

    /* =========================
       ÁREA INFERIOR (SISTEMA)
    ========================= */
    #taskmenu .special-buttons {
        display: flex;
        flex-direction: column;
        gap: 4px;
  font-size: 1.1em !important;
        margin-top: auto;
        padding-top: 12px;

        border-top: 1px solid rgba(255,255,255,.08);
    }

    /* =========================
       MODO ESCURO / SOBRE
    ========================= */
    #taskmenu .special-buttons a {
      font-size: 1.1em !important;
        color: #cbd5f5;
    }
.listing tbody td {
    border-bottom: none;
}

.listing:not(.withselection) tbody tr>td.selection+td {
     border-bottom: none !important; 
}
    /* =========================
       LOGOUT – AÇÃO DESTRUTIVA
    ========================= */
    #taskmenu .logout {
        margin-top: 6px;
        color: #f87171;
    }

    #taskmenu .logout:hover {
        background: rgba(248,113,113,.15);
        color: #fecaca;
    }
    /* Remove alturas fixas */
    .listing tr,
    .records-table tr {
        height: auto !important;
    }

    /* Cada linha vira bloco */
    #messagelist tr {
        display: block;
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Cada célula em coluna */
    #messagelist td {

        width: 100%;
        padding: 2px 0;

    }

    /* Remetente */
    #messagelist td.fromto,
    #messagelist td.subject {
        font-weight: 600;
        font-size: 14px;
    }

    /* Data */
    #messagelist td.date {
        font-size: 12px;
        color: #64748b;
        text-align: left;
    }
    /* Mobile: esconder texto, manter checkbox */

    .list-select-all span {
        display: none;
    }
}