/**
 * ============================================================================
 * ESTILOS DE VISTA DE CLIENTES - CUBETIC PROJECT MANAGER
 * ============================================================================
 * 

/* ============================================================================
   TARJETAS DE CLIENTES
   ============================================================================ */

.clients-container .hover-shadow {
    transition: all 0.3s ease;
}

.clients-container .hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.clients-container .card-body p {
    font-size: 0.9rem;
}

.clients-container .card-body p a {
    color: inherit;
    text-decoration: none;
}

.clients-container .card-body p a:hover {
    text-decoration: underline;
}

/* ============================================================================
   TARJETAS DE SEDES
   ============================================================================ */

#locations-list .location-card {
    transition: all 0.3s ease;
}

#locations-list .location-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   TARJETAS DE PROYECTOS
   ============================================================================ */
#location-projects-list .project-card,
#client-projects-list .project-card {
    transition: all 0.3s ease;
}

#location-projects-list .project-card:hover,
#client-projects-list .project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

#location-projects-list .stat-mini,
#client-projects-list .stat-mini {
    padding: 0.5rem;
}

#location-projects-list .stat-mini i,
#client-projects-list .stat-mini i {
    font-size: 1.2rem;
}

#location-projects-list .stat-mini .fw-bold,
#client-projects-list .stat-mini .fw-bold {
    font-size: 1.1rem;
}

/* ============================================================================
   ESTADOS Y UTILIDADES
   ============================================================================ */

/* Empty state */
.clients-container .alert-info {
    padding: 2rem;
}

/* Search highlight */
.client-card.hidden {
    display: none !important;
}

/* ============================================================================
   MODALES
   ============================================================================ */

#locationsModal .modal-body,
#locationProjectsModal .modal-body,
#clientProjectsModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* ============================================================================
   BADGES Y CONTADORES
   ============================================================================ */

.clients-container .badge-counter {
    font-size: 0.8rem;
    padding: 0.4em 0.8em;
}

/* ============================================================================
   BOTONES Y CONTROLES
   ============================================================================ */

/* Dropdown fix */
.clients-container .dropdown-menu {
    z-index: 1050;
}

.clients-container .dropdown-toggle::after {
    display: none;
}

/* Action buttons in card footer */
.client-card .card-footer {
    padding: 0.5rem !important;
}

.client-card .card-footer .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.client-card .card-footer .btn i {
    font-size: 0.85rem;
}

/* Botones neutros para modales */
.btn-modal-neutral {
    background-color: #ced4da;
    border-color: #ced4da;
    color: #212529;
}

.btn-modal-neutral:hover,
.btn-modal-neutral:focus {
    background-color: #bcc3ca;
    border-color: #bcc3ca;
    color: #212529;
}

.btn-modal-neutral:active {
    background-color: #adb5bd;
    border-color: #adb5bd;
}

/* Botón neutro outline (más suave) */
.btn-modal-neutral-outline {
    background-color: transparent;
    border-color: #dee2e6;
    color: #6c757d;
}

.btn-modal-neutral-outline:hover,
.btn-modal-neutral-outline:focus {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

/* Botón neutro claro */
.btn-modal-light {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #495057;
}

.btn-modal-light:hover,
.btn-modal-light:focus {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #212529;
}

/* Badge estado activo - reemplaza el amarillo */
.badge-estado-activo {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

/* Header de tarjeta cliente - fondo azul */
.client-card-header {
    background-color: #0d6efd;
    border-bottom: 1px solid #0d6efd;
}

.client-card-header h5 {
    color: #ffffff;
}

/* Clases para cards dinámicas */
.location-card .card-header h6 {
    flex: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.project-card .card-header h6 {
    max-width: 280px;
}

.project-card-wide .card-header h6 {
    max-width: 300px;
}

.project-card,
.location-card {
    cursor: pointer;
}

/* Input de búsqueda */
#search-clients {
    width: 250px;
}

/* Botón cerrar más claro */
.btn-close {
    opacity: 0.4 !important;
}

.btn-close:hover {
    opacity: 0.6 !important;
}

/* Lista simple de proyectos en modal de sede */
.project-list-item {
    background-color: #fff;
    transition: all 0.2s ease;
}

.project-list-item:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .clients-container .card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .clients-container .card-header .d-flex {
        width: 100%;
        flex-direction: column;
    }
    
    .clients-container .card-header input {
        width: 100% !important;
    }
}