* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f7f6; color: #333; transition: background-color 0.3s, color 0.3s; }
.hidden { display: none !important; }

/* TELAS E LOGIN */
.screen { min-height: 100vh; }
#login-screen { display: flex; justify-content: center; align-items: center; }
.login-box { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); width: 100%; max-width: 400px; text-align: center; }
.brand-logo { max-width: 200px; margin-bottom: 25px; }
.login-box h2 { margin-bottom: 20px; font-weight: 600; }
.login-box input { width: 100%; padding: 14px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; }

/* BOTÕES GERAIS */
button { width: 100%; padding: 14px; background: linear-gradient(135deg, #2904C6 0%, #8C1391 100%); color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; }
button:hover { opacity: 0.9; }
.btn-secondary { background: transparent; color: #5b0ca7; border: 2px solid #5b0ca7; margin-top: 15px; }
.btn-primary { width: auto; padding: 10px 20px; }
.btn-complete { background: #27ae60; color: #fff; border: 1px solid #27ae60;}
.btn-complete:hover { background: #219653; }
.error-msg { color: #e74c3c; margin-top: 15px; font-size: 14px; font-weight: 500; }

/* BOTAO DE HOJE */
.btn-today { width: auto; background: #e8eaf6; color: #2904C6; border: 1px solid #c5cae9; border-radius: 6px; padding: 0 15px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-today:hover { background: #d0dce3; border-color: #8C1391; }

/* BOTÕES DE AÇÃO PEQUENOS */
.btn-small { padding: 6px 12px; font-size: 13px; width: auto; margin-right: 5px; margin-top: 5px;}
.btn-danger { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; }
.btn-danger:hover { background: #fdf2f2; }
.btn-edit-task { background: transparent; color: #f39c12; border: 1px solid #f39c12; }
.btn-edit-task:hover { background: #fffaf0; }
.btn-adiar { background: transparent; color: #2904C6; border: 1px solid #2904C6; }
.btn-adiar:hover { background: #f0f4ff; }
.task-actions { display: flex; flex-wrap: wrap; margin-top: 15px; gap: 5px; }

/* CABEÇALHO DO PAINEL */
header { background: linear-gradient(135deg, #2904C6 0%, #8C1391 100%); color: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.header-logo { max-height: 40px; object-fit: contain; }
.user-info { display: flex; align-items: center; gap: 15px; }
header button { width: auto; padding: 8px 20px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); margin-left: 0; }

/* ESTRUTURA DO PAINEL */
main { padding: 30px; max-width: 1400px; margin: 0 auto; }
.dashboard { display: flex; gap: 30px; margin-top: 10px; align-items: flex-start; }

/* MENU LATERAL DE CLIENTES */
.sidebar { width: 420px; flex-shrink: 0; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.menu-item { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: #f4f7f6; color: #333; padding: 12px 15px; border-radius: 8px; margin-bottom: 10px; font-weight: bold; white-space: nowrap; }
.menu-item.active, .menu-item:hover { background: linear-gradient(135deg, rgba(41, 4, 198, 0.1) 0%, rgba(140, 19, 145, 0.1) 100%); color: #2904C6; }
#btn-historico.active { background: #e8eaf6; color: #2904C6; border-left: 4px solid #2904C6; }
#btn-clientes-arquivados.active { background: #ece4f7; color: #8C1391; border-left: 4px solid #8C1391; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.btn-icon { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 20px; }

/* CONTADORES (BADGES) */
.badge-count { font-size: 13px; font-weight: normal; opacity: 0.8; }
.badge-atrasadas { color: #e74c3c; font-weight: bold; opacity: 1; }
.badge-atrasadas-clientes { color: #e67e22; font-weight: bold; opacity: 1; }

/* LISTA DE CLIENTES */
.client-list { list-style: none; }
.client-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; border-radius: 8px; transition: all 0.2s; font-size: 15px; background: #ffffff; border: 1px solid #e0e6ed; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
.client-list li:hover { background: #f8f9fa; border-color: #8C1391; color: #8C1391; font-weight: bold; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.client-name-container { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }
.client-name { white-space: nowrap; }
.client-count { font-size: 12px; font-weight: normal; opacity: 0.7; white-space: nowrap; }
.client-actions { display: none; gap: 5px; }
.client-list li:hover .client-actions { display: flex; }
.btn-client-action { width: 28px; height: 28px; padding: 0; font-size: 13px; border-radius: 4px; border: none; background: #eee; color: #333;}
.btn-client-action:hover { background: #ddd; }

.client-list li.internal-client { background: linear-gradient(135deg, #2904C6 0%, #8C1391 100%) !important; color: white !important; border: none !important; font-weight: bold; }
.client-list li.internal-client:hover { opacity: 0.9; transform: translateY(-2px); }

.client-list li.active-client { border-color: #8C1391; color: #8C1391; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.client-list li.internal-client.active-client { box-shadow: 0 0 0 2px #8C1391; }

/* ÁREA DAS TAREFAS E CABEÇALHOS DE CATEGORIA */
.main-content { flex: 1; }
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* BARRA DE BUSCA E FILTRO DE PRIORIDADE */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filter-bar input[type="text"] { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; }
.filter-bar select { width: auto; flex: 0 0 180px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; color: #333; font-weight: normal; }
.filter-count-label { flex: 1 1 100%; font-size: 13px; color: #888; margin: -2px 0 0 2px; }

/* ALTERNAR CARTÕES / LISTA */
.view-toggle { display: flex; gap: 4px; flex: 0 0 auto; }
.view-toggle-btn { width: auto; padding: 8px 12px; background: #f4f7f6; color: #666; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; }
.view-toggle-btn:hover { opacity: 1; background: #eee; }
.view-toggle-btn.active { background: linear-gradient(135deg, #2904C6 0%, #8C1391 100%); color: #fff; border-color: transparent; }

.tasks-grid { display: grid; gap: 15px; }

/* VISUALIZAÇÃO EM LISTA: colunas fixas e alinhadas entre todas as linhas via subgrid —
   a coluna "Tarefa" (max-content) cresce até caber o nome mais longo, sem quebrar linha. */
.tasks-grid.list-view {
    grid-template-columns: 200px max-content 130px 320px;
    column-gap: 16px;
    row-gap: 4px;
}

.list-view-header,
.tasks-grid.list-view .task-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

.list-view-header { position: sticky; top: 0; z-index: 5; background: #f4f7f6; padding: 6px 16px 10px; font-size: 12px; font-weight: bold; color: #999; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #eaeaea; margin-bottom: 6px; }
.list-header-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.list-header-sortable:hover { color: #2904C6; }

.tasks-grid.list-view .task-card { align-items: center; padding: 8px 16px; border-left-width: 3px; }
.tasks-grid.list-view .task-info { display: contents; }
.tasks-grid.list-view .category-header { grid-column: 1 / -1; }
.tasks-grid.list-view .task-client-badge { grid-column: 1; margin-bottom: 0; justify-self: start; }
.tasks-grid.list-view .task-info h4 { grid-column: 2; margin: 0; font-size: 14px; white-space: nowrap; }
.tasks-grid.list-view .task-date { grid-column: 3; margin: 0; white-space: nowrap; }
.tasks-grid.list-view .task-obs,
.tasks-grid.list-view .repeat-badge { display: none; }
.tasks-grid.list-view .task-actions { grid-column: 4; margin-top: 0; gap: 4px; justify-content: flex-end; }
.tasks-grid.list-view .task-actions button { padding: 4px 8px; font-size: 11px; }

.category-header { grid-column: 1 / -1; font-size: 20px; color: #8C1391; border-bottom: 2px solid #eaeaea; padding-bottom: 8px; margin-top: 15px; margin-bottom: 5px; }

/* CARTÕES DE TAREFAS */
.task-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #bdc3c7; }
.task-card.internal-task { border-left-color: #8C1391; background-color: #fbf5fc; }
.task-card.delayed { border-left-color: #e74c3c; background-color: #fdf2f2; }
.task-card.due-today { border-left-color: #2904C6; box-shadow: 0 0 0 1px rgba(41, 4, 198, 0.15), 0 2px 8px rgba(0,0,0,0.05); }
.task-card.due-today .task-date { color: #2904C6; }

/* CLIENTES ARQUIVADOS */
.archived-client-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 5px solid #bdc3c7; }
.archived-client-card h4 { font-size: 18px; color: #2c3e50; margin-bottom: 4px; }
.task-client-badge { font-size: 12px; background: #eee; padding: 4px 10px; border-radius: 12px; color: #333; font-weight: bold; display: inline-block; margin-bottom: 5px;}
.task-card.internal-task .task-client-badge { background: #8C1391; color: #fff; }
.task-info h4 { margin: 4px 0; font-size: 18px; color: #2c3e50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.task-date { font-size: 14px; color: #666; font-weight: bold; }
.task-card.delayed .task-date { color: #e74c3c; }
.task-obs { font-size: 14px; color: #777; margin-top: 8px; background: #fafafa; padding: 10px; border-radius: 6px; }
.repeat-badge { font-size: 12px; color: #8C1391; display: inline-block; margin-top: 8px; font-weight: bold; background: #f3e5f5; padding: 4px 8px; border-radius: 4px;}

/* ETIQUETAS DE PRIORIDADE E EXECUTOR */
.priority-badge { font-size: 11px; padding: 4px 8px; border-radius: 6px; font-weight: bold; color: white; letter-spacing: 0.5px; text-transform: uppercase; }
.priority-alta { background: #e74c3c; }
.priority-media { background: #f1c40f; color: #333; }
.priority-baixa { background: #2ecc71; }

.executor-badge { font-size: 11px; padding: 4px 8px; border-radius: 6px; font-weight: bold; letter-spacing: 0.5px; }
.executor-badge-eu { background: #e8eaf6; color: #2904C6; }
.executor-badge-cliente { background: #fdebd0; color: #d35400; }

/* MODAIS */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto;}
.modal-large { max-width: 550px; }
.modal-content h3 { margin-bottom: 20px; color: #2904C6; }
.modal-content label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: bold; font-size: 14px; }
.modal-content input[type="text"], .modal-content input[type="date"], .modal-content input[type="number"], .modal-content select, .modal-content textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.checkbox-group { display: flex; align-items: center; gap: 10px; }
.checkbox-group input { width: auto; transform: scale(1.2); cursor: pointer;}
.modal-actions { display: flex; gap: 15px; margin-top: 25px; }

/* =========================================
   MODO ESCURO (DARK MODE)
   ========================================= */
body.dark-mode { background-color: #121212; color: #e0e0e0; }
body.dark-mode .login-box, body.dark-mode .sidebar, body.dark-mode .task-card, body.dark-mode .archived-client-card, body.dark-mode .modal-content { background: #1e1e1e; color: #e0e0e0; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid #333;}
body.dark-mode .menu-item { background: #2c2c2c; color: #e0e0e0; }
body.dark-mode .menu-item:hover, body.dark-mode .menu-item.active { background: rgba(140, 19, 145, 0.2); color: #bb86fc; }
body.dark-mode #btn-historico { background: #252525 !important; }
body.dark-mode #btn-clientes-arquivados { background: #252525 !important; }
body.dark-mode #btn-clientes-arquivados.active { background: rgba(140, 19, 145, 0.2) !important; color: #bb86fc; border-left-color: #bb86fc; }
body.dark-mode .archived-client-card h4 { color: #fff; }
body.dark-mode .sidebar-header { border-bottom-color: #333; }
body.dark-mode .client-list li { background: #2c2c2c; border-color: #444; color: #e0e0e0; }
body.dark-mode .client-list li:hover { background: #383838; border-color: #bb86fc; color: #bb86fc; }
body.dark-mode .btn-client-action { background: #444; color: #eee; }
body.dark-mode .btn-client-action:hover { background: #555; }
body.dark-mode .task-info h4 { color: #fff; }
body.dark-mode .task-obs { background: #2a2a2a; color: #aaa; }
body.dark-mode .task-date { color: #aaa; }
body.dark-mode .task-client-badge { background: #333; color: #ddd; }
body.dark-mode .task-card.internal-task { background-color: #2a1b38; border-left-color: #bb86fc; }
body.dark-mode .task-card.delayed { background-color: #3a1c1c; border-left-color: #ff5252; }
body.dark-mode .task-card.due-today { border-left-color: #7c8dff; box-shadow: 0 0 0 1px rgba(124, 141, 255, 0.25), 0 4px 15px rgba(0,0,0,0.3); }
body.dark-mode .task-card.due-today .task-date { color: #7c8dff; }
body.dark-mode .btn-adiar { color: #8c9eff; border-color: #8c9eff; }
body.dark-mode .btn-adiar:hover { background: rgba(140, 158, 255, 0.1); }
body.dark-mode .client-list li.active-client { border-color: #bb86fc; color: #bb86fc; }
body.dark-mode .btn-secondary { color: #bb86fc; border-color: #bb86fc; }
body.dark-mode .btn-secondary:hover { background: rgba(187, 134, 252, 0.1); }
body.dark-mode .btn-edit-task { color: #f1c40f; border-color: #f1c40f; }
body.dark-mode .btn-edit-task:hover { background: rgba(241, 196, 15, 0.1); }
body.dark-mode .badge-atrasadas { color: #ff5252; }
body.dark-mode .badge-atrasadas-clientes { color: #e67e22; }
body.dark-mode .btn-today { background: #333; color: #bb86fc; border-color: #555; }
body.dark-mode .btn-today:hover { background: #444; border-color: #bb86fc; }
body.dark-mode .view-toggle-btn { background: #2c2c2c; color: #ccc; border-color: #444; }
body.dark-mode .view-toggle-btn:hover { background: #383838; }
body.dark-mode .view-toggle-btn.active { background: rgba(140, 19, 145, 0.4); color: #fff; }
body.dark-mode .category-header { color: #bb86fc; border-bottom-color: #444; }
body.dark-mode .list-view-header { color: #888; border-bottom-color: #444; background: #121212; }
body.dark-mode .list-header-sortable:hover { color: #bb86fc; }
body.dark-mode .filter-count-label { color: #aaa; }

/* Ajuste de Cores do Executor no Escuro */
body.dark-mode .executor-badge-eu { background: #1a237e; color: #8c9eff; }
body.dark-mode .executor-badge-cliente { background: #3e2723; color: #e67e22; }

body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea { background-color: #ffffff !important; color: #000000 !important; border-color: #888 !important; }
body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder { color: #666 !important; }
body.dark-mode #company-category-container { background: #2a2a2a !important; border-color: #555 !important; }
body.dark-mode #company-category-container label { color: #bb86fc !important; }

@media (max-width: 768px) {
    .dashboard { flex-direction: column; }
    .sidebar { width: 100%; }
    .task-card { flex-direction: column; align-items: flex-start; }
    .task-actions { width: 100%; justify-content: flex-start; }
    .filter-bar { flex-direction: column; }
    .filter-bar select { flex: 1; }
    .filter-count-label { flex: 0 0 auto; }

    /* Colunas fixas não cabem em tela estreita — a lista cai pra um empilhado simples */
    .list-view-header { display: none; }
    .tasks-grid.list-view { grid-template-columns: 1fr; }
    .tasks-grid.list-view .task-card { grid-template-columns: 1fr; row-gap: 4px; }
    .tasks-grid.list-view .task-client-badge,
    .tasks-grid.list-view .task-info h4,
    .tasks-grid.list-view .task-date,
    .tasks-grid.list-view .task-actions { grid-column: 1; justify-self: start; }
    .tasks-grid.list-view .task-actions { justify-content: flex-start; }
}