/* =============================================================================
   components/badges.css
   Status and system indicator chips used in the dashboard and detail views.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Connection status badge (.location-item, sub-account cards)
   ----------------------------------------------------------------------------- */

.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.not-connected    { background: var(--primary-light);  color: var(--primary);      }
.status-badge.connected-active { background: var(--success-light);  color: var(--success-color); }
.status-badge.connected-inactive { background: var(--danger-light); color: var(--danger-color);  }

/* Alias used in manage-integration cards */
.status-badge.status-enabled   { background: var(--success-light);  color: var(--success);       }

/* -----------------------------------------------------------------------------
   CRM system badge
   ----------------------------------------------------------------------------- */

.system-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--primary-light);
    border-radius: var(--radius-md);
    color: var(--primary-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.system-badge i {
    margin-right: var(--space-1);
    font-size: var(--font-size-xs);
}

/* -----------------------------------------------------------------------------
   Integration header badges (location, system, status toggle)
   ----------------------------------------------------------------------------- */

.integration-badges {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.integration-location-badge,
.integration-system-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.integration-location-badge i,
.integration-system-badge i {
    font-size: var(--font-size-sm);
    color: var(--primary);
}

/* Clickable status toggle */
.integration-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.integration-status-badge i { font-size: var(--font-size-sm); }

.integration-status-badge.status-active {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

.integration-status-badge.status-active:hover {
    background: var(--success);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.integration-status-badge.status-inactive {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

.integration-status-badge.status-inactive:hover {
    background: var(--danger);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Toggle hover-swap pattern */
.status-icon-hover,
.status-label-hover               { display: none; }

.integration-status-badge:hover .status-icon-default,
.integration-status-badge:hover .status-label-default { display: none; }

.integration-status-badge:hover .status-icon-hover,
.integration-status-badge:hover .status-label-hover   { display: inline; }

/* Sync frequency badge */
.sync-freq-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .integration-badges {
        flex-direction: column;
        width: 100%;
    }

    .integration-location-badge,
    .integration-system-badge,
    .integration-status-badge {
        width: 100%;
        justify-content: center;
    }
}