/* Shared Badge Colors CSS for Transformer Maintenance Application
   Use this file for all badge color definitions across the application */

/* ===== Badge Base Styles ===== */
.badge-base {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ===== Color Variables ===== */
:root {
    /* DGA Health Status Colors */
    --color-healthy: #388E3C;
    --color-healthy-bg: rgba(56, 142, 60, 0.1);
    --color-alarm: #FF9800;
    --color-alarm-bg: rgba(255, 152, 0, 0.1);
    --color-danger: #D32F2F;
    --color-danger-bg: rgba(211, 47, 47, 0.1);
    /* Tap Changer Status Colors */
    --color-upcoming: #00897B;
    --color-upcoming-bg: rgba(0, 137, 123, 0.1);
    --color-due-soon: #FBC02D;
    --color-due-soon-bg: rgba(251, 192, 45, 0.1);
    --color-maint-overdue: #B71C1C;
    --color-maint-overdue-bg: rgba(183, 28, 28, 0.1);
    /* Transformer Maintenance Plan Colors */
    --color-completed: #1565C0;
    --color-completed-bg: rgba(21, 101, 192, 0.1);
    --color-scheduled: #7B1FA2;
    --color-scheduled-bg: rgba(123, 31, 162, 0.1);
    --color-in-progress: #01579B;
    --color-in-progress-bg: rgba(1, 87, 155, 0.1);
    --color-plan-overdue: #C62828;
    --color-plan-overdue-bg: rgba(198, 40, 40, 0.1);
    /* Secondary/Default Color */
    --color-secondary: #6c757d;
    --color-secondary-bg: rgba(108, 117, 125, 0.1);
}

/* ===== List Page Badge Styles (TMMBadge*) ===== */

/* DGA Health Status Badges */
.TMMBadgeHealthy {
    background-color: var(--color-healthy-bg);
    color: var(--color-healthy);
    border: 1px solid var(--color-healthy);
}

.TMMBadgeAlarm {
    background-color: var(--color-alarm-bg);
    color: var(--color-alarm);
    border: 1px solid var(--color-alarm);
}

.TMMBadgeDanger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

/* Tap Changer Status Badges */
.TMMBadgeUpcoming {
    background-color: var(--color-upcoming-bg);
    color: var(--color-upcoming);
    border: 1px solid var(--color-upcoming);
}

.TMMBadgeDueSoon {
    background-color: var(--color-due-soon-bg);
    color: var(--color-due-soon);
    border: 1px solid var(--color-due-soon);
}

.TMMBadgeMaintenanceOverdue {
    background-color: var(--color-maint-overdue-bg);
    color: var(--color-maint-overdue);
    border: 1px solid var(--color-maint-overdue);
}

/* Transformer Maintenance Plan Status Badges */
.TMMBadgeCompleted {
    background-color: var(--color-completed-bg);
    color: var(--color-completed);
    border: 1px solid var(--color-completed);
}

.TMMBadgeScheduled {
    background-color: var(--color-scheduled-bg);
    color: var(--color-scheduled);
    border: 1px solid var(--color-scheduled);
}

.TMMBadgeInProgress {
    background-color: var(--color-in-progress-bg);
    color: var(--color-in-progress);
    border: 1px solid var(--color-in-progress);
}

.TMMBadgeOverdue {
    background-color: var(--color-plan-overdue-bg);
    color: var(--color-plan-overdue);
    border: 1px solid var(--color-plan-overdue);
}

.TMMBadgeSecondary {
    background-color: var(--color-secondary-bg);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

/* ===== Form/Details Page Badge Styles (TFBadge-*) ===== */

/* DGA Health Status Badges */
.TFBadge-Healthy {
    background-color: var(--color-healthy);
    color: white;
}

.TFBadge-Alarm {
    background-color: var(--color-alarm);
    color: black;
}

.TFBadge-Danger {
    background-color: var(--color-danger);
    color: white;
}

/* Tap Changer Status Badges */
.TFBadge-Upcoming {
    background-color: var(--color-upcoming);
    color: white;
}

.TFBadge-DueSoon {
    background-color: var(--color-due-soon);
    color: black;
}

.TFBadge-Overdue {
    background-color: var(--color-maint-overdue);
    color: white;
}

/* Transformer Maintenance Plan Status Badges */
.TFBadge-Completed {
    background-color: var(--color-completed);
    color: white;
}

.TFBadge-Scheduled {
    background-color: var(--color-scheduled);
    color: white;
}

.TFBadge-InProgress {
    background-color: var(--color-in-progress);
    color: white;
}

.TFBadge-PlanOverdue {
    background-color: var(--color-plan-overdue);
    color: white;
}

.TFBadge-Secondary {
    background-color: var(--color-secondary);
    color: white;
}

/* ===== Filter Button Styles ===== */
.TMMFilterBtn.active-completed {
    background-color: var(--color-completed);
    color: white;
    border-color: var(--color-completed);
}

.TMMFilterBtn.active-scheduled {
    background-color: var(--color-scheduled);
    color: white;
    border-color: var(--color-scheduled);
}

.TMMFilterBtn.active-inprogress {
    background-color: var(--color-in-progress);
    color: white;
    border-color: var(--color-in-progress);
}

.TMMFilterBtn.active-overdue {
    background-color: var(--color-plan-overdue);
    color: white;
    border-color: var(--color-plan-overdue);
}

/* ===== Details Page Badge Styles (TDPBadge-*) ===== */
.TDPBadge-Success {
    background-color: var(--color-healthy);
    color: white;
}

.TDPBadge-Warning {
    background-color: var(--color-alarm);
    color: black;
}

.TDPBadge-Danger {
    background-color: var(--color-danger);
    color: white;
}

.TDPBadge-Primary {
    background-color: var(--color-in-progress);
    color: white;
}

.TDPBadge-Info {
    background-color: var(--color-scheduled);
    color: white;
}

.TDPBadge-Secondary {
    background-color: var(--color-secondary);
    color: white;
}