/**
 * EHS Training Management System - Styles
 */

/* Additional styles for the training app */

/* Course Cards */
.courses-container {
    animation: fadeIn 0.3s ease-in;
}

/* Base training-app layout. Keep these rules in the shipped stylesheet so
 * the student shell does not fall back to browser defaults. */
:root {
    --training-navy: #193d5a;
    --training-blue: #2f73d9;
    --training-ink: #17324d;
    --training-muted: #66778a;
    --training-border: #dce5ee;
    --training-background: #f4f7fb;
    --training-surface: #ffffff;
}

body {
    background: var(--training-background);
    color: var(--training-ink);
}

#training-app { min-height: 100vh; }

.app-nav {
    background: var(--training-navy);
    color: #fff;
    box-shadow: 0 2px 12px rgba(25, 61, 90, .16);
}

.nav-container {
    width: min(1180px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-logo {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.nav-link {
    color: rgba(255, 255, 255, .82);
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active { color: #fff; background: rgba(255, 255, 255, .14); }

.user-menu { display: flex; align-items: center; gap: 12px; }

.user-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1c453;
    color: var(--training-navy);
    font-size: 12px;
    font-weight: 800;
}

.app-main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 42px 0 64px;
}

.welcome-section { margin-bottom: 28px; }

.welcome-section h1,
.page-header h1,
.calendar-container h1,
.profile-container h1,
.course-detail h1 {
    color: var(--training-ink);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
    margin: 0 0 8px;
}

.subtitle { color: var(--training-muted); margin: 0; font-size: 16px; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card,
.content-card,
.certificate-card,
.course-card {
    background: var(--training-surface);
    border: 1px solid var(--training-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(25, 61, 90, .07);
}

.stat-card { padding: 22px; }
.stat-icon { font-size: 24px; margin-bottom: 13px; }
.stat-value { color: var(--training-ink); font-size: 30px; font-weight: 800; line-height: 1; }
.stat-label { color: var(--training-muted); margin-top: 8px; font-size: 13px; font-weight: 600; }
.content-card { margin-bottom: 22px; overflow: hidden; }
.card-header { border-bottom: 1px solid var(--training-border); padding: 18px 22px; }
.card-title { color: var(--training-ink); font-size: 20px; margin: 0; }
.activity-list, .deadline-list, .compliance-content { padding: 8px 22px; }

.activity-item, .deadline-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f5;
}

.activity-item:last-child, .deadline-item:last-child { border-bottom: 0; }
.activity-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef5ff; }
.activity-content p, .deadline-content p { margin: 0; color: var(--training-ink); font-weight: 700; }
.activity-content small, .deadline-content small { color: var(--training-muted); }
.deadline-date { min-width: 52px; padding: 7px; border-radius: 8px; background: #eef5ff; color: var(--training-navy); text-align: center; }
.date-day { font-size: 20px; font-weight: 800; line-height: 1; }
.date-month { font-size: 11px; font-weight: 700; text-transform: uppercase; }

.certificates-grid, .courses-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.certificate-card, .course-card { padding: 22px; }
.cert-header, .cert-details, .cert-actions { margin-bottom: 14px; }
.cert-title, .course-title { color: var(--training-ink); margin: 0 0 8px; }
.cert-number, .course-meta, .cert-details p { color: var(--training-muted); font-size: 14px; }

.btn {
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary { background: var(--training-navy); color: #fff; }
.btn-primary:hover { background: #102e47; color: #fff; }
.btn-secondary { background: #eef3f8; color: var(--training-navy); }
.btn-secondary:hover { background: #dfe9f2; color: var(--training-navy); }
.app-loading, .error-page, .error-container { padding: 56px 24px; text-align: center; }
.loader { width: 34px; height: 34px; margin: 0 auto; border: 4px solid #dce8f3; border-top-color: var(--training-blue); border-radius: 50%; animation: training-spin .8s linear infinite; }
@keyframes training-spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    .nav-container { width: min(100% - 24px, 680px); flex-wrap: wrap; gap: 10px 14px; padding: 13px 0; }
    .nav-menu { order: 3; flex-basis: 100%; overflow-x: auto; }
    .app-main { width: min(100% - 24px, 680px); padding-top: 28px; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .dashboard-grid, .certificates-grid, .courses-grid { grid-template-columns: 1fr; }
    .user-avatar { display: none; }
}

/* EHS Design System foundation. Keep the existing class and data contracts,
 * but give every student route the shared navy, green, yellow, and status
 * language from the reviewed design system. */
:root {
    --ehs-bg: oklch(98% 0.004 255);
    --ehs-surface: oklch(100% 0 0);
    --ehs-surface-muted: oklch(96% 0.006 255);
    --ehs-border: oklch(90% 0.01 255);
    --ehs-border-strong: oklch(84% 0.012 255);
    --ehs-text: oklch(24% 0.03 258);
    --ehs-text-muted: oklch(46% 0.02 258);
    --ehs-primary: oklch(32% 0.09 258);
    --ehs-primary-hover: oklch(26% 0.09 258);
    --ehs-success: oklch(45% 0.13 148);
    --ehs-warning: oklch(83% 0.16 92);
    --ehs-error: oklch(52% 0.21 25);
    --ehs-focus: oklch(55% 0.1 258 / 0.35);
    --ehs-shadow-md: 0 2px 10px rgba(20, 30, 50, 0.08);
    --ehs-shadow-lg: 0 12px 32px rgba(20, 30, 50, 0.14);
}

body {
    background: var(--ehs-bg);
    color: var(--ehs-text);
    font-family: 'Lato', sans-serif;
}

.app-nav {
    background: var(--ehs-surface);
    color: var(--ehs-text);
    border-bottom: 1px solid var(--ehs-border);
    box-shadow: var(--ehs-shadow-md);
}

.nav-container { min-height: 64px; width: min(1200px, calc(100% - 48px)); }
.nav-logo { color: var(--ehs-primary); font-size: 17px; font-weight: 900; }
.nav-link { color: var(--ehs-text-muted); border-radius: 8px; font-size: 13px; font-weight: 700; }
.nav-link:hover, .nav-link.active { color: var(--ehs-primary); background: var(--ehs-surface-muted); }
.user-avatar { background: var(--ehs-primary); color: var(--ehs-surface); }
.app-main { width: min(1200px, calc(100% - 48px)); padding: 36px 0 80px; }
.welcome-section h1, .page-header h1, .calendar-container h1, .profile-container h1, .course-detail h1 { color: var(--ehs-text); font-size: clamp(26px, 3vw, 34px); font-weight: 900; }
.subtitle { color: var(--ehs-text-muted); font-size: 14px; }
.stat-card, .content-card, .certificate-card, .course-card { border: 1px solid var(--ehs-border); border-radius: 12px; box-shadow: var(--ehs-shadow-md); }
.stat-card { padding: 20px; }
.stat-label, .cert-number, .course-meta, .cert-details p { color: var(--ehs-text-muted); }
.card-header { border-bottom-color: var(--ehs-border); }
.card-title, .cert-title, .course-title { color: var(--ehs-text); font-weight: 700; }
.btn { min-height: 38px; border-radius: 8px; font-size: 13.5px; font-weight: 700; }
.btn-primary { background: var(--ehs-primary); color: var(--ehs-surface); }
.btn-primary:hover { background: var(--ehs-primary-hover); }
.btn-secondary { background: var(--ehs-surface-muted); color: var(--ehs-text); border: 1px solid var(--ehs-border); }
.btn-secondary:hover { background: var(--ehs-border); color: var(--ehs-text); }
.search-input, input, select, textarea { border-color: var(--ehs-border); border-radius: 8px; }
.search-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--ehs-primary); outline: 3px solid var(--ehs-focus); outline-offset: 1px; }
.loader { border-color: var(--ehs-border); border-top-color: var(--ehs-primary); }

@media (max-width: 820px) {
    .nav-container, .app-main { width: min(100% - 24px, 680px); }
}

/* Keep the compliance panel legible after all surface rules. */
.compliance-card {
    background: linear-gradient(135deg, var(--ehs-primary) 0%, oklch(42% 0.12 258) 100%) !important;
    color: var(--ehs-surface);
}
.compliance-card .card-title,
.compliance-card .compliance-details p,
.compliance-card .percentage { color: var(--ehs-surface) !important; }
.compliance-card .card-header { border-bottom-color: rgba(255,255,255,0.22); }

.lesson-list { margin: 0; padding: 8px 22px 8px 42px; }
.lesson-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ehs-border); }
.lesson-item:last-child { border-bottom: 0; }
.lesson-status { color: var(--ehs-text-muted); font-size: 0.875rem; white-space: nowrap; }

@media (max-width: 480px) {
    .lesson-item { align-items: flex-start; gap: 10px; }
    .lesson-status { flex: 0 0 auto; }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-header h1 {
    margin: 0;
    color: var(--gray-900);
}

.search-bar {
    width: 300px;
}

.search-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.course-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.course-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.course-content {
    padding: 20px;
}

.course-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--gray-900);
}

.course-excerpt {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.course-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--gray-500);
}

.progress-bar {
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    margin-bottom: 15px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Certificates Page */
.certificates-container {
    animation: fadeIn 0.3s ease-in;
}

.cert-stats {
    display: flex;
    gap: 20px;
}

.cert-stats .stat {
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.certificate-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    transition: border-color 0.2s;
}

.certificate-card.active {
    border-color: var(--secondary-color);
}

.certificate-card.expired {
    border-color: var(--gray-400);
    opacity: 0.8;
}

.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

.cert-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.cert-number {
    font-size: 12px;
    color: var(--gray-500);
    font-family: monospace;
}

.cert-details p {
    margin: 5px 0;
    font-size: 14px;
    color: var(--gray-600);
}

.cert-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Dashboard Specific */
.welcome-section {
    margin-bottom: 30px;
}

.welcome-section h1 {
    margin: 0 0 5px 0;
    color: var(--gray-900);
}

.subtitle {
    color: var(--gray-600);
    font-size: 16px;
    margin: 0;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.activity-icon {
    font-size: 20px;
}

.activity-content p {
    margin: 0;
    font-weight: 500;
}

.activity-content small {
    color: var(--gray-500);
}

/* Deadline List */
.deadline-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.deadline-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.deadline-date {
    background: var(--gray-100);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    min-width: 60px;
}

.date-day {
    font-size: 20px;
    font-weight: 700;
    color: var(--danger-color);
}

.date-month {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--gray-600);
}

.deadline-content p {
    margin: 0;
    font-weight: 500;
}

.deadline-content small {
    color: var(--gray-500);
}

/* Compliance Card */
.compliance-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0052A3 100%);
    color: white;
}

.compliance-card .card-header {
    border-bottom-color: rgba(255,255,255,0.2);
}

.compliance-card .card-title {
    color: white;
}

.compliance-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.compliance-chart {
    position: relative;
    width: 120px;
    height: 120px;
}

.chart-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        rgba(255,255,255,0.8) calc(var(--progress) * 3.6deg),
        rgba(255,255,255,0.2) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chart-progress::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--primary-color);
    border-radius: 50%;
    z-index: -1;
}

.percentage {
    font-size: 24px;
    font-weight: 700;
}

.compliance-details p {
    margin: 5px 0;
    opacity: 0.9;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Final token pass for course and certificate views. This sits after the
 * legacy selectors so the reviewed design language wins without changing
 * their markup or data behavior. */
.course-card,
.certificate-card,
.stat-card,
.content-card {
    background: var(--ehs-surface) !important;
    border: 1px solid var(--ehs-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ehs-shadow-md) !important;
}

.course-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ehs-shadow-lg) !important;
}

.course-title,
.cert-header h3,
.cert-title,
.card-title,
.welcome-section h1,
.page-header h1 {
    color: var(--ehs-text) !important;
    font-weight: 900;
}

.course-excerpt,
.course-meta,
.cert-number,
.cert-details p,
.activity-content small,
.deadline-content small,
.subtitle {
    color: var(--ehs-text-muted) !important;
}

.progress-bar { background: var(--ehs-surface-muted); }
.progress-fill { background: var(--ehs-primary); }

/* Utility Classes */
.text-danger {
    color: var(--danger-color);
}

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

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .courses-grid,
    .certificates-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .search-bar {
        width: 100%;
    }
    
    .compliance-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cert-stats {
        flex-wrap: wrap;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-100: #1a1a1a;
        --gray-200: #2d2d2d;
        --gray-300: #404040;
        --gray-400: #525252;
        --gray-500: #737373;
        --gray-600: #8a8a8a;
        --gray-700: #a3a3a3;
        --gray-800: #d4d4d4;
        --gray-900: #f5f5f5;
        --light-color: #262626;
    }
    
    body {
        background-color: #0a0a0a;
    }
    
    .course-card,
    .certificate-card,
    .content-card,
    .stat-card {
        background: var(--gray-100);
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    
.app-nav {
        background: var(--gray-100);
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
}

/* Keep the compliance panel legible after all surface rules. */
.compliance-card {
    background: linear-gradient(135deg, var(--ehs-primary) 0%, oklch(42% 0.12 258) 100%) !important;
    color: var(--ehs-surface);
}
.compliance-card .card-title,
.compliance-card .compliance-details p,
.compliance-card .percentage { color: var(--ehs-surface) !important; }
.compliance-card .card-header { border-bottom-color: rgba(255,255,255,0.22); }