/* ============================================================================
   Training Module Design Tokens & Styles
   ? 2026 Havto Limited. All rights reserved.
   ============================================================================ */

/* Design Tokens - Aligned with MudBlazor theme system */
:root {
    --training-expired-color: var(--hav-error-text);
    --training-warning-color: var(--hav-warning-text);
    --training-success-color: var(--hav-success-text);
    --training-info-color: var(--hav-info-text);
    --training-secondary-color: var(--hav-text-muted);
}

/* ============================================================================
   Expiry Status Classes
   ============================================================================ */

/* Expired training records (past expiry date) */
.expiry-expired {
    color: var(--training-expired-color);
    font-weight: 500;
}

/* Expiring soon (within 30 days) */
.expiry-warning {
    color: var(--training-warning-color);
    font-weight: 500;
}

/* Current/valid training */
.expiry-current {
    color: var(--training-success-color);
    font-weight: 400;
}

/* ============================================================================
   Status Badge Variants (for custom chips)
   ============================================================================ */

.training-status-chip {
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

    .training-status-chip.expired {
        background-color: var(--hav-error);
        color: var(--hav-on-error);
    }

    .training-status-chip.expiring {
        background-color: var(--hav-warning);
        color: var(--hav-on-warning);
    }

    .training-status-chip.current {
        background-color: var(--hav-success);
        color: var(--hav-on-success);
    }

    .training-status-chip.pending {
        background-color: var(--hav-info);
        color: var(--hav-on-info);
    }

/* ============================================================================
   Induction Progress Styles
   ============================================================================ */

.induction-progress-bar {
    background-color: var(--hav-surface-raised);
    border-radius: 0;
    overflow: hidden;
}

.induction-progress-fill {
    background-color: var(--training-success-color);
    height: 8px;
    transition: width 0.3s ease;
}

    .induction-progress-fill.overdue {
        background-color: var(--training-expired-color);
    }

/* ============================================================================
   Certificate Badge Styles
   ============================================================================ */

.certificate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 2px;
    background-color: var(--hav-success);
    color: var(--hav-on-success);
    font-size: 0.7rem;
    font-weight: 500;
}

    .certificate-badge.expired {
        background-color: var(--hav-error);
        color: var(--hav-on-error);
    }

/* ============================================================================
   Utility Classes
   ============================================================================ */

.training-days-remaining {
    font-size: 0.75rem;
    color: var(--training-secondary-color);
    font-style: italic;
}

    .training-days-remaining.critical {
        color: var(--training-expired-color);
        font-weight: 500;
    }

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 600px) {
    .training-status-chip {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .certificate-badge {
        font-size: 0.65rem;
    }
}