/* General styles */
:root {
    --primary-color: #6f0e65;
    --secondary-color: #881b7d;
    --light-purple: #e9e3ff;
    --dark-purple: #460d40;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

/* Navbar */
.navbar-dark {
    background-color: var(--primary-color) !important;
}

.navbar-brand img {
    max-height: 40px;
}

/* Cards */
.card {
    border-radius: 10px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Form elements */
.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

.form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}

/* Dropdown menus */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-color);
}

/* Custom calendar styles */
.calendar-nav {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-nav .today {
    margin: 0 15px;
}

.table-agenda td {
    height: 80px;
    vertical-align: top;
    padding: 5px;
}

.table-agenda .today {
    background-color: var(--light-purple);
    font-weight: bold;
}

/* ==========================================
   CORREÇÃO DO PROBLEMA DE TEXTO BRANCO
   ========================================== */

/* Appointment styles - VERSÃO CORRIGIDA COM !IMPORTANT */
.appointment-card {
    background-color: #e9f5ff;
    border-left: 4px solid #0d6efd;
    margin: 5px 0;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: #333 !important; /* COR FORÇADA COM !important */
}

/* Garantir que todos os elementos dentro dos cartões tenham texto escuro */
.appointment-card * {
    color: #333 !important;
}

.appointment-card.scheduled {
    background-color: #e9f5ff;
    border-left-color: #0d6efd;
    color: #333 !important;
}

.appointment-card.scheduled * {
    color: #333 !important;
}

.appointment-card.completed {
    background-color: #e9ffe9;
    border-left-color: var(--success-color);
    color: #333 !important;
}

.appointment-card.completed * {
    color: #333 !important;
}

.appointment-card.cancelled {
    background-color: #ffe9e9;
    border-left-color: var(--danger-color);
    color: #333 !important;
}

.appointment-card.cancelled * {
    color: #333 !important;
}

.appointment-card.no-show {
    background-color: #fff3e9;
    border-left-color: var(--warning-color);
    color: #333 !important;
}

.appointment-card.no-show * {
    color: #333 !important;
}

/* Específico para cartões com fundo roxo */
[style*="background-color: rgb(233, 227, 255)"],
[style*="background-color:#e9e3ff"],
[style*="background-color: var(--light-purple)"] {
    color: #333 !important;
}

[style*="background-color: rgb(233, 227, 255)"] *,
[style*="background-color:#e9e3ff"] *,
[style*="background-color: var(--light-purple)"] * {
    color: #333 !important;
}

/* Elementos específicos no cartão */
.client-name, 
.service-name,
.client-phone,
.appointment-time,
.appointment-details {
    color: #333 !important;
}

/* Seleção ainda mais específica para elementos dentro do cartão */
.appointment-card h1, 
.appointment-card h2, 
.appointment-card h3, 
.appointment-card h4, 
.appointment-card h5, 
.appointment-card h6,
.appointment-card p, 
.appointment-card div, 
.appointment-card span, 
.appointment-card strong, 
.appointment-card b, 
.appointment-card i {
    color: #333 !important;
}

/* ==========================================
   FIM DA CORREÇÃO
   ========================================== */

/* Modals */
.modal-header {
    background-color: #f8f9fa;
}

.modal-footer {
    background-color: #f8f9fa;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination .page-link {
    color: var(--primary-color);
}

/* Time Slots */
.time-slot {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
    min-height: 60px;
    position: relative;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .appointment-card {
        font-size: 0.85rem;
    }
}

/* Login and Registration Pages */
.auth-card {
    max-width: 450px;
    margin: 0 auto;
    margin-top: 50px;
}

/* Profile Picture */
.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Additional Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Status badges */
.status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.scheduled {
    background-color: #e9f5ff;
    color: #0d6efd;
}

.status-badge.completed {
    background-color: #e9ffe9;
    color: var(--success-color);
}

.status-badge.cancelled {
    background-color: #ffe9e9;
    color: var(--danger-color);
}

.status-badge.no-show {
    background-color: #fff3e9;
    color: var(--warning-color);
}

/* Sobrescrevendo classes text-white para os cartões de agendamento */
.appointment-card .text-white {
    color: #333 !important;
}