/* assets/css/style.css */
:root {
    --gold: #D4AF37;
    --black: #121212;
    --dark-gray: #1E1E1E;
    --light-gray: #333333;
    --text-color: #E0E0E0;
    --danger-red: #c0392b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background-color: var(--black); color: var(--text-color); }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }

/* --- NOVO: Tela de Login --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.login-box {
    background-color: var(--dark-gray);
    padding: 40px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-top: 4px solid var(--gold);
}
.login-box .logo {
    height: 60px;
    margin-bottom: 20px;
}
.login-box h2 {
    margin-bottom: 20px;
}
.login-box label {
    display: block;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 5px;
}
.login-box button {
    width: 100%;
    margin-top: 25px;
}
.error-message {
    color: var(--danger-red);
    margin-top: 15px;
    font-size: 0.9rem;
}

/* --- Header --- */
header { 
    background-color: var(--dark-gray);
    padding: 0;
    border-bottom: 2px solid var(--gold);
}

header .container { display: flex; justify-content: space-between; align-items: center; padding: 0; }
.header-left { display: flex; align-items: center; }
.logo { height: 50px; margin-right: 20px; }

/* --- NOVO: Menu do Usuário --- */
.user-menu {
    position: relative;
    display: inline-block;
      -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard syntax */
}
.user-menu i {
    font-size: 36px;
    cursor: pointer;
    color: var(--text-color);
}
.dropdown-content {
    position: absolute;
    right: 0;
    background-color: var(--dark-gray);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
    text-align: right;
}

.dropdown-content a:hover { background-color: var(--light-gray); }


/* --- Botões e Inputs --- */
.btn-primary, .btn-secondary, .btn-danger { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: background-color 0.3s ease; }
.btn-primary { background-color: var(--gold); color: var(--black); }
.btn-primary:hover { background-color: #e6c560; }
.btn-secondary { background-color: var(--light-gray); color: var(--text-color); }
.btn-secondary:hover { background-color: #444; }
.btn-danger { background-color: var(--danger-red); color: white; }
.btn-danger:hover { background-color: #e74c3c; }
input[type="text"], input[type="tel"], input[type="date"], input[type="password"], textarea { width: 100%; padding: 7px; background-color: var(--light-gray); border: 1px solid #444; border-radius: 5px; color: var(--text-color); font-size: 1rem; }


/* Ajuste de largura para o botão Adicionar Cliente */
#add-new-client-btn {
    min-width: 190px;  /* Você pode ajustar este valor como preferir */
    text-align: center; /* Garante que o texto fique centralizado */
}


/* --- Dashboard --- */
.dashboard-summary { display: flex; gap: 20px; margin-bottom: 20px; }

/* Em assets/css/style.css */

.stat-card {
    background-color: var(--dark-gray);
    padding: 10px;
    border-radius: 8px;
    flex-grow: 1;
    /* text-align: center; */ /* <-- Remova ou comente esta linha */
    border-left: 4px solid var(--gold);
    display: flex;
    flex-direction: row; /* Coloca os itens em linha (horizontal) */
    justify-content: center; /* Centraliza o conteúdo na linha */
    align-items: baseline; /* Alinha o texto com a base do número */
    gap: 10px; /* Adiciona um espaço entre o H3 e o P */
}

/* Adicione esta regra para o H3 */
.stat-card h3 {
    margin: 0;
    font-size: 1.5rem; /* Ajuste o tamanho como preferir */
}

/* Modifique a regra do .stat-card p para remover a margem */
.stat-card p {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--gold);
    margin: 0; /* <-- Adicione esta linha */
}
    
.stat-card p { font-size: 2.5rem; font-weight: 600; color: var(--gold); }
.actions-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; }
#search-input { flex-grow: 1; }
#client-list { list-style: none; min-height: 200px; /* Garante altura mínima */}

.client-list-item { 
    background-color: var(--dark-gray);
    padding: 15px;
    margin-bottom: 7px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-items: flex-start;
}

.client-list-item:hover { background-color: var(--light-gray); }
.client-list-item span { font-size: 0.9rem; color: #aaa; }

.client-list-item div {
    flex-grow: 1; /* Faz o nome e tel. ocuparem o espaço */
    padding-right: 10px; /* Evita que o texto encoste na data */
}
/* NOVO: Estilo para o telefone */
.client-list-phone {
    font-size: 0.9rem;
    color: #aaa;
    margin-left: 8px;
    font-weight: 300; /* Mais leve que o nome */
}

/* --- NOVO: Paginação --- */
/* ATUALIZADO: Estilo da Paginação */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    gap: 15px; /* Aumenta o espaço */
}
/* NOVO: Estilo para o texto da página */
.pagination span {
    font-size: 1rem;
    color: #aaa;
    font-weight: 600;
}
.pagination button {
    padding: 8px 12px;
    font-size: 0.9rem;
}
/* Estilo para botões desabilitados */
.pagination button:disabled {
    background-color: var(--light-gray);
    color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}
/* Remove a regra antiga que criava botões numerados */
.pagination button.active {
    background-color: var(--light-gray);
    color: var(--text-color);
    font-weight: 600;
}

/* ... (em @media (max-width: 600px)) ... */
@media (max-width: 600px) {
    .client-list-item { 
        flex-direction: column; 
        align-items: flex-start; 
    }
    .client-list-item .client-list-date { /* Atualiza o span de data */
        margin-top: 5px;
        margin-left: 0;
    }
}

/* --- Visão de Detalhes --- */
#back-to-dashboard-btn { margin-bottom: 20px; }

.client-details-card { 
    background-color: var(--dark-gray);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 3px solid var(--gold);
}

.client-details-card h2 { color: var(--gold); margin-bottom: 15px; }
.client-details-card p { line-height: 1.8; }

/* NOVO: Para alinhar nome e data */
.detail-header {
    display: flex;
    justify-content: space-between; /* Mágica acontece aqui: joga um item para cada lado */
    align-items: baseline; /* Alinha o texto pela base */
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* Garante que o H2 não tenha margem extra que atrapalhe o alinhamento */
.detail-header h2 {
    margin-bottom: 0;
}


/* NOVO: Para alinhar Telefone e CPF */
.detail-row {
    display: flex;
    justify-content: space-between;
}

/*.client-actions { margin-top: 20px; display: flex; gap: 10px; }*/
.client-actions { 
    margin-top: 25px; 
    display: flex; 
    gap: 10px; 
    justify-content: flex-end; /* Mágica acontece aqui: alinha os itens no final (direita) */
}

/* .prescription-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 15px; } 
.prescription-card { background-color: var(--dark-gray); padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 3px solid var(--gold); }
.prescription-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.prescription-card-header .actions button { font-size: 0.8rem; padding: 5px 10px;} */


/* MODIFICADO: Título à esquerda, botão à direita */
.prescription-section-header {
    display: flex;
    flex-direction: row; /* Garante que fiquem na mesma linha (padrão) */
    align-items: center; /* Alinha verticalmente o título e o botão */
    justify-content: space-between; /* A mágica acontece aqui! */
    margin-bottom: 25px;
    gap: 15px; /* Mantém um espaçamento mínimo caso a tela fique estreita */
}

/* NOVO: Transforma a lista de receitas em um grid de 3 colunas */
#prescription-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de largura igual */
    gap: 20px; /* Espaçamento entre os cards */
    width: 100%;
}

/* MODIFICADO: Estilos aprimorados para o card dentro do grid */
.prescription-card {
    background-color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
    display: flex; /* Essencial para alinhar os botões no final */
    flex-direction: column; /* Organiza o conteúdo do card verticalmente */
    margin-bottom: 0; /* Remove a margem antiga, pois o 'gap' do grid já faz isso */
}

/* MODIFICADO: Cabeçalho do card não precisa mais de alinhamento complexo */
.prescription-card-header {
    margin-bottom: 15px;
}

/* NOVO: Estilo para o container dos botões dentro do card */
.prescription-card .actions {
    margin-top: auto; /* Mágica do Flexbox: empurra os botões para o final do card */
    padding-top: 15px; /* Espaço entre o conteúdo e os botões */
    display: flex;
    justify-content: flex-end; /* Alinha os botões à direita */
    gap: 10px;
}


.grade-table { width: 100%; text-align: center; margin-bottom: 15px; border-collapse: collapse; }
.grade-table th, .grade-table td { border: 1px solid var(--light-gray); padding: 8px; }
.grade-table th { background-color: var(--light-gray); }

/* --- Modais --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: var(--dark-gray); padding: 20px; border-radius: 8px; width: 90%; max-width: 750px; max-height: 90vh; overflow-y: auto; }
.modal-content h3 { color: var(--gold); margin-bottom: 0px; }
.modal-content label { display: block; margin-top: 15px; margin-bottom: 5px; }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* NOVO: Grid para 3 colunas */
.form-grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}


.grade-grid { display: grid; grid-template-columns: 30px 1fr 1fr 1fr; gap: 10px; align-items: center; text-align: center; margin-top: 10px; margin-bottom: 10px; }
.grade-grid span { font-size: 0.9rem; color: #aaa; }
.grade-grid strong { font-weight: 600; color: var(--gold); }

/* --- Responsividade --- */
@media (max-width: 600px) {
    #prescription-list {
        grid-template-columns: 1fr; /* 1 coluna para celulares */
    }
    .form-grid-3-col {
        grid-template-columns: 1fr; /* Empilha os campos em telas pequenas */
    }
    .actions-bar { flex-direction: column; align-items: stretch; }
    .dashboard-summary { flex-direction: column; }


.client-list-item .client-list-date { 
    font-size: 0.9rem; 
    color: #aaa; 
    flex-shrink: 0; /* Impede que a data quebre */
}


    .client-list-item span { margin-top: 5px; }
    .prescription-section { flex-direction: column; align-items: stretch; }
    .prescription-section h3 { margin-bottom: 10px; }
}

/* Adicione esta nova regra para o grid ficar responsivo em telas menores */
@media (max-width: 900px) {
    #prescription-list {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para tablets */
    }
}