/* ═══════════════════════════════════════════════════════════════
   CALENDÁRIO MKT — Estilos Principais
   AGT Displays (azul) / Infinity Montagem (verde)
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .9rem;
    background: #f4f6fb;
    color: #1e293b;
}

/* ─── NAVBAR ─── */
.app-navbar {
    padding: .6rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ─── ABAS ─── */
.tabs-bar {
    padding: 0 0;
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.nav-tabs-custom {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs-custom::-webkit-scrollbar { height: 3px; }
.nav-tabs-custom::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }

.nav-tab-link {
    display: flex;
    align-items: center;
    padding: .8rem 1.2rem;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: all .2s;
}

.nav-tab-link:hover {
    color: white;
    background: rgba(255,255,255,.08);
}

.nav-tab-link.active {
    color: white;
    border-bottom-color: white;
    background: rgba(255,255,255,.12);
    font-weight: 600;
}

.nav-tab-link.email-tab { opacity: .9; }
.nav-tab-link.email-tab.active { border-bottom-color: #fbbf24; }

.nav-separator {
    width: 1px;
    background: rgba(255,255,255,.25);
    margin: .4rem .5rem;
}

/* ─── NAVEGAÇÃO DE MÊS ─── */
.month-display {
    display: flex;
    align-items: center;
    padding: .4rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    min-width: 200px;
    justify-content: center;
}

/* ─── TABELA DE POSTS ─── */
.table-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    overflow: hidden;
}

.posts-table thead tr {
    background: #f8fafc;
    border-bottom: 2px solid var(--theme-light, #f0f9ff);
}

.posts-table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #64748b;
    padding: .9rem 1rem;
    border-bottom: none;
    white-space: nowrap;
}

.posts-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}

.posts-table tbody tr:last-child { border-bottom: none; }
.posts-table tbody tr:hover { background: var(--theme-light, #f8fafc); }

.posts-table td {
    padding: .8rem 1rem;
    vertical-align: middle;
}

/* Colunas */
.col-date      { width: 80px; }
.col-title     { min-width: 180px; max-width: 220px; }
.col-text      { min-width: 200px; }
.col-platforms { width: 110px; }
.col-media     { width: 100px; }
.col-status    { width: 110px; white-space: nowrap; }
.col-actions   { width: 80px; }

/* Célula de data */
.date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--theme-light, #eff6ff);
    border-radius: 8px;
    padding: .4rem .5rem;
    min-width: 48px;
}

.date-day {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-primary, #1a3a6e);
}

.date-month {
    font-size: .65rem;
    font-weight: 600;
    color: var(--theme-accent, #2563eb);
    letter-spacing: 1px;
}

/* Título do post */
.post-title {
    font-size: .88rem;
    line-height: 1.3;
    color: #0f172a;
}

/* Texto do post */
.post-text-preview {
    font-size: .82rem;
    color: #475569;
    line-height: 1.4;
    white-space: pre-wrap;
}

.btn-ver-mais {
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    color: var(--theme-accent, #2563eb);
    cursor: pointer;
    text-decoration: underline;
}

/* Ícones de plataformas */
.platform-icons { display: flex; flex-wrap: wrap; gap: 4px; }

.platform-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: white;
}

.platform-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.platform-icon.linkedin  { background: #0077b5; }
.platform-icon.youtube   { background: #ff0000; }
.platform-icon.blog      { background: #64748b; }

/* Thumbnail de imagem */
.media-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: border-color .2s, transform .2s;
}

.media-thumb:hover {
    border-color: var(--theme-accent, #2563eb);
    transform: scale(1.05);
}

.video-link {
    font-size: .8rem;
    color: #ff0000;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.video-link:hover { text-decoration: underline; }

/* Botões de ação */
.btn-action {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all .15s;
}

.btn-edit  { background: #eff6ff; color: #2563eb; }
.btn-edit:hover  { background: #2563eb; color: white; }

.btn-delete { background: #fef2f2; color: #ef4444; }
.btn-delete:hover { background: #ef4444; color: white; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

.empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .5;
}

/* Botão novo post */
.btn-new-post {
    border: none;
    color: white;
    font-weight: 600;
    padding: .45rem 1.1rem;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-new-post:hover { opacity: .9; transform: translateY(-1px); }

/* ─── MODAL DE POST ─── */
.btn-save {
    color: white;
    font-weight: 600;
    border: none;
    padding: .5rem 1.5rem;
    border-radius: 8px;
}

.btn-save:hover { opacity: .9; color: white; }

/* Checkboxes de plataforma */
.platform-checks .platform-check {
    cursor: pointer;
    user-select: none;
}

.platform-check input[type=checkbox] { display: none; }

.platform-check span {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    font-size: .82rem;
    font-weight: 500;
    color: #64748b;
    transition: all .15s;
}

.platform-check.instagram input:checked + span { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; border-color: transparent; }
.platform-check.linkedin  input:checked + span { background: #0077b5; color: white; border-color: transparent; }
.platform-check.youtube   input:checked + span { background: #ff0000; color: white; border-color: transparent; }
.platform-check.blog      input:checked + span { background: #475569; color: white; border-color: transparent; }

.platform-check span:hover { border-color: #94a3b8; background: #f8fafc; }

/* Área de upload */
.upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: var(--theme-accent, #2563eb);
    background: var(--theme-light, #eff6ff);
}

.upload-area.drag-over {
    border-color: var(--theme-accent, #2563eb);
    background: var(--theme-light, #eff6ff);
}

.upload-preview {
    max-height: 200px;
    max-width: 100%;
    border-radius: 8px;
    object-fit: contain;
}

/* Toast */
#appToast { min-width: 280px; border-radius: 10px; }

/* ─── RESPONSIVIDADE ─── */
@media (max-width: 768px) {
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }

    .col-text, .col-platforms { display: none; }

    .nav-tabs-custom { padding: 0 .5rem; }
    .nav-tab-link    { padding: .7rem .8rem; font-size: .75rem; }

    .posts-table thead th,
    .posts-table td { padding: .6rem .7rem; }

    .month-display { min-width: unset; font-size: .8rem; }
}

@media (max-width: 480px) {
    .col-media { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NOVOS ESTILOS — Aprovação / Sugestões
   ═══════════════════════════════════════════════════════════════ */

/* ─── BOTÃO SUGESTÕES NA NAVBAR ─── */
.btn-suggestions {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: white;
    font-weight: 500;
    transition: background .2s;
    position: relative;
}
.btn-suggestions:hover { background: rgba(255,255,255,.25); color: white; }

/* ─── COLUNA DE APROVAÇÃO ─── */
.col-approval { width: 120px; }

/* Highlight de linha conforme status de review */
.review-row-aprovado  { background: #f0fdf4 !important; }
.review-row-reprovado { background: #fffbeb !important; }
.review-row-alterado  { background: #fff7ed !important; }

.badge-aprovado  { background: #16a34a; color: white; font-size: .72rem; }
.badge-reprovado { background: #d97706; color: white; font-size: .72rem; }
.badge-alterado  { background: #ea580c; color: white; font-size: .72rem; }

/* Botões 👍 👎 na tabela */
.review-btns { flex-wrap: nowrap; }

.btn-review-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
    font-weight: 600;
}

.btn-review-action.approve {
    background: #dcfce7;
    color: #16a34a;
}
.btn-review-action.approve:hover {
    background: #16a34a;
    color: white;
    transform: scale(1.1);
}

.btn-review-action.reject {
    background: #fef3c7;
    color: #d97706;
}
.btn-review-action.reject:hover {
    background: #d97706;
    color: white;
    transform: scale(1.1);
}

/* Exibição do review já feito */
.review-display {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.btn-ver-msg {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: .72rem;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.btn-ver-msg:hover { background: #e2e8f0; color: #0f172a; }

.btn-review-change {
    background: #eff6ff;
    border: none;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: .7rem;
    color: #2563eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.btn-review-change:hover { background: #2563eb; color: white; }

/* ─── MODAL DE REVIEW — cards de escolha ─── */
.review-choice-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem .75rem;
    cursor: pointer;
    transition: all .2s;
    user-select: none;
}

.review-choice-card input[type=radio] { display: none; }

.review-choice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.approve-card:has(input:checked),
.reject-card:has(input:checked)  { /* controlado via JS */ }

.review-choice-icon { font-size: 2rem; margin-bottom: .25rem; }

.btn-review-submit {
    background: #2563eb;
    color: white;
    border: none;
    padding: .5rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
}
.btn-review-submit:hover { background: #1d4ed8; color: white; }

/* ─── PAINEL DE SUGESTÕES (chat lateral) ─── */
.suggestion-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

.suggestion-overlay.active { display: block; }

.suggestion-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: white;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.suggestion-panel.open { transform: translateX(0); }

.suggestion-header {
    padding: 1rem 1.2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.suggestion-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: #f8fafc;
}

/* Mensagens do chat */
.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.chat-msg.from-viewer { align-self: flex-start; }
.chat-msg.from-editor { align-self: flex-end; }

.chat-bubble {
    padding: .55rem .85rem;
    border-radius: 14px;
    font-size: .84rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.from-viewer .chat-bubble {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px 14px 14px 14px;
    color: #1e293b;
}

.from-editor .chat-bubble {
    background: var(--theme-accent, #2563eb);
    color: white;
    border-radius: 14px 4px 14px 14px;
}

.chat-meta {
    font-size: .68rem;
    color: #94a3b8;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.from-editor .chat-meta { justify-content: flex-end; }

.chat-role-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #64748b;
}
.from-editor .chat-role-badge { background: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }

.chat-separator {
    text-align: center;
    font-size: .7rem;
    color: #94a3b8;
    position: relative;
    margin: .25rem 0;
}
.chat-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: #e2e8f0;
}
.chat-separator span { background: #f8fafc; padding: 0 .5rem; position: relative; }

/* Área de input do chat */
.suggestion-input-area {
    padding: .9rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: white;
    flex-shrink: 0;
}

.suggestion-role-tag {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
}

.role-viewer { background: #f1f5f9; color: #475569; }
.role-editor { background: var(--theme-light, #eff6ff); color: var(--theme-accent, #2563eb); }

.btn-send-suggestion {
    border: none;
    color: white;
    width: 40px;
    height: 40px;  /* deixa a altura crescer igual ao textarea */
    min-width: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    cursor: pointer;
    transition: opacity .15s;
    flex-shrink: 0;
}
.btn-send-suggestion:hover { opacity: .85; color: white; }

/* Mensagem vazia no chat */
.chat-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}
.chat-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .4; }

/* ─── RESPONSIVIDADE ─── */
@media (max-width: 576px) {
    .suggestion-panel { width: 100%; }
    .col-approval { display: none; }
}

/* ── Botão de deletar mensagem no chat ── */
.chat-bubble-wrap {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.from-editor .chat-bubble-wrap { flex-direction: row-reverse; }

.btn-delete-msg {
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: .7rem;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
    align-self: center;
}

.chat-msg:hover .btn-delete-msg { opacity: 1; }
.btn-delete-msg:hover { color: #dc2626; }