/**
 * Server Health & Costs Styles
 * Uses admin-scoped variables to prevent accidental changes to public site
 * 
 * NOTE: All styles use --admin-* variables from admin-pages.css
 */

/* ========================================
   SYSTEM STATUS HEADER
   ======================================== */
.admin-page .mc-system-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--admin-spacing-md) var(--admin-spacing-lg);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-lg);
    margin-bottom: var(--admin-spacing-lg);
}

.admin-page .mc-status-left {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-md);
}

.admin-page .mc-status-label {
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-secondary);
}

.admin-page .mc-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-sm);
    padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
    border-radius: var(--admin-radius-md);
    font-size: var(--admin-font-size-sm);
    font-weight: var(--admin-font-weight-semibold);
}

.admin-page .mc-status-indicator.status-ok {
    background: rgba(34, 197, 94, 0.15);
    color: var(--admin-success);
}

.admin-page .mc-status-indicator.status-warn {
    background: rgba(245, 158, 11, 0.15);
    color: var(--admin-warning);
}

.admin-page .mc-status-indicator.status-crit {
    background: rgba(239, 68, 68, 0.15);
    color: var(--admin-error);
}

.admin-page .mc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: mc-status-pulse 2s ease-in-out infinite;
}

.admin-page .status-ok .mc-status-dot { background: var(--admin-success); }
.admin-page .status-warn .mc-status-dot { background: var(--admin-warning); }
.admin-page .status-crit .mc-status-dot { background: var(--admin-error); }

@keyframes mc-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.admin-page .mc-status-right {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-md);
}

.admin-page .mc-last-check {
    font-size: var(--admin-font-size-xs);
    color: var(--admin-text-muted);
}

.admin-page .mc-live-badge {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-xs);
    padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--admin-success);
    border-radius: var(--admin-radius-sm);
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    color: var(--admin-success);
}

.admin-page .mc-live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--admin-success);
    border-radius: 50%;
    animation: mc-status-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   GAUGE CARD COMPONENT
   ======================================== */
.admin-page .mc-gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--admin-spacing-md);
    margin-bottom: var(--admin-spacing-lg);
}

.admin-page .mc-gauge-card {
    position: relative;
    padding: var(--admin-spacing-lg);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-lg);
    transition: border-color var(--admin-duration-fast) var(--admin-ease-out);
}

.admin-page .mc-gauge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--admin-radius-lg) var(--admin-radius-lg) 0 0;
    background: var(--admin-border-medium);
}

.admin-page .mc-gauge-card.status-ok::before { background: var(--admin-success); }
.admin-page .mc-gauge-card.status-warn::before { background: var(--admin-warning); }
.admin-page .mc-gauge-card.status-crit::before { background: var(--admin-error); }

.admin-page .mc-gauge-card:hover {
    border-color: var(--admin-border-heavy);
}

.admin-page .mc-gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--admin-spacing-md);
}

.admin-page .mc-gauge-title {
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-secondary);
}

.admin-page .mc-gauge-badge {
    padding: 2px var(--admin-spacing-xs);
    border-radius: var(--admin-radius-sm);
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-bold);
}

.admin-page .mc-gauge-badge.badge-ok {
    background: rgba(34, 197, 94, 0.2);
    color: var(--admin-success);
}

.admin-page .mc-gauge-badge.badge-warn {
    background: rgba(245, 158, 11, 0.2);
    color: var(--admin-warning);
}

.admin-page .mc-gauge-badge.badge-crit {
    background: rgba(239, 68, 68, 0.2);
    color: var(--admin-error);
}

.admin-page .mc-gauge-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--admin-spacing-sm);
}

.admin-page .mc-gauge-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.admin-page .mc-gauge-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.admin-page .mc-gauge-ring .track {
    fill: none;
    stroke: var(--admin-border-medium);
    stroke-width: 8;
}

.admin-page .mc-gauge-ring .progress {
    fill: none;
    stroke: var(--admin-text-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 1s ease-out;
}

.admin-page .mc-gauge-card.status-ok .mc-gauge-ring .progress { stroke: var(--admin-success); }
.admin-page .mc-gauge-card.status-warn .mc-gauge-ring .progress { stroke: var(--admin-warning); }
.admin-page .mc-gauge-card.status-crit .mc-gauge-ring .progress { stroke: var(--admin-error); }

.admin-page .mc-gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--admin-font-mono);
    font-size: var(--admin-font-size-xl);
    font-weight: var(--admin-font-weight-bold);
    color: var(--admin-text-primary);
}

.admin-page .mc-gauge-detail {
    text-align: center;
    font-size: var(--admin-font-size-xs);
    color: var(--admin-text-muted);
    margin-bottom: var(--admin-spacing-sm);
}

.admin-page .mc-gauge-sparkline {
    height: 24px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-top: var(--admin-spacing-sm);
    border-top: var(--admin-border-thin) solid var(--admin-border-light);
}

.admin-page .mc-sparkline-bar {
    flex: 1;
    background: var(--admin-text-muted);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    opacity: 0.5;
}

.admin-page .mc-gauge-card.status-ok .mc-sparkline-bar { background: var(--admin-success); opacity: 0.6; }
.admin-page .mc-gauge-card.status-warn .mc-sparkline-bar { background: var(--admin-warning); opacity: 0.6; }
.admin-page .mc-gauge-card.status-crit .mc-sparkline-bar { background: var(--admin-error); opacity: 0.6; }

/* ========================================
   PROFIT/LOSS HERO SECTION
   ======================================== */
.admin-page .mc-profit-hero {
    padding: var(--admin-spacing-xl);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-left: 4px solid var(--admin-success);
    border-radius: var(--admin-radius-lg);
    margin-bottom: var(--admin-spacing-lg);
}

.admin-page .mc-profit-hero.profit-negative {
    border-left-color: var(--admin-error);
}

.admin-page .mc-profit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--admin-spacing-md);
}

.admin-page .mc-profit-label {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-sm);
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-secondary);
}

.admin-page .mc-profit-label::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--admin-success);
    border-radius: 50%;
}

.admin-page .mc-profit-hero.profit-negative .mc-profit-label::before {
    background: var(--admin-error);
}

.admin-page .mc-profit-badge {
    padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
    border-radius: var(--admin-radius-md);
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-bold);
    background: rgba(34, 197, 94, 0.15);
    color: var(--admin-success);
}

.admin-page .mc-profit-hero.profit-negative .mc-profit-badge {
    background: rgba(239, 68, 68, 0.15);
    color: var(--admin-error);
}

.admin-page .mc-profit-content {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-xl);
    flex-wrap: wrap;
}

.admin-page .mc-profit-value {
    font-family: var(--admin-font-mono);
    font-size: 2.5rem;
    font-weight: var(--admin-font-weight-bold);
    color: var(--admin-success);
    line-height: 1;
}

.admin-page .mc-profit-hero.profit-negative .mc-profit-value {
    color: var(--admin-error);
}

.admin-page .mc-profit-meta {
    display: flex;
    flex-direction: column;
    gap: var(--admin-spacing-xs);
}

.admin-page .mc-profit-meta-label {
    font-size: var(--admin-font-size-xs);
    color: var(--admin-text-muted);
}

.admin-page .mc-profit-meta-value {
    font-size: var(--admin-font-size-sm);
    color: var(--admin-text-secondary);
}

.admin-page .mc-profit-meter {
    flex: 1;
    min-width: 200px;
}

.admin-page .mc-meter-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--admin-spacing-sm);
    font-size: var(--admin-font-size-xs);
    color: var(--admin-text-muted);
}

.admin-page .mc-meter-bar {
    height: 8px;
    background: var(--admin-border-medium);
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
}

.admin-page .mc-meter-fill {
    height: 100%;
    background: var(--admin-success);
    border-radius: var(--admin-radius-sm);
    transition: width 1s ease-out;
}

.admin-page .mc-profit-hero.profit-negative .mc-meter-fill {
    background: var(--admin-error);
}

/* ========================================
   COST STAT CARDS
   ======================================== */
.admin-page .mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--admin-spacing-md);
    margin-bottom: var(--admin-spacing-lg);
}

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

@media (max-width: 600px) {
    .admin-page .mc-stat-grid { grid-template-columns: 1fr; }
}

.admin-page .mc-stat-card {
    padding: var(--admin-spacing-lg);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-lg);
    transition: border-color var(--admin-duration-fast) var(--admin-ease-out);
}

.admin-page .mc-stat-card:hover {
    border-color: var(--admin-border-heavy);
}

.admin-page .mc-stat-card.accent-amber { border-left: 3px solid var(--admin-warning); }
.admin-page .mc-stat-card.accent-cyan { border-left: 3px solid var(--admin-info); }
.admin-page .mc-stat-card.accent-green { border-left: 3px solid var(--admin-success); }
.admin-page .mc-stat-card.accent-purple { border-left: 3px solid #8b5cf6; }

.admin-page .mc-stat-label {
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    margin-bottom: var(--admin-spacing-sm);
}

.admin-page .mc-stat-value {
    font-family: var(--admin-font-mono);
    font-size: var(--admin-font-size-2xl);
    font-weight: var(--admin-font-weight-bold);
    color: var(--admin-text-primary);
    margin-bottom: var(--admin-spacing-xs);
}

.admin-page .mc-stat-card.accent-amber .mc-stat-value { color: var(--admin-warning); }
.admin-page .mc-stat-card.accent-green .mc-stat-value { color: var(--admin-success); }

.admin-page .mc-stat-trend {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-xs);
    font-size: var(--admin-font-size-xs);
    color: var(--admin-text-muted);
}

.admin-page .mc-stat-trend.trend-up { color: var(--admin-success); }
.admin-page .mc-stat-trend.trend-down { color: var(--admin-error); }

/* ========================================
   COST ALERT BANNER
   ======================================== */
.admin-page .mc-alert-banner {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-md);
    padding: var(--admin-spacing-md) var(--admin-spacing-lg);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--admin-error);
    border-radius: var(--admin-radius-lg);
    margin-bottom: var(--admin-spacing-lg);
}

.admin-page .mc-alert-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--admin-radius-md);
    color: var(--admin-error);
    font-size: var(--admin-font-size-lg);
}

.admin-page .mc-alert-content { flex: 1; }

.admin-page .mc-alert-title {
    font-weight: var(--admin-font-weight-semibold);
    color: var(--admin-error);
    margin-bottom: 2px;
}

.admin-page .mc-alert-message {
    font-size: var(--admin-font-size-sm);
    color: var(--admin-text-secondary);
}

.admin-page .mc-alert-badge {
    padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
    background: rgba(239, 68, 68, 0.2);
    border-radius: var(--admin-radius-md);
    font-size: var(--admin-font-size-sm);
    font-weight: var(--admin-font-weight-bold);
    color: var(--admin-error);
}

.admin-page .mc-alert-dismiss {
    padding: var(--admin-spacing-sm);
    background: transparent;
    border: none;
    color: var(--admin-text-muted);
    cursor: pointer;
}

.admin-page .mc-alert-dismiss:hover {
    color: var(--admin-text-primary);
}

/* ========================================
   CHARTS SECTION
   ======================================== */
.admin-page .mc-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--admin-spacing-lg);
    margin-bottom: var(--admin-spacing-lg);
}

@media (max-width: 992px) {
    .admin-page .mc-charts-grid { grid-template-columns: 1fr; }
}

.admin-page .mc-chart-panel {
    padding: var(--admin-spacing-lg);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-lg);
}

.admin-page .mc-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--admin-spacing-md);
}

.admin-page .mc-chart-title {
    font-size: var(--admin-font-size-sm);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-secondary);
}

.admin-page .mc-chart-container {
    position: relative;
    height: 200px;
}

/* ========================================
   DATA TABLES
   ======================================== */
.admin-page .mc-data-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-page .mc-data-table th {
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    text-align: left;
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    background: var(--admin-bg-surface);
    border-bottom: var(--admin-border-thin) solid var(--admin-border-light);
}

.admin-page .mc-data-table td {
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    font-size: var(--admin-font-size-sm);
    color: var(--admin-text-secondary);
    border-bottom: var(--admin-border-thin) solid var(--admin-border-light);
}

.admin-page .mc-data-table tr:hover td {
    background: var(--admin-bg-surface);
}

.admin-page .mc-data-table .margin-positive { color: var(--admin-success); }
.admin-page .mc-data-table .margin-warning { color: var(--admin-warning); }
.admin-page .mc-data-table .margin-negative { color: var(--admin-error); }

.admin-page .mc-inline-bar {
    display: inline-block;
    height: 6px;
    background: var(--admin-text-primary);
    border-radius: 3px;
    margin-left: var(--admin-spacing-sm);
    vertical-align: middle;
}

/* ========================================
   QUICK ACTIONS BAR
   ======================================== */
.admin-page .mc-actions-bar {
    display: flex;
    gap: var(--admin-spacing-sm);
    padding: var(--admin-spacing-md) var(--admin-spacing-lg);
    background: var(--admin-bg-secondary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-lg);
    margin-bottom: var(--admin-spacing-lg);
}

.admin-page .mc-action-btn {
    display: flex;
    align-items: center;
    gap: var(--admin-spacing-sm);
    padding: var(--admin-spacing-sm) var(--admin-spacing-md);
    background: var(--admin-bg-primary);
    border: var(--admin-border-thin) solid var(--admin-border-medium);
    border-radius: var(--admin-radius-md);
    font-size: var(--admin-font-size-sm);
    font-weight: var(--admin-font-weight-medium);
    color: var(--admin-text-secondary);
    cursor: pointer;
    transition: all var(--admin-duration-fast) var(--admin-ease-out);
}

.admin-page .mc-action-btn:hover {
    background: var(--admin-brand-primary);
    border-color: var(--admin-brand-primary);
    color: var(--admin-bg-primary);
}

.admin-page .mc-action-btn i {
    font-size: var(--admin-font-size-sm);
}

/* ========================================
   MARGIN GAUGE
   ======================================== */
.admin-page .mc-margin-gauge {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--admin-spacing-sm);
}

.admin-page .mc-margin-gauge svg {
    transform: rotate(-90deg);
}

.admin-page .mc-margin-gauge .track {
    fill: none;
    stroke: var(--admin-border-medium);
    stroke-width: 6;
}

.admin-page .mc-margin-gauge .fill {
    fill: none;
    stroke: var(--admin-success);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 226.2;
    stroke-dashoffset: 226.2;
    transition: stroke-dashoffset 1s ease-out;
}

.admin-page .mc-margin-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--admin-font-mono);
    font-size: var(--admin-font-size-base);
    font-weight: var(--admin-font-weight-bold);
    color: var(--admin-text-primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .admin-page .mc-system-status {
        flex-direction: column;
        gap: var(--admin-spacing-sm);
        text-align: center;
    }

    .admin-page .mc-status-left,
    .admin-page .mc-status-right {
        justify-content: center;
    }

    .admin-page .mc-profit-hero {
        padding: var(--admin-spacing-md);
    }

    .admin-page .mc-profit-value {
        font-size: 2rem;
    }

    .admin-page .mc-gauge-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-page .mc-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-page .mc-actions-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .admin-page .mc-gauge-grid {
        grid-template-columns: 1fr;
    }

    .admin-page .mc-profit-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-page .mc-profit-meter {
        width: 100%;
    }
}