/* ==========================================================================
   1. VARIÁVEIS DO TEMA (PAINEL DE CONTROLE DE DESIGN)
   ========================================================================== */
:root {
    --color-primary: #0d6efd;
    --color-primary-dark: #0b5ed7;
    --color-success: #198754;
    --color-success-dark: #157347;
    --color-danger: #dc3545;
    --color-danger-dark: #bb2d3b;
    --color-warning: #ffc107;
    --color-secondary: #6c757d;
    --color-secondary-dark: #5a6268;
    
    --color-text: #212529; /* Geral */
    --color-text-light: #6c757d; /* Texto secundário, labels, texto mais suave */
    --color-text-secondary: #555; /* Novo: para um tom intermediário */
    --color-text-muted: #6c757d; /* Consistência com uso anterior */
    --color-text-dark: #333; /* Títulos, texto principal em cards */
    --color-text-white: #fff;

    --color-bg: #f8f9fa; /* Fundo do body */
    --color-bg-card: #fff; /* Fundo de cards e elementos principais */
    --color-bg-muted: #f1f3f5; /* Fundo de componentes leves (alternating rows, form background) */
    --color-bg-light: #fafafa; /* Novo: Para fundos muito leves, como feed de atividades */
    --color-bg-header: #f8f8f8; /* Novo: Para headers de cards ou abas */
    --color-bg-hover: #e9ecef; /* Novo: Para estados de hover em listas/elementos */

    --color-border: #dee2e6; /* Bordas gerais */
    --color-border-light: #e0e0e0; /* Nova: Bordas mais leves */
    --color-border-focus: #86b7fe;
    
    /* Nova variável para cor de edição/informação */
    --color-info: #17a2b8; /* Um tone de azul ciano para informações/edição */
    --color-info-dark: #138496; /* Versão mais escura para hover */

    /* Garante o branco para o texto/ícone em botões coloridos */
    --color-text-white: #ffffff;

    --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --spacing-unit: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-md: 1rem; /* 16px */
    --spacing-sm: 0.75rem; /* 12px - Para padding e gaps menores */
    --spacing-xs: 0.5rem; /* 8px - Para espaçamentos muito pequenos */

    --border-radius: 0.375rem; /* 6px */
    --border-radius-small: 0.25rem; /* 4px */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --transition-fast: 0.2s ease-in-out;

    /* NOVAS VARIÁVEIS PARA TOOLTIP */
    --tooltip-bg: #333;
    --tooltip-text: #fff;
}

/* ==========================================================================
   Modo Escuro (DARK MODE)
   ========================================================================== */
body.dark-mode {
    --color-primary: #66b3ff; /* Azul mais claro */
    --color-primary-dark: #8cc6ff;
    --color-success: #28a745; /* Manter verde ou ajustar ligeiramente */
    --color-success-dark: #218838;
    --color-danger: #ff6b6b; /* Vermelho mais suave */
    --color-danger-dark: #ff4747;
    --color-warning: #ffd700; /* Amarelo ajustado para contraste */
    --color-secondary: #495057;
    --color-secondary-dark: #6c757d;
    --color-info: #4ecdc4; /* Ciano mais claro */
    --color-info-dark: #6be0d7;

    --color-text: #e9ecef;
    --color-text-light: #adb5bd;
    --color-text-secondary: #c0c0c0;
    --color-text-muted: #adb5bd; /* Ajustado para melhor contraste no dark mode */
    --color-text-dark: #e0e0e0;

    --color-bg: #121212;
    --color-bg-card: #1e1e1e;
    --color-bg-muted: #2a2a2a; /* Mais escuro que o card para contraste */
    --color-bg-light: #212121; /* Levemente mais claro que o bg para feed */
    --color-bg-header: #282828;
    --color-bg-hover: #333333;

    --color-border: #495057;
    --color-border-light: #3a3a3a;
    --color-border-focus: #86b7fe;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);

    /* NOVAS VARIÁVEIS PARA TOOLTIP NO DARK MODE */
    --tooltip-bg: #555;
    --tooltip-text: #e0e0e0;

    /* Ajuste específico para o texto do badge no modo escuro */
    .status-badge--on_hold,
    .status-badge--pending {
        color: var(--color-text-dark); /* Para garantir legibilidade em dark mode */
    }
}

/* ==========================================================================
   2. RESET BÁSICO E ESTILOS GLOBAIS
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.auth-card__logo-top {
    /* Define a largura máxima da logo para que ela não seja muito grande */
    max-width: 60%; /* Você pode ajustar este valor conforme o tamanho ideal da sua logo */
    
    /* Garante que a altura se ajuste proporcionalmente à largura */
    height: auto; 
    
    /* Centraliza a logo horizontalmente dentro do contêiner */
    display: block; /* Essencial para 'margin: auto' funcionar */
    margin-left: auto;
    margin-right: auto;
    
    /* Adiciona um espaço abaixo da logo para separá-la do título ou outros elementos */
    margin-bottom: 25px; /* Ajuste conforme a separação desejada */

    /* Opcional: Adiciona um pequeno arredondamento nas bordas se desejar */
    /* border-radius: 5px; */

    /* Opcional: Se a logo tiver um fundo sólido e você quiser um sombreado discreto */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

/* Adiciona transição suave para todos os botões e links */
a, .button {
    transition: all var(--transition-fast);
}

/* Efeito de "clique" para botões, dando feedback tátil */
.button:active {
    transform: translateY(1px);
    box-shadow: none; /* Remove a sombra ao clicar */
}

/* Suaviza o efeito de foco nos campos de formulário */
.form-group__input {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Transição de cor suave para os links da navbar */
.navbar__links a {
    transition: color var(--transition-fast);
}

/* Classes utilitárias de texto */
.text-primary {
    color: var(--color-primary);
}

.text-muted {
    color: var(--color-text-muted);
}


/* ==========================================================================
   3. ESTILOS DAS PÁGINAS DE AUTENTICAÇÃO (Login & Cadastro)
   ========================================================================== */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--spacing-unit);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-card);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--color-primary);
    text-align: center;
}

.auth-card .card__title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.auth-card .form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

.auth-card .button {
    width: 100%;
    padding: 0.8rem 1.5rem;
    margin-top: 1rem;
}

.auth-card__footer {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.auth-card__footer a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-card__footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   4. ESTILOS DO DASHBOARD E COMPONENTES GERAIS
   ========================================================================== */
.content {
    padding: 1.5rem;
}

.navbar {
    background-color: var(--color-bg-card);
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar__logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
}

.navbar__user-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
}

/* Estilos para os links da navbar */
.navbar__links {
    display: flex;
    gap: 1.5rem;
}
.navbar__links a {
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: 600;
    transition: color var(--transition-fast);
}
.navbar__links a:hover {
    color: var(--color-primary);
}


.card {
    background: var(--color-bg-card);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.card--dashboard {
    max-width: 1100px;
    margin: 0 auto;
}

/* Adicionado para dar um espaçamento superior quando usado como um "card" dentro de outro */
.card--mt-1 {
    margin-top: 1.5rem;
}

/* Novo estilo para cards sem sombra, úteis dentro de abas ou outras seções */
.card--no-shadow {
    box-shadow: none;
    background-color: var(--color-bg-card); /* Mantém o fundo padrão do card */
    padding: 1.5rem; /* Mantém o padding interno para simular um card */
    border: 1px solid var(--color-border-light); /* Adiciona uma borda sutil para separação */
    border-radius: var(--border-radius);
}


.card__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}

.card__title {
    font-size: 1.5rem;
    margin: 0;
}

.form-group {
    margin-bottom: 1rem; /* Espaçamento padrão para grupos de formulário */
}

.form-group__label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 0.9rem; /* Levemente menor para labels */
}

.form-group__input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-color: var(--color-bg-card); /* Garante que inputs também se adaptem */
    color: var(--color-text);
}

.form-group__input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-fast);
    line-height: 1;
}
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button--primary { background-color: var(--color-primary); color: var(--color-text-white); }
.button--primary:hover { background-color: var(--color-primary-dark); }
.button--success { background-color: var(--color-success); color: var(--color-text-white); }
.button--success:hover { background-color: var(--color-success-dark); }
.button--danger { background-color: var(--color-danger); color: var(--color-text-white); }
.button--danger:hover { background-color: var(--color-danger-dark); }
.button--secondary { background-color: var(--color-secondary); color: var(--color-text-white); }
.button--secondary:hover { background-color: var(--color-secondary-dark); }
.button--small { padding: 0.4rem 0.8rem; font-size: 0.875rem; }

/* Botões com ícone */
.button--icon svg {
    width: 18px; /* Tamanho fixo para o ícone SVG */
    height: 18px; /* Tamanho fixo para o ícone SVG */
    fill: currentColor; /* Garante que o SVG herde a cor do texto do botão */
    vertical-align: middle; /* Ajuda a alinhar o SVG com o texto, se houver */
}

/* Para o botão que tem texto e ícone (ex: Criar Novo Projeto) */
.button--with-icon {
    display: inline-flex; /* Permite que o ícone e o texto fiquem lado a lado */
    align-items: center; /* Alinha verticalmente ícone e texto */
    gap: 0.5rem; /* Espaço entre o ícone e o texto */
}
.button--with-icon svg {
    width: 16px; /* Tamanho do ícone para botões com texto */
    height: 16px;
    fill: currentColor;
    flex-shrink: 0; /* Impede que o ícone encolha */
}

/* Nova classe para o botão de informação/edição */
.button--info {
    background-color: var(--color-info);
    color: var(--color-text-white);
}

.button--info:hover {
    background-color: var(--color-info-dark);
}

.status-message {
    text-align: center;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
}
.status-message--success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.status-message--error { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.6rem; /* 4px 8px */
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-badge--planning { background-color: #6c757d; }
.status-badge--active { background-color: #007bff; }
.status-badge--on_hold { background-color: #ffc107; color: #333; } /* Ajuste de cor para texto em modo claro */
.status-badge--completed { background-color: #28a745; }
.status-badge--admin { background-color: var(--color-danger); }
.status-badge--manager { background-color: var(--color-primary); }
.status-badge--member { background-color: var(--color-secondary); }
.status-badge--client { background-color: var(--color-success); }
.status-badge--gerente_geral { background-color: #fd7e14; } /* Laranja para destaque */
.status-badge--cancelled { background-color: var(--color-danger); } /* Task status */

/* Badges para Task Status */
.status-badge--to_do { background-color: #6c757d; }
.status-badge--in_progress { background-color: #007bff; }
.status-badge--done { background-color: #28a745; }
.status-badge--approved { background-color: #20c997; }

/* Badges para Request Status */
.status-badge--pending { background-color: var(--color-warning); color: var(--color-text); }
.status-badge--fulfilled { background-color: var(--color-success); }


/* --- Tabela de Projetos --- */
.project-list__empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-light);
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.project-list table {
    width: 100%;
    border-collapse: collapse;
}

.project-list th, .project-list td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.project-list th {
    font-size: 0.8rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   ESTILIZAÇÃO PARA PÁGINA DE DETALHES DO PROJETO (project/index.php)
   ========================================================================== */

/* Estilização para a seção de detalhes do projeto */
.project-header {
    margin-bottom: 20px;
    padding: 1.5rem; /* Ajustado */
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary); /* Barra lateral para destaque */
    border-radius: var(--border-radius);
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}
.project-header .card__header {
    border-bottom: none; /* Removido, já tem a barra lateral */
    padding-bottom: 0;
    margin-bottom: 0.5rem; /* Espaço menor */
}
.project-header .card__title {
    margin-bottom: 0;
    font-size: 2em; /* Título maior */
    color: var(--color-text-dark);
}
.project-header p {
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.95em;
}
.project-header p:last-child {
    margin-bottom: 0;
}
.project-header strong {
    color: var(--color-text-dark);
}

/* Estilização das Abas (Componente Genérico) */
.tabs {
    margin-top: var(--spacing-lg); /* Espaçamento superior para o componente de abas */
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Garante que as bordas arredondadas funcionem */
}

.tabs__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-header); /* Fundo sutil para a barra de navegação das abas */
}

.tabs__item {
    margin-right: 2px; /* Pequeno espaçamento entre as abas, se desejar */
}

.tabs__link {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap; /* Impede que o texto da aba quebre linha */
}

.tabs__link:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-hover);
    border-bottom-color: var(--color-primary);
}

.tabs__link.active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
    background-color: var(--color-bg-card); /* Fundo do card para a aba ativa */
}

.tabs__content {
    /* O conteúdo das abas agora é tratado como um "card sem sombra" */
    /* Removido padding e background aqui, pois serão aplicados pelo .card--no-shadow dentro */
    /* padding: 20px; */ 
}

.tabs__pane {
    display: none; /* Oculta todos os painéis por padrão */
}

.tabs__pane.active {
    display: block; /* Mostra o painel ativo */
}

/* Estilização para o Feed de Atividades */
.activity-feed-container {
    margin-top: 15px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    background-color: var(--color-bg-light);
}

.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-border-light); /* Adiciona uma pequena barra lateral */
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background-color 0.2s ease;
}
.activity-item:hover {
    background-color: var(--color-bg-hover);
    border-left-color: var(--color-primary); /* Destaca a barra lateral no hover */
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
    font-size: 0.8em; /* Levemente menor para meta-informações */
    color: var(--color-text-light); /* Mais suave */
}

.activity-time {
    font-size: 0.85em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.activity-user {
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.activity-description {
    margin: 0;
    color: var(--color-text-dark);
    line-height: 1.4;
}

/* Estilos para formulários e listas */
.assign-form, .task-form {
    background-color: var(--color-bg-muted); /* Usa muted para o fundo do formulário */
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    padding: 15px;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.form-row .form-group {
    margin-bottom: 0;
    flex: 1; /* Faz os grupos de formulário dentro de um form-row ocuparem espaço igual */
}

.form-actions {
    text-align: right;
    margin-top: 1.5rem; /* Espaçamento acima dos botões de ação */
}
.form-actions .button {
    margin-left: 0.75rem; /* Espaçamento entre os botões */
}


.task-list, .member-list {
    margin-top: 15px;
}

.task-list__empty, .empty-state {
    color: var(--color-text-light);
    font-style: italic;
    padding: 10px 0;
}

.task-item, .member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.task-item:last-child, .member-item:last-child {
    border-bottom: none;
}
/* Alterna fundo para melhor legibilidade */
.task-item:nth-child(even), .member-item:nth-child(even) {
    background-color: var(--color-bg-muted);
}
.task-item:nth-child(odd), .member-item:nth-child(odd) {
    background-color: var(--color-bg-card); /* Garante fundo branco/padrão */
}


.task-item__main {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs); /* 8px */
    justify-content: flex-start;
}

.task-item__main .task-item__title {
    font-weight: bold;
    color: var(--color-text-dark);
    width: 100%; /* Isso fará com que o título ocupe a linha inteira */
    margin-bottom: 5px;
}

.task-item__assignees {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    gap: 0.5rem; /* Espaçamento entre ícone e texto */
}
.task-item__assignees svg {
    flex-shrink: 0; /* Impede que o SVG encolha */
    fill: currentColor; /* Garante que o ícone herde a cor do texto */
}

/* Estilos para a resposta do cliente na lista de solicitações */
.task-item__response {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
    width: 100%; /* Garante que a resposta ocupe a largura total */
}

.task-item__response strong {
    color: var(--color-text);
}

.response-text {
    background-color: var(--color-bg-muted); /* Fundo sutil para o texto da resposta */
    border: 1px solid var(--color-border-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    margin-top: 0.5rem;
    white-space: pre-wrap; /* Preserva as quebras de linha do texto */
    color: var(--color-text);
}

/* Estilos para o badge de solicitações pendentes no portal do cliente */
.request-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-warning);
    color: var(--color-text);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.request-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: #ffca2c; /* Um tone de amarelo um pouco mais forte no hover */
}


.task-item__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* Espaçamento entre os botões (8px) */
    flex-shrink: 0; /* Impede que as ações encolham */
}

.task-status-form {
    display: inline-block;
}

.form-group__input--small {
    padding: 0.25rem 0.5rem; /* 4px 8px */
    font-size: 0.8rem;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-card);
    color: var(--color-text);
    /* Estilos para a seta customizada */
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-6.7H18.9c-6.5%200-12.2%203.2-13.2%206.7-2.9%209.7%209.3%2017.5%2013.2%2017.5h255.5c4.6%200%2016.4-7.8%2013.2-17.5z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 30px; /* Para acomodar a seta customizada */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group__input--small:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.dark-mode .task-status-form select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23adb5bd%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-6.7H18.9c-6.5%200-12.2%203.2-13.2%206.7-2.9%209.7%209.3%2017.5%2013.2%2017.5h255.5c4.6%200%2016.4-7.8%2013.2-17.5z%22%2F%3E%3C%2Fsvg%3E');
}

/* Estilos para a seção de equipe do projeto */
.assign-form {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    background-color: var(--color-bg-card); /* Deve ter o mesmo fundo dos cards para não quebrar o layout */
    border: none; /* Remove a borda se estiver dentro de um card--no-shadow */
    padding: 0; /* Remove o padding se o card--no-shadow já tiver */
}

.subsection__title {
    font-size: 1.25rem;
    margin-top: 2rem; /* Espaçamento antes dos títulos de subseção */
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--color-border-light);
    margin: 2rem 0; /* Espaçamento generoso para divisores de seção */
}


.member-list h4 {
    margin-bottom: 1rem;
    font-weight: 600;
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    /* Alterna fundo para melhor legibilidade - já tratado acima com task-item */
}

.member-item small {
    color: var(--color-text-light);
}

/* Estilos para a nova grade de detalhes do projeto */
.project-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-item__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}

.detail-item__value {
    font-size: 1rem;
    color: var(--color-text);
}

.detail-item--full-width {
    grid-column: 1 / -1; /* Faz o item ocupar a largura toda */
}

/* ==========================================================================
   COMPONENTE: TOOLTIP CONTEXTUAL
   ========================================================================== */
.tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
}

.tooltip::before,
.tooltip::after {
    --scale: 0;
    --tooltip-bg: var(--tooltip-bg);
    --tooltip-text: var(--tooltip-text);

    position: absolute;
    bottom: calc(100% + 8px); /* 8px de espaço acima do elemento */
    left: 50%;
    transform: translateX(-50%) translateY(0) scale(var(--scale));
    transform-origin: bottom center;
    transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.1), opacity 0.2s ease-in-out;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}

.tooltip::before {
    content: attr(data-tooltip);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border-radius: var(--border-radius-small);
    font-size: 0.85em;
    white-space: normal;
    max-width: 200px;
    text-align: center;
}

.tooltip::after {
    content: '';
    border: 6px solid transparent;
    border-top-color: var(--tooltip-bg);
    top: calc(100% + 2px); /* Posiciona a seta abaixo do tooltip */
    transform-origin: top center;
}

.tooltip:hover::before,
.tooltip:hover::after {
    --scale: 1;
    opacity: 1;
}

/* ==========================================================================
   COMPONENTE: ESTADO VAZIO (EMPTY STATE)
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    border: 1px dashed var(--color-border);
}

.empty-state__title {
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.empty-state__text {
    color: var(--color-text-light);
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
}

/* ==========================================================================
   COMPONENTE: QUADRO KANBAN
   ========================================================================== */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.kanban-column {
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.kanban-column__title {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.kanban-column__tasks {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kanban-task {
    background-color: var(--color-bg-card);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    cursor: grab;
    color: var(--color-text); /* Garante que o texto seja legível */
}
.kanban-task:active {
    cursor: grabbing;
}
.kanban-task.is-blocked {
    background-color: var(--color-danger);
    cursor: not-allowed;
    border-style: dashed;
    color: var(--color-text-white); /* Garante que o texto seja legível em fundo vermelho */
}

/* ==========================================================================
   FEEDBACK VISUAL PARA O KANBAN DRAG & DROP
   ========================================================================== */

/* Estilo do cartão enquanto ele está sendo arrastado */
.kanban-task.is-dragging {
    opacity: 0.5;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Estilo da coluna quando um cartão está sendo arrastado sobre ela */
.kanban-column__tasks.drag-over {
    background-color: rgba(74, 144, 226, 0.1);
    border: 2px dashed var(--color-primary);
}


/* ==========================================================================
   Estilos para o Wrapper de Notificação (do CSS global original)
   ========================================================================== */
.notification-wrapper { position: relative; }
.notification-bell { background: none; border: none; cursor: pointer; position: relative; color: var(--color-text-light); }
.notification-bell:hover { color: var(--color-primary); }
.notification-badge { position: absolute; top: -5px; right: -8px; background-color: var(--color-danger); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.notification-dropdown { position: absolute; top: 150%; right: 0; background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-md); width: 320px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-fast); }
.notification-dropdown.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.notification-item { display: block; padding: 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-light); text-decoration: none; font-size: 0.9rem; }
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background-color: var(--color-bg-hover); }


/* ==========================================================================
   5. MEDIA QUERIES PARA RESPONSIVIDADE
   ========================================================================== */

/* --- Estilos para Telas de Tablet (min-width: 768px) --- */
@media (min-width: 768px) {
    .content { padding: 2rem; }
    .card { padding: 2rem; }
    .navbar { padding: 1rem 2rem; }
}

/* --- Estilos para Telas de Celular (max-width: 767px) --- */
@media (max-width: 767px) {
    /* Ajustes gerais para mobile */
    .content { padding: 1rem; }
    .card { padding: 1.5rem 1rem; }
    .navbar { flex-direction: column; gap: 1rem; }
    .card__header { flex-direction: column; align-items: stretch; text-align: center; }

    /* Kanban responsividade */
    .kanban-board {
        grid-template-columns: 1fr; /* Transforma em uma única coluna no mobile */
    }

    /* --- TÉCNICA DA TABELA RESPONSIVA (PARA LISTA DE PROJETOS E CLIENTES) --- */
    .table-responsive thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-responsive tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }
    .table-responsive td {
        display: block;
        text-align: right;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--color-border-light);
    }
    .table-responsive tr td:last-child {
        border-bottom: none;
    }
    .table-responsive td[data-label] {
        position: relative;
        padding-left: 45%;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .table-responsive td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 40%;
        text-align: left;
        font-weight: 600;
        color: var(--color-text);
    }

    /* Ajustes para Abas em Mobile (componente .tabs genérico) */
    .tabs__nav {
        flex-wrap: nowrap; /* Impede a quebra de linha das abas */
        overflow-x: auto; /* Adiciona rolagem horizontal se as abas excederem */
        -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
        scrollbar-width: none; /* Esconde a barra de rolagem para Firefox */
        -ms-overflow-style: none;  /* Esconde a barra de rolagem para IE/Edge */
    }
    .tabs__nav::-webkit-scrollbar {
        display: none; /* Esconde a barra de rolagem para WebKit */
    }
    .tabs__item {
        flex-shrink: 0; /* Impede que os itens das abas encolham */
        margin-right: 0; /* Remove o margin-right se não houver mais quebra */
        border-right: 1px solid var(--color-border); /* Separação visual entre as abas */
    }
    .tabs__item:last-child {
        border-right: none;
    }
    .tabs__link {
        padding: 10px 15px; /* Reduz o padding para abas menores */
        font-size: 0.9em; /* Reduz o tamanho da fonte */
    }
    .tabs__content {
        padding: 15px; /* Um pouco menos de padding em mobile para o conteúdo da aba */
    }
    /* Se você está usando .card--no-shadow dentro de .tabs__content, ajuste o padding dele também */
    .tabs__pane > .card--no-shadow {
        padding: 15px;
    }


    /* Faz o formulário de adicionar tarefa empilhar verticalmente */
    .task-form, .assign-form {
        flex-direction: column;
        align-items: stretch;
    }
    .task-form .form-group, .assign-form .form-group {
        margin-bottom: 10px; /* Reduz o espaçamento entre campos */
    }
    .task-form .button, .assign-form .button {
        width: 100%; /* Botões ocupam largura total */
        margin-top: 10px;
        margin-left: 0; /* Remove margem esquerda para alinhar ao centro */
    }

    /* Faz cada item da lista de tarefas empilhar o título e as ações */
    .task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Força o container de ações a ser uma coluna e estica seus itens */
    .task-item__actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* Garante que o texto dos botões dentro das ações fique centralizado */
    .task-item__actions .button {
        text-align: center;
    }

    /* Força o select de status a ocupar 100% da largura, assim como os botões. */
    .task-item__actions .form-group__input--small {
        width: 100%;
        text-align: center;
        padding-bottom: 0.25rem; /* Reajustado para não forçar espaçamento */
        margin-bottom: 0; /* Reajustado para não forçar espaçamento */
    }

    /* Alinhamento à esquerda para solicitações (parece correto, mas reconfirmando) */
    .data-request-item .task-item__response {
        width: 100%; /* Garante que ocupe a largura total */
    }
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}