/**
 * 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); }

/* Keep the public training shell legible even when a theme or role-specific
 * stylesheet adds a darker navigation surface later in the cascade. */
#training-app .app-nav { background: var(--ehs-surface) !important; color: var(--ehs-text) !important; }
#training-app .app-nav .nav-logo { color: var(--ehs-primary) !important; }
#training-app .app-nav .nav-link { color: var(--ehs-text-muted) !important; }
#training-app .app-nav .nav-link:hover,
#training-app .app-nav .nav-link.active { color: var(--ehs-primary) !important; background: var(--ehs-surface-muted) !important; }
#training-app .app-nav .btn-secondary { background: var(--ehs-surface-muted) !important; color: var(--ehs-text) !important; border-color: var(--ehs-border) !important; }
#training-app .app-nav .btn-secondary:hover { background: var(--ehs-border) !important; color: var(--ehs-text) !important; }

@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); }

/* Keep the build marker readable when the parent theme stylesheet is cached. */
.ehs-build-meta { color: #4b5563 !important; opacity: 1 !important; }

/* Keep native LearnDash shortcode output inside the training app surface. */
.learndash-shortcode-content { padding: 24px; overflow-x: auto; }
.learndash-shortcode-content .ld-profile-wrapper,
.learndash-shortcode-content .learndash-wrapper { max-width: 100%; }
.learndash-shortcode-content a { color: var(--ehs-primary); }
.learndash-shortcode-content .ld-alert-messages { color: #8a4f00 !important; }
.learndash-shortcode-content .ld-profile__saved-cards-action,
.learndash-shortcode-content .ld-profile__saved-cards-action:hover { background: #247a2c !important; color: #ffffff !important; }
.learndash-shortcode-content input,
.learndash-shortcode-content select,
.learndash-shortcode-content button { font: inherit; }
.native-course-list .ld-course-list-items { margin: 0; padding: 0; list-style: none; }
.native-course-list .ld-course-list-items > .ld_course_grid { margin-bottom: 20px; }
.native-course-list .ld_course_grid .thumbnail { height: 100%; }
.native-course-list .ld_course_grid .entry-title a { color: var(--ehs-text); }
.native-course-list a.btn-primary,
.native-course-list a.btn-primary:hover,
.native-course-list a.btn-primary:focus { color: var(--ehs-surface) !important; background: var(--ehs-primary) !important; }

.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); }


/* ==========================================================================
   Student SPA shell — align with site nav + ehs-design-tokens + role home
   (overrides older gray-* / training-blue dual system)
   ========================================================================== */
body.ehs-training-app-shell,
body.ehs-training-app-shell .site,
html body.ehs-training-app-shell {
  background: var(--ehs-bg, #f7fafc) !important;
  color: var(--ehs-text, #1e293b);
  font-family: var(--ehs-font, Lato, system-ui, sans-serif);
}

#training-app.ehs-training-app,
#training-app {
  --training-navy: var(--ehs-primary-hex, #1b365d);
  --training-blue: var(--ehs-primary-hex, #1b365d);
  --training-ink: var(--ehs-text-hex, #1e293b);
  --training-muted: #64748b;
  --training-border: var(--ehs-border, #e2e8f0);
  --training-background: var(--ehs-bg, #f7fafc);
  --training-surface: var(--ehs-surface, #fff);
  --primary-color: var(--ehs-primary-hex, #1b365d);
  --secondary-color: var(--ehs-success-hex, #2e7d32);
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-900: var(--ehs-text-hex, #1e293b);
  min-height: 100vh;
  background: transparent;
}

#training-app .app-main,
#training-app .ehs-training-app__main {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 1.75rem 0 4rem;
}

/* Hero matches ehs-home-hero language */
#training-app .ehs-dash__hero,
#training-app .welcome-section.ehs-dash__hero {
  margin-bottom: 1.35rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--ehs-border, #e2e8f0);
  border-radius: 1rem;
  background: linear-gradient(180deg, #fff, var(--ehs-surface-muted, #f8fafc));
  box-shadow: var(--ehs-shadow-md, 0 2px 10px rgba(20, 30, 50, 0.08));
}

#training-app .ehs-dash__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ehs-primary-hex, #1b365d);
}

#training-app .ehs-dash__title,
#training-app .welcome-section h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ehs-text-hex, #1e293b);
}

#training-app .ehs-dash__lede,
#training-app .subtitle {
  margin: 0;
  color: var(--ehs-text-muted, #64748b);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Stat cards — same family as ehs-home-stat */
#training-app .dashboard-grid,
#training-app .ehs-dash__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

#training-app .stat-card,
#training-app .ehs-dash__stat {
  background: #fff;
  border: 1px solid var(--ehs-border, #e2e8f0);
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#training-app .stat-icon { display: none; }

#training-app .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ehs-primary-hex, #1b365d);
}

#training-app .stat-unit {
  font-size: 0.95rem;
  font-weight: 700;
  margin-left: 0.1rem;
  color: var(--ehs-text-muted, #64748b);
}

#training-app .stat-label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ehs-text-muted, #64748b);
  text-transform: none;
}

#training-app .ehs-dash__stat--progress .stat-value { color: #b45309; }
#training-app .ehs-dash__stat--certs .stat-value { color: var(--ehs-success-hex, #2e7d32); }

/* Panels */
#training-app .content-card,
#training-app .ehs-dash__panel,
#training-app .course-card,
#training-app .certificate-card {
  background: #fff;
  border: 1px solid var(--ehs-border, #e2e8f0);
  border-radius: 0.9rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  margin-bottom: 1rem;
  overflow: hidden;
}

#training-app .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--ehs-border, #e2e8f0);
  background: var(--ehs-surface-muted, #f8fafc);
}

#training-app .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ehs-text-hex, #1e293b);
}

#training-app .activity-list,
#training-app .deadline-list,
#training-app .compliance-content {
  padding: 0.35rem 1.15rem 0.85rem;
}

#training-app .activity-item,
#training-app .deadline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ehs-border, #e2e8f0);
}

#training-app .activity-item:last-child,
#training-app .deadline-item:last-child {
  border-bottom: 0;
}

#training-app .activity-content p,
#training-app .deadline-content p {
  margin: 0;
  font-weight: 700;
  color: var(--ehs-text-hex, #1e293b);
  font-size: 0.95rem;
}

#training-app .activity-content small,
#training-app .deadline-content small,
#training-app .ehs-dash__muted {
  color: var(--ehs-text-muted, #64748b);
  font-size: 0.82rem;
}

/* Status badges (no emoji) */
#training-app .ehs-dash__badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

#training-app .ehs-dash__badge--ok {
  background: #e8f5e9;
  color: #15803d;
}

#training-app .ehs-dash__badge--progress {
  background: #e0f2fe;
  color: #0369a1;
}

#training-app .ehs-dash__badge--warn {
  background: #fffbeb;
  color: #b45309;
}

#training-app .deadline-date {
  min-width: 3.25rem;
  padding: 0.45rem 0.35rem;
  border-radius: 0.55rem;
  background: var(--ehs-primary-soft, #eef2ff);
  color: var(--ehs-primary-hex, #1b365d);
  text-align: center;
  border: 1px solid transparent;
}

#training-app .deadline-item--urgent .deadline-date {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

#training-app .date-day {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

#training-app .date-month {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Compliance — surface card, not a second navy chrome bar */
#training-app .compliance-card,
#training-app .ehs-dash__compliance {
  background: #fff !important;
  color: var(--ehs-text-hex, #1e293b) !important;
  border: 1px solid var(--ehs-border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#training-app .compliance-card .card-title,
#training-app .compliance-card .compliance-details p,
#training-app .compliance-card .percentage {
  color: inherit !important;
}

#training-app .compliance-card .card-header {
  border-bottom-color: var(--ehs-border, #e2e8f0);
  background: linear-gradient(180deg, #fff, var(--ehs-surface-muted, #f8fafc));
}

#training-app .compliance-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

#training-app .chart-progress {
  --progress: 0%;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
    conic-gradient(var(--ehs-primary-hex, #1b365d) calc(var(--progress) * 1), #e2e8f0 0);
}

#training-app .chart-progress.success {
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
    conic-gradient(var(--ehs-success-hex, #2e7d32) calc(var(--progress) * 1), #e2e8f0 0);
}

#training-app .chart-progress.warning {
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
    conic-gradient(#d97706 calc(var(--progress) * 1), #e2e8f0 0);
}

#training-app .percentage {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ehs-primary-hex, #1b365d) !important;
}

#training-app .text-warning { color: #b45309 !important; font-weight: 700; }

/* Buttons / progress bars use brand navy + green */
#training-app .btn-primary {
  background: var(--ehs-primary-hex, #1b365d) !important;
  color: #fff !important;
  border-radius: 0.5rem;
}

#training-app .btn-primary:hover {
  background: #152a4a !important;
}

#training-app .btn-secondary {
  background: #fff !important;
  color: var(--ehs-primary-hex, #1b365d) !important;
  border: 1px solid var(--ehs-border, #e2e8f0) !important;
}

#training-app .progress-fill {
  background: var(--ehs-success-hex, #2e7d32) !important;
}

#training-app .progress-bar {
  background: #e2e8f0 !important;
  border-radius: 999px;
  height: 0.45rem;
}

#training-app .page-header h1 {
  color: var(--ehs-text-hex, #1e293b);
  font-weight: 800;
}

/* Kill leftover dual navy app-nav chrome if anything reintroduces it */
#training-app .app-nav { display: none !important; }

@media (max-width: 900px) {
  #training-app .dashboard-grid,
  #training-app .ehs-dash__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #training-app .app-main { width: min(100% - 1.25rem, 100%); padding-top: 1.1rem; }
  #training-app .dashboard-grid,
  #training-app .ehs-dash__stats { grid-template-columns: 1fr 1fr; }
  #training-app .compliance-content { flex-direction: column; align-items: flex-start; }
}