:root {
    --primary-green: #059669;
    --primary-blue: #2563eb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: var(--gray-100) !important;
}

a {
    text-decoration: none !important;
}

/* Navbar */
.navbar {
    min-height: 65px !important;
}

.navbar .navbar-brand i {
    color: var(--primary-green) !important;
}

.navbar .navbar-nav .nav-link {
    border-radius: 4px !important;
    margin-right: 2px !important;
    color: var(--gray-700) !important;
}

.navbar .navbar-nav .nav-link:hover {
    background: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

.navbar .navbar-nav .nav-link.active {
    background: var(--primary-green) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Badges de status */
.badge-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.badge-status.connected {
    background: #d1fae5 !important;
    color: var(--primary-green) !important;
}

.badge-status.qrcode,
.badge-status.qrcode_pending {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.badge-status.disconnected {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.badge-status.loading,
.badge-status.connecting,
.badge-status.disconnecting {
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
}

/* Status cards */
.status-connected {
    border-left: 3px solid var(--primary-green) !important;
    background: #f0fdf4 !important;
}

.status-qrcode {
    border-left: 3px solid #d97706 !important;
    background: #fffbeb !important;
}

.status-disconnected {
    border-left: 3px solid #dc2626 !important;
    background: #fef2f2 !important;
}

.status-loading,
.status-qrcode_pending,
.status-connecting,
.status-disconnecting {
    border-left: 3px solid var(--gray-500) !important;
    background: var(--gray-100) !important;
}

/* Alertas */
.alert {
    border: none !important;
    border-radius: 6px !important;
}

.alert-success {
    background: #d1fae5 !important;
    color: var(--primary-green) !important;
}

.alert-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.alert-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.alert-info {
    background: #dbeafe !important;
    color: #1e40af !important;
}

/* Tabelas */
.table th {
    background: var(--gray-100) !important;
    font-weight: 600 !important;
}

.table tbody tr:hover {
    background: var(--gray-100) !important;
}

/* Cards */
.card {
    border-radius: 8px !important;
}

.card.instance-card {
    transition: border-color 0.15s !important;
}

.card.instance-card:hover {
    border-color: var(--primary-green) !important;
}

/* Nav tabs */
.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--primary-green) !important;
    font-weight: 500 !important;
}

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

/* Select2 */
.select2-container--default .select2-selection--single {
    border-radius: 6px !important;
    height: 42px !important;
}

.select2-container--default .select2-selection--multiple {
    border-radius: 6px !important;
    min-height: 42px !important;
}

/* HTMX */
.htmx-indicator {
    display: none !important;
}

.htmx-request.htmx-indicator {
    display: inline-block !important;
}

/* Buttons */
.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.btn.btn-success {
    background: var(--primary-green) !important;
    color: white !important;
}

.btn.btn-primary {
    background: var(--primary-blue) !important;
    color: white !important;
}
/* CRM Panel Styles */
.crm-panel .card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.crm-panel .card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08) !important;
}

.crm-panel .card-subtitle {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.crm-panel .list-group-item {
    transition: background-color 0.15s ease;
}

.crm-panel .list-group-item:hover {
    background-color: #f8f9fa !important;
}

.crm-panel .badge.rounded-pill {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Pulse animation for urgent badges */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Reminder overdue highlight */
.crm-panel .bg-danger.bg-opacity-10 {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-left: 3px solid #dc3545 !important;
}

/* Contact Lists in CRM */
.crm-panel .badge.bg-info {
    background-color: #17a2b8 !important;
}

.crm-panel .badge .btn-close-white {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.crm-panel .badge .btn-close-white:hover {
    opacity: 1;
}