/*
 * Metric Cards CSS
 * Shared styles for metric cards used across the dashboard
 *
 * DEPENDENCY: Requires design-tokens.css to be loaded first
 */

/* ============================================
   Base Metric Card
   ============================================ */

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    /* Ensure consistent heights in grid layouts */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.metric-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.metric-card.clickable {
    cursor: pointer;
}

/* ACCESSIBILITY: Focus styles for keyboard navigation */
.metric-card.clickable:focus,
.metric-card.clickable:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 108, 165, 0.25);
}

/* Ensure clickable cards are keyboard accessible */
.metric-card.clickable[tabindex] {
    cursor: pointer;
}

/* Ensure clickable cards have proper ARIA attributes */
.metric-card.clickable[role="button"],
.metric-card.clickable[tabindex] {
    /* Visual indication it's interactive */
    position: relative;
}

.metric-card.clickable[role="button"]::after,
.metric-card.clickable[tabindex]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: box-shadow var(--transition-normal);
}

.metric-card.clickable[role="button"]:focus-visible::after,
.metric-card.clickable[tabindex]:focus-visible::after {
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

/* ============================================
   Metric Card Icon
   ============================================ */

.metric-icon {
    width: var(--space-12);  /* 48px */
    height: var(--space-12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

/* Small variant for compact layouts (32px) */
.metric-icon--sm {
    width: var(--space-8);  /* 32px */
    height: var(--space-8);
    font-size: var(--font-size-base);
}

/* Large variant for overview pages (56px) */
.metric-icon--lg {
    width: 56px;
    height: 56px;
    font-size: var(--font-size-2xl);
}

/* ============================================
   Metric Card Labels & Values
   ============================================ */

.metric-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.metric-value {
    font-size: var(--font-size-metric);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.metric-value--lg {
    font-size: var(--font-size-3xl);
}

.metric-value--xl {
    font-size: var(--font-size-4xl);
}

.metric-subtitle {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    line-height: 1.3;
    flex-grow: 1; /* Push metric-detail to bottom for consistent card heights */
}

.metric-detail {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* ============================================
   Key Metrics Grid
   ============================================ */

.key-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1200px) {
    .key-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .key-metrics {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   System Cards Grid
   ============================================ */

.system-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.system-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    /* Ensure consistent heights in grid layouts */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.system-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.system-icon {
    width: 28px;
    height: 28px;
    background: var(--color-brand);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.system-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.system-status {
    text-align: center;
    padding: var(--space-2);
    background: var(--bg-table-stripe);
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .system-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .system-grid {
        grid-template-columns: 1fr;
    }
    .metric-card,
    .system-card {
        padding: var(--space-2);
    }
    .metric-card .metric-value,
    .system-card .metric-value {
        font-size: var(--font-size-2xl);
    }
}

/* ============================================
   Status Badge (inline status indicators)
   ============================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
}

/* Status badge colors defined in status-colors.css */

/* ============================================
   Operations Container
   ============================================ */

.ops-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
}

.ops-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--border-default);
}

.ops-title {
    font-size: var(--font-size-metric);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.ops-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================
   Graph Links
   ============================================ */

.graph-link {
    transition: color var(--transition-normal);
    opacity: 0.7;
}

.graph-link:hover {
    color: var(--color-brand) !important;
    opacity: 1;
    transform: scale(1.1);
}

.section-graph-link {
    transition: all var(--transition-normal);
    opacity: 0.7;
}

.section-graph-link:hover {
    color: var(--color-brand-dark) !important;
    opacity: 1;
    transform: scale(1.15);
}

/* ============================================
   System Mode Display
   ============================================ */

.system-mode {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-sm);
    padding: var(--space-1-half) var(--space-3);
    margin-top: var(--space-1-half);
}

.mode-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xs);
    color: var(--color-info-text);
    margin-bottom: 2px;
}

.mode-flow {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ============================================
   Staleness Warning Styles
   ============================================ */

.stale-warning {
    border-color: var(--color-danger) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--color-danger-bg) 100%) !important;
}

.stale-caution {
    border-color: var(--color-warning) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--color-warning-bg) 100%) !important;
}

.stale-warning .metric-value,
.stale-warning .power-value,
.stale-caution .metric-value,
.stale-caution .power-value {
    animation: pulse-stale 2s infinite;
}

@keyframes pulse-stale {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   Dark Mode Adjustments
   ============================================ */

[data-theme="dark"] .metric-card {
    background: var(--bg-card);
    border-color: var(--border-default);
}

[data-theme="dark"] .metric-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .metric-value {
    color: var(--text-primary);
}

[data-theme="dark"] .metric-subtitle,
[data-theme="dark"] .metric-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .system-card {
    background: var(--bg-card);
    border-color: var(--border-default);
}

[data-theme="dark"] .system-header {
    border-color: var(--border-default);
}

[data-theme="dark"] .system-title {
    color: var(--text-primary);
}

[data-theme="dark"] .system-status {
    background: var(--bg-hover);
}

[data-theme="dark"] .ops-header {
    border-color: var(--border-default);
}

[data-theme="dark"] .ops-title {
    color: var(--text-primary);
}

[data-theme="dark"] .ops-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .system-mode {
    background: rgba(66, 153, 225, 0.15);
    border-color: rgba(66, 153, 225, 0.3);
}

[data-theme="dark"] .mode-title {
    color: var(--color-brand-light);
}

[data-theme="dark"] .stale-warning {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.15) 100%) !important;
}

[data-theme="dark"] .stale-caution {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
}

/* ============================================
   Overview Page - Large Glanceable Cards
   Used on /overview for at-a-glance monitoring
   ============================================ */

.overview-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-default);
}

.overview-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.overview-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Large Status Cards Grid */
.overview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.overview-card {
    background: var(--bg-card);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: inherit;
}

/* Overview card status variants */
.overview-card.status-ok {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(72, 187, 120, 0.05) 100%);
}

.overview-card.status-warning {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.1) 100%);
}

.overview-card.status-critical {
    border-color: var(--color-danger);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.1) 100%);
}

/* Overview card elements */
.overview-card .card-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
}

.overview-card .card-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.overview-card .card-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.overview-card .card-subtext {
    font-size: var(--font-size-base);
    color: var(--text-muted);
}

/* Status-specific subtext colors */
.overview-card.status-warning .card-subtext {
    color: var(--color-warning);
}

.overview-card.status-critical .card-subtext {
    color: var(--color-danger);
}

/* Small Cards Row */
.overview-cards-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.overview-card-small {
    background: var(--bg-card);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overview-card-small:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: inherit;
}

.overview-card-small .card-value {
    font-size: var(--font-size-3xl);
}

/* PEMS Dual Mode Display (when port/starboard differ) */
.pems-dual-mode {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    align-items: center;
}

.pems-side {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pems-side-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    min-width: 1rem;
}

.pems-mode-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
}

/* Mode colors - match status-colors.css */
.pems-mode-badge.mode-shore {
    background: var(--color-mode-shore-bg);
    color: var(--color-mode-shore-text);
}

.pems-mode-badge.mode-battery {
    background: var(--color-mode-battery-bg);
    color: var(--color-mode-battery-text);
}

.pems-mode-badge.mode-genset {
    background: var(--color-mode-genset-bg);
    color: var(--color-mode-genset-text);
}

.pems-mode-badge.mode-hybrid {
    background: var(--color-mode-hybrid-bg);
    color: var(--color-mode-hybrid-text);
}

.pems-mode-badge.mode-offline,
.pems-mode-badge.mode-unknown {
    background: var(--color-mode-offline-bg);
    color: var(--color-mode-offline-text);
}

/* View Toggle Link */
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all var(--transition-normal);
}

.view-toggle:hover {
    background: var(--bg-hover);
    color: var(--color-brand);
    text-decoration: none;
}

/* Overview Responsive */
@media (max-width: 992px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }
    .overview-cards-small {
        grid-template-columns: 1fr;
    }
    .overview-card .card-value {
        font-size: var(--font-size-3xl);
    }
    .overview-card-small .card-value {
        font-size: var(--font-size-2xl);
    }
}

/* Overview Dark Mode */
[data-theme="dark"] .overview-card.status-ok {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(72, 187, 120, 0.15) 100%);
}

[data-theme="dark"] .overview-card.status-warning {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.15) 100%);
}

[data-theme="dark"] .overview-card.status-critical {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.15) 100%);
}