/*
 * Status Colors - Centralized Status Indicator System
 * Standardizes all status indicators, badges, and mode displays across the dashboard
 *
 * DEPENDENCY: Requires design-tokens.css to be loaded first
 *
 * ============================================
 * NOTE ON !important USAGE
 * ============================================
 * This file uses !important to override Bootstrap's default badge/alert styles.
 * Bootstrap uses high-specificity selectors with its own !important declarations.
 *
 * To properly override without !important would require:
 * 1. Loading this CSS after Bootstrap in all templates
 * 2. Using longer selector chains (e.g., .container .badge.mode-shore)
 * 3. Or using a CSS reset/prefix system
 *
 * FUTURE IMPROVEMENT: Consider migrating to a BEM naming convention
 * (e.g., .bos-badge--shore) to avoid Bootstrap conflicts entirely.
 *
 * ============================================
 * NAMING CONVENTIONS (Standardized)
 * ============================================
 *
 * Three distinct naming patterns for different use cases:
 *
 * 1. OPERATIONAL MODES (prefix: mode-)
 *    Use with: .badge, navbar items, metric-icon
 *    Pattern: .mode-{shore|battery|genset|hybrid|offline}
 *
 * 2. SYSTEM STATUS (prefix: status-)
 *    Use with: .badge, .status-badge, .status-indicator
 *    Pattern: .status-{ok|ready|warning|critical|offline}
 *
 * 3. ALARM SEVERITY (prefix: alarm-)
 *    Use with: .badge, table rows
 *    Pattern: .alarm-{critical|warning|info}
 *
 * ============================================
 * USAGE EXAMPLES
 * ============================================
 *
 * PEMS Modes:
 *   <span class="badge mode-shore">Shore</span>
 *   <span class="badge mode-battery">Battery</span>
 *   <div class="metric-icon shore">...</div>
 *
 * System Status:
 *   <span class="badge status-warning">Warning</span>
 *   <span class="status-badge ok">All OK</span>
 *   <span class="status-indicator critical"></span>
 *
 * Alarms:
 *   <span class="badge alarm-critical">CRITICAL</span>
 *   <tr class="alarm-warning">...</tr>
 *
 * Utilities:
 *   <span class="text-status-ok">OK</span>
 *   <div class="bg-status-warning">...</div>
 *   <div class="card alert-warning-border">...</div>
 */

/* ============================================
   Mode Badges (PEMS Operational Modes)
   Solid background, white text
   ACCESSIBILITY: Includes icons for color-blind users
   ============================================ */

/* Shore Power Mode */
.mode-shore,
.pems-mode-shore,
.badge.mode-shore {
    background-color: var(--color-mode-shore) !important;
    color: var(--text-inverse) !important;
    border: none !important;
}
/* Icon prefix for shore mode */
.mode-shore::before,
.badge.mode-shore::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    content: "\f1e6 "; /* plug icon */
    margin-right: var(--space-1);
}

/* Battery Mode */
.mode-battery,
.pems-mode-battery,
.badge.mode-battery {
    background-color: var(--color-mode-battery) !important;
    color: #fff !important;
    border: none !important;
}
/* No icon for battery mode - text only */

/* Genset Mode */
.mode-genset,
.pems-mode-genset,
.badge.mode-genset {
    background-color: var(--color-mode-genset) !important;
    color: var(--text-inverse) !important;
    border: none !important;
}
/* Icon prefix for genset mode */
.mode-genset::before,
.badge.mode-genset::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    content: "\f135 "; /* rocket icon - represents generator */
    margin-right: var(--space-1);
}

/* Hybrid Mode */
.mode-hybrid,
.pems-mode-hybrid,
.badge.mode-hybrid {
    background-color: var(--color-mode-hybrid) !important;
    color: var(--text-inverse) !important;
    border: none !important;
}
/* Icon prefix for hybrid mode */
.mode-hybrid::before,
.badge.mode-hybrid::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    content: "\f0e7 "; /* bolt icon */
    margin-right: var(--space-1);
}

/* Offline/Unknown */
.mode-offline,
.mode-unknown,
.pems-mode-offline,
.badge.mode-offline {
    background-color: var(--color-mode-offline) !important;
    color: var(--text-inverse) !important;
    border: none !important;
}
/* Icon prefix for offline mode */
.mode-offline::before,
.badge.mode-offline::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    content: "\f05e "; /* ban icon */
    margin-right: var(--space-1);
}

/* Option to disable icons when text already includes icon */
.mode-shore.no-icon::before,
.mode-battery.no-icon::before,
.mode-genset.no-icon::before,
.mode-hybrid.no-icon::before,
.mode-offline.no-icon::before,
.badge.no-icon::before {
    content: none;
}

/* ============================================
   Status Badges (System Health)
   Light background with border for clarity
   ============================================ */

/* OK Status */
.status-ok,
.status-badge.ok,
.badge.status-ok {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
    border: 1px solid var(--color-success) !important;
}

/* Ready/Standby Status */
.status-ready,
.status-badge.ready,
.badge.status-ready {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
    border: 1px solid var(--color-info) !important;
}

/* Warning Status */
.status-warning,
.status-badge.warning,
.badge.status-warning {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
    border: 1px solid var(--color-warning) !important;
}

/* Critical Status */
.status-critical,
.status-badge.critical,
.badge.status-critical {
    background-color: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
    border: 1px solid var(--color-danger) !important;
}

/* Offline Status */
.status-offline,
.status-badge.offline,
.badge.status-offline {
    background-color: var(--color-neutral-bg) !important;
    color: var(--color-neutral-text) !important;
    border: 1px solid var(--color-neutral) !important;
}

/* ============================================
   Metric Card Icon Colors
   Base dimensions defined in metric-cards.css
   ============================================ */

.metric-icon.shore {
    background: var(--color-mode-shore) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.battery {
    background: var(--color-mode-battery) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.genset {
    background: var(--color-mode-genset) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.hybrid {
    background: var(--color-mode-hybrid) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.ok {
    background: var(--color-success) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.ready {
    background: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.warning {
    background: var(--color-warning) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.critical {
    background: var(--color-danger) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.offline {
    background: var(--color-neutral) !important;
    color: var(--text-inverse) !important;
}

.metric-icon.info {
    background: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

/* ============================================
   Alarm Severity Badges
   Solid background for high visibility
   ============================================ */

.alarm-critical,
.badge.alarm-critical {
    background-color: var(--color-danger) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--font-weight-semibold);
}

.alarm-warning,
.badge.alarm-warning {
    background-color: var(--color-warning) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--font-weight-semibold);
}

.alarm-info,
.badge.alarm-info {
    background-color: var(--color-info) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--font-weight-semibold);
}

/* Alarm count badges in navbar */
.alarm-badge {
    background-color: var(--color-danger) !important;
    color: var(--text-inverse) !important;
}

/* ============================================
   Status Indicators (Dots)
   ACCESSIBILITY: Includes icons for color-blind users
   ============================================ */

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    margin-right: var(--space-2);
    font-size: 10px;
    font-weight: bold;
    position: relative;
}

/* Add secondary visual indicator (icon) for accessibility */
.status-indicator::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 8px;
    color: var(--text-inverse);
}

.status-indicator.shore,
.status-indicator.ok {
    background-color: var(--color-success);
    box-shadow: 0 0 6px var(--color-success);
}
.status-indicator.shore::before,
.status-indicator.ok::before {
    content: "\f00c"; /* checkmark */
}

.status-indicator.battery,
.status-indicator.warning {
    background-color: var(--color-warning);
    box-shadow: 0 0 6px var(--color-warning);
}
.status-indicator.battery::before,
.status-indicator.warning::before {
    content: "\f071"; /* triangle-exclamation */
}

.status-indicator.genset,
.status-indicator.ready {
    background-color: var(--color-info);
    box-shadow: 0 0 6px var(--color-info);
}
.status-indicator.genset::before,
.status-indicator.ready::before {
    content: "\f111"; /* circle (filled) */
}

.status-indicator.critical {
    background-color: var(--color-danger);
    box-shadow: 0 0 6px var(--color-danger);
}
.status-indicator.critical::before {
    content: "\f00d"; /* xmark */
}

.status-indicator.offline {
    background-color: var(--color-neutral);
    box-shadow: 0 0 6px var(--color-neutral);
}
.status-indicator.offline::before {
    content: "\f068"; /* minus */
}

/* ============================================
   Text Color Utilities
   ============================================ */

.text-status-ok { color: var(--color-success) !important; }
.text-status-ready { color: var(--color-info) !important; }
.text-status-warning { color: var(--color-warning) !important; }
.text-status-critical { color: var(--color-danger) !important; }
.text-status-offline { color: var(--color-neutral) !important; }

/* ============================================
   Background Color Utilities
   ============================================ */

.bg-status-ok { background-color: var(--color-success-bg) !important; color: var(--color-success-text) !important; }
.bg-status-ready { background-color: var(--color-info-bg) !important; color: var(--color-info-text) !important; }
.bg-status-warning { background-color: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; }
.bg-status-critical { background-color: var(--color-danger-bg) !important; color: var(--color-danger-text) !important; }
.bg-status-offline { background-color: var(--color-neutral-bg) !important; color: var(--color-neutral-text) !important; }

/* ============================================
   Border Color Utilities
   ============================================ */

.border-status-ok { border-color: var(--color-success) !important; }
.border-status-ready { border-color: var(--color-info) !important; }
.border-status-warning { border-color: var(--color-warning) !important; }
.border-status-critical { border-color: var(--color-danger) !important; }
.border-status-offline { border-color: var(--color-neutral) !important; }

/* ============================================
   Card Alert Borders (for staleness warnings)
   ============================================ */

.card.alert-warning-border {
    border-left: 4px solid var(--color-warning) !important;
}

.card.alert-critical-border {
    border-left: 4px solid var(--color-danger) !important;
}

.card.alert-ok-border {
    border-left: 4px solid var(--color-success) !important;
}

/* ============================================
   HMI-Specific Status Colors
   ============================================ */

/* System card icons */
.system-icon.shore { background: var(--color-mode-shore) !important; }
.system-icon.battery { background: var(--color-mode-battery) !important; }
.system-icon.genset { background: var(--color-mode-genset) !important; }
.system-icon.hybrid { background: var(--color-mode-hybrid) !important; }

/* ============================================
   Bootstrap Override - Ensure consistency
   ============================================ */

/* Success (OK) states */
.badge.bg-success,
.alert.alert-success,
.btn.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

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

/* Warning states */
.badge.bg-warning,
.alert.alert-warning,
.btn.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: var(--text-inverse) !important;
}

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

/* Danger/Critical states */
.badge.bg-danger,
.alert.alert-danger,
.btn.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

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

/* Info/Ready states */
.badge.bg-info,
.alert.alert-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

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

/* Secondary/Offline states */
.badge.bg-secondary {
    background-color: var(--color-neutral) !important;
    border-color: var(--color-neutral) !important;
}

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

/* ============================================
   Table Row Status Colors
   ============================================ */

tr.status-ok,
tr.alarm-ok {
    background-color: rgba(72, 187, 120, 0.1) !important;
}

tr.status-warning,
tr.alarm-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

tr.status-critical,
tr.alarm-critical {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* ============================================
   Pulse Animation for Active Alarms
   ============================================ */

@keyframes pulse-critical {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
        opacity: 0.8;
    }
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
        opacity: 0.8;
    }
}

.badge.alarm-critical.active,
.status-indicator.critical.active {
    animation: pulse-critical 2s infinite;
}

.badge.alarm-warning.active,
.status-indicator.warning.active {
    animation: pulse-warning 2s infinite;
}

/* ============================================
   Responsive Adjustments
   ACCESSIBILITY: Maintain 44px minimum touch targets
   ============================================ */

@media (max-width: 768px) {
    .metric-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Keep visual size small but expand touch target to 44px minimum */
    .status-indicator {
        width: 14px;
        height: 14px;
        /* Expand touch target with padding while keeping visual size */
        padding: 15px;
        margin: -15px;
        margin-right: calc(var(--space-2) - 15px);
        box-sizing: content-box;
    }
    .status-indicator::before {
        font-size: 7px;
    }
}

/* Print styles moved to print.css */

/* ============================================
   Badge Size Utilities
   ============================================ */

.badge-sm {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
}

.badge-lg {
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-3);
}

.badge-xl {
    font-size: var(--font-size-lg);
    padding: var(--space-2) var(--space-4);
}

/* ============================================
   Focus Styles for Interactive Elements
   ACCESSIBILITY: Visible focus indicators for keyboard navigation
   ============================================ */

.badge:focus,
.badge:focus-visible,
.status-indicator:focus,
.status-indicator:focus-visible,
.status-badge:focus,
.status-badge:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 108, 165, 0.25);
}

/* ============================================
   Dark Mode Contrast Improvements
   WCAG AA compliance for badges in dark mode
   ============================================ */

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge.bg-warning {
    background-color: #d97706 !important; /* Darker amber for better contrast */
    color: #000 !important; /* Force dark text */
}

[data-theme="dark"] .pems-mode-badge.battery,
[data-theme="dark"] .badge.mode-battery {
    background-color: #a78bfa !important; /* Lighter violet */
    color: #000 !important;
}

/* Interactive status elements */
a .badge,
button .badge,
[role="button"] .badge,
.badge[onclick],
.badge[tabindex] {
    cursor: pointer;
}

a .badge:focus-visible,
button .badge:focus-visible,
[role="button"] .badge:focus-visible,
.badge[onclick]:focus-visible,
.badge[tabindex]:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ============================================
   ARIA & Screen Reader Utilities
   ============================================ */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-brand);
    color: var(--text-inverse);
    padding: var(--space-2) var(--space-3);
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}