/**
 * CIO Compliance Dashboard Styles
 *
 * @package MMC_Intranet_Core
 * @since 1.0.0
 */

/* Dashboard Wrapper */
.cio-dashboard-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #1d2327;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Dashboard Header */
.cio-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.cio-dashboard-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
}

.cio-dashboard-title .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #3b82f6;
}

.cio-dashboard-meta {
    color: #6b7280;
    font-size: 14px;
}

.dashboard-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-date .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Metrics Grid */
.cio-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.cio-metric-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.cio-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cio-metric-card .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cio-metric-card .metric-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #fff;
}

/* Metric Card Color Variants */
.metric-employees .metric-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.metric-jml .metric-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.metric-pending .metric-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.metric-compliance .metric-icon { background: linear-gradient(135deg, #10b981, #059669); }
.metric-documents .metric-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.metric-tickets .metric-icon { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.metric-pending.has-pending .metric-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.metric-tickets.has-many .metric-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }

.cio-metric-card .metric-content {
    display: flex;
    flex-direction: column;
}

.cio-metric-card .metric-value {
    font-size: 36px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
    margin-bottom: 4px;
}

.cio-metric-card .metric-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Metric Progress Bar (for compliance rate) */
.cio-metric-card .metric-progress {
    margin-top: 16px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.cio-metric-card .metric-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Dashboard Columns Layout */
.cio-dashboard-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

@media (max-width: 1024px) {
    .cio-dashboard-columns {
        grid-template-columns: 1fr;
    }
}

/* Sections */
.cio-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.cio-section-title .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #3b82f6;
}

.cio-section-title .action-count {
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* Document Breakdown */
.document-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.document-breakdown-item {
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.document-breakdown-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.document-breakdown-item .doc-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.document-breakdown-item .doc-name {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.document-breakdown-item .doc-stats {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.doc-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.doc-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.doc-progress-fill.good { background: linear-gradient(90deg, #10b981, #059669); }
.doc-progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #d97706); }
.doc-progress-fill.danger { background: linear-gradient(90deg, #ef4444, #dc2626); }

.doc-percentage {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    min-width: 40px;
    text-align: right;
}

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

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    transition: background 0.2s;
}

.activity-item:hover {
    background: #f3f4f6;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.activity-item.activity-document_signed .activity-icon {
    background: #d1fae5;
}
.activity-item.activity-document_signed .activity-icon .dashicons {
    color: #059669;
}

.activity-item.activity-jml_request .activity-icon {
    background: #dbeafe;
}
.activity-item.activity-jml_request .activity-icon .dashicons {
    color: #2563eb;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
}

.activity-description {
    display: block;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Action Required Section */
.cio-action-required {
    position: sticky;
    top: 20px;
}

.no-actions-needed {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.no-actions-needed .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #10b981;
    margin-bottom: 12px;
}

.no-actions-needed p {
    margin: 0;
    font-size: 14px;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #e5e7eb;
    transition: all 0.2s;
}

.action-item:hover {
    background: #f3f4f6;
}

.action-item.priority-critical {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.action-item.priority-high {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.action-item.priority-normal {
    border-left-color: #3b82f6;
}

.action-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.action-header .action-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.priority-critical .action-icon { color: #dc2626; }
.priority-high .action-icon { color: #f59e0b; }
.priority-normal .action-icon { color: #3b82f6; }

.action-priority {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-critical .action-priority { color: #dc2626; }
.priority-high .action-priority { color: #d97706; }
.priority-normal .action-priority { color: #2563eb; }

.action-content {
    margin-bottom: 12px;
}

.action-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
}

.action-description {
    display: block;
    font-size: 13px;
    color: #6b7280;
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.action-button:hover {
    color: #1d4ed8;
}

.action-button .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ============================================
   Asset Metrics Cards
   ============================================ */

/* Asset Metrics Grid */
.cio-asset-metrics {
    margin-bottom: 30px;
}

/* Asset Metric Card Color Variants */
.metric-total-assets .metric-icon { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.metric-assets-attention .metric-icon { background: linear-gradient(135deg, #6b7280, #4b5563); }
.metric-assets-attention.has-attention .metric-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.metric-jml-linked .metric-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.metric-recently-assigned .metric-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* ============================================
   Hardware Inventory Section
   ============================================ */

.cio-asset-inventory {
    background: #ffffff;
}

/* Asset Types Grid */
.asset-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.asset-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    text-align: center;
}

.asset-type-card:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.asset-type-card .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #3b82f6;
    margin-bottom: 8px;
}

.asset-type-card .type-count {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
    margin-bottom: 4px;
}

.asset-type-card .type-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Asset Health Summary */
.asset-health-summary {
    background: #f9fafb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.asset-health-summary .health-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.condition-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.condition-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    align-items: center;
    gap: 12px;
}

.condition-label {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
}

.condition-bar-wrapper {
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.condition-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.condition-bar.condition-excellent { background: linear-gradient(90deg, #10b981, #059669); }
.condition-bar.condition-good { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.condition-bar.condition-fair { background: linear-gradient(90deg, #f59e0b, #d97706); }
.condition-bar.condition-poor { background: linear-gradient(90deg, #ef4444, #dc2626); }

.condition-count {
    font-size: 13px;
    color: #6b7280;
    text-align: right;
    font-weight: 500;
}

/* Asset Quick Stats */
.asset-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 10px;
    text-align: center;
}

.quick-stat .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #0369a1;
    line-height: 1;
    margin-bottom: 4px;
}

.quick-stat .stat-label {
    font-size: 12px;
    color: #0c4a6e;
    font-weight: 500;
}

/* ============================================
   Responsive - Asset Sections
   ============================================ */

@media (max-width: 768px) {
    .asset-types-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .asset-type-card {
        padding: 12px 8px;
    }

    .asset-type-card .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .asset-type-card .type-count {
        font-size: 20px;
    }

    .asset-type-card .type-label {
        font-size: 10px;
    }

    .condition-row {
        grid-template-columns: 70px 1fr 80px;
        gap: 8px;
    }

    .condition-label {
        font-size: 12px;
    }

    .condition-count {
        font-size: 12px;
    }

    .quick-stat .stat-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .asset-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .condition-row {
        grid-template-columns: 60px 1fr;
    }

    .condition-count {
        display: none;
    }

    .asset-quick-stats {
        grid-template-columns: 1fr;
    }
}

/* Access Denied */
.cio-dashboard-access-denied {
    text-align: center;
    padding: 60px 40px;
    background: #f9fafb;
    border-radius: 12px;
    max-width: 500px;
    margin: 40px auto;
}

.access-denied-icon .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.cio-dashboard-access-denied h3 {
    font-size: 24px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.cio-dashboard-access-denied p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

/* ================================================
   Phase 1: Security & Compliance Metrics Section
   ISO 27001 / GDPR Compliance Dashboard
   ================================================ */

.cio-security-metrics {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
}

.cio-security-metrics .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #0c4a6e;
    margin: 0 0 20px 0;
}

.cio-security-metrics .cio-section-title .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: #0284c7;
}

/* ISO Badge */
.iso-badge {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* ISO 9001 Badge - Quality Management System */
.iso-badge.iso-badge-9001 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    margin-left: 8px;
}

/* Security Metrics Grid */
.cio-security-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
}

/* ISO Control Reference Badge */
.iso-control {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
}

/* MFA Card Styling */
.metric-mfa .metric-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.metric-mfa.has-warning {
    border: 2px solid #f59e0b;
    background: #fffbeb;
}

.metric-mfa.has-warning .metric-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* VPN Card Styling */
.metric-vpn .metric-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* M365 Card Styling */
.metric-m365 .metric-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Overdue/SLA Breach Card Styling */
.metric-overdue .metric-icon {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.metric-overdue.has-attention {
    border: 2px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.metric-overdue.has-attention .metric-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.metric-overdue.has-attention .metric-value {
    color: #dc2626;
}

/* Metric Sub-text */
.metric-sub {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* Progress Bar for Security Metrics */
.cio-metric-card .metric-progress {
    margin-top: 12px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.cio-metric-card .metric-progress .progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.cio-metric-card .metric-progress .progress-bar.good {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.cio-metric-card .metric-progress .progress-bar.warning {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.cio-metric-card .metric-progress .progress-bar.danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Compliance Gap Section */
.cio-compliance-gap {
    background: #ffffff;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.compliance-gap-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #991b1b;
    margin: 0 0 8px 0;
}

.compliance-gap-title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #ef4444;
}

.gap-count {
    margin-left: auto;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.compliance-gap-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.iso-ref {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    font-style: italic;
}

.compliance-gap-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gap-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
}

.gap-user-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.gap-user-missing {
    font-size: 12px;
    color: #dc2626;
    font-weight: 500;
}

.gap-more {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    padding: 8px;
    font-style: italic;
}

/* M365 License Breakdown */
.cio-m365-breakdown {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
}

.m365-breakdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.m365-breakdown-title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #3b82f6;
}

.m365-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.m365-license-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background 0.2s;
}

.m365-license-item:hover {
    background: #f1f5f9;
}

.m365-license-item .license-type {
    font-size: 12px;
    color: #475569;
}

.m365-license-item .license-count {
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
}

.m365-license-item.no-license {
    background: #fef3c7;
    border-color: #fcd34d;
}

.m365-license-item.no-license .license-type {
    color: #92400e;
}

.m365-license-item.no-license .license-count {
    color: #b45309;
}

/* =============================================
   Department Distribution Section
   ============================================= */
.cio-department-distribution {
    margin-top: 24px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 24px;
}

.cio-department-distribution .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
}

.cio-department-distribution .cio-section-title .dashicons {
    color: #16a34a;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.cio-department-distribution .dept-total {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #166534;
    background: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    border-radius: 20px;
}

.cio-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.cio-dept-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    transition: all 0.2s ease;
}

.cio-dept-item:hover {
    border-color: #86efac;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.cio-dept-item .dept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cio-dept-item .dept-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.cio-dept-item .dept-count {
    font-size: 16px;
    font-weight: 700;
    color: #16a34a;
}

.cio-dept-item .dept-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.cio-dept-item .dept-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cio-dept-item .dept-percentage {
    font-size: 11px;
    color: #64748b;
}

.dept-summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(34, 197, 94, 0.3);
    text-align: center;
}

.dept-summary-label {
    font-size: 12px;
    color: #64748b;
    margin-right: 6px;
}

.dept-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

.dept-summary-count {
    font-size: 12px;
    color: #16a34a;
    margin-left: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .cio-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m365-breakdown-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cio-dept-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cio-dashboard-wrapper {
        padding: 16px;
    }

    .cio-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cio-dashboard-title {
        font-size: 22px;
    }

    .cio-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cio-metric-card {
        padding: 16px;
    }

    .cio-metric-card .metric-value {
        font-size: 28px;
    }

    .cio-metric-card .metric-icon {
        width: 40px;
        height: 40px;
    }

    .cio-section {
        padding: 16px;
    }

    .cio-security-metrics {
        padding: 16px;
    }

    .cio-security-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .m365-breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cio-dept-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cio-department-distribution {
        padding: 16px;
    }

    .cio-department-distribution .dept-total {
        display: none;
    }

    .iso-badge {
        display: none;
    }

    .iso-control {
        display: none;
    }
}

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

    .cio-security-grid {
        grid-template-columns: 1fr;
    }

    .m365-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .cio-dept-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   Phase 2: JML Monthly Activity Section
   ============================================= */
.cio-jml-activity-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 24px;
}

.cio-jml-activity-section .cio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.4);
}

.cio-jml-activity-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #92400e;
}

.cio-jml-activity-section .cio-section-title .dashicons {
    color: #d97706;
}

.cio-net-change {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}

.cio-net-change.positive {
    background: #dcfce7;
    color: #166534;
}

.cio-net-change.negative {
    background: #fee2e2;
    color: #991b1b;
}

.cio-jml-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cio-jml-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.cio-jml-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cio-jml-card .cio-jml-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.cio-jml-card .cio-jml-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.cio-joiners .cio-jml-icon .dashicons { color: #16a34a; }
.cio-movers .cio-jml-icon .dashicons { color: #2563eb; }
.cio-leavers .cio-jml-icon .dashicons { color: #dc2626; }

.cio-jml-card .cio-jml-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.cio-joiners .cio-jml-value { color: #16a34a; }
.cio-movers .cio-jml-value { color: #2563eb; }
.cio-leavers .cio-jml-value { color: #dc2626; }

.cio-jml-card .cio-jml-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}

.cio-jml-card .cio-jml-trend {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cio-jml-trend.up { color: #16a34a; }
.cio-jml-trend.down { color: #dc2626; }
.cio-jml-trend.stable { color: #64748b; }

.cio-jml-trend .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* =============================================
   Phase 2: Admin Privilege Accounts Section
   ============================================= */
.cio-admin-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 1px solid #f87171;
    border-radius: 12px;
    padding: 24px;
}

.cio-admin-section .cio-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(248, 113, 113, 0.4);
}

.cio-admin-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #991b1b;
}

.cio-admin-section .cio-section-title .dashicons {
    color: #dc2626;
}

.cio-admin-overview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.cio-admin-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
}

.cio-admin-card.cio-card-success {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cio-admin-card.cio-card-warning {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.cio-admin-card.cio-card-danger {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}

.cio-admin-value {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.cio-card-success .cio-admin-value { color: #16a34a; }
.cio-card-warning .cio-admin-value { color: #d97706; }
.cio-card-danger .cio-admin-value { color: #dc2626; }

.cio-admin-label {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 8px;
}

.cio-admin-rate {
    font-size: 12px;
    color: #64748b;
}

.cio-admin-target {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.cio-admin-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cio-admin-role {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
}

.cio-admin-role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cio-role-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.cio-role-count {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 12px;
}

.cio-admin-users {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cio-admin-user {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
}

/* =============================================
   Phase 2: Tickets by Category Section
   ============================================= */
.cio-category-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #60a5fa;
    border-radius: 12px;
    padding: 24px;
}

.cio-category-section .cio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.4);
}

.cio-category-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #1e40af;
}

.cio-category-section .cio-section-title .dashicons {
    color: #2563eb;
}

.cio-stat-badge {
    font-size: 12px;
    font-weight: 600;
    color: #1e40af;
    background: rgba(255, 255, 255, 0.7);
    padding: 4px 12px;
    border-radius: 20px;
}

.cio-category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cio-category-item {
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
}

.cio-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cio-category-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.cio-category-total {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}

.cio-category-breakdown {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 8px;
}

.cio-cat-open { color: #dc2626; }
.cio-cat-progress { color: #d97706; }
.cio-cat-resolved { color: #16a34a; }

.cio-category-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.cio-cat-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* =============================================
   Phase 2: Average Resolution Time Section
   ============================================= */
.cio-resolution-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #a78bfa;
    border-radius: 12px;
    padding: 24px;
}

.cio-resolution-section .cio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(167, 139, 250, 0.4);
}

.cio-resolution-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #5b21b6;
}

.cio-resolution-section .cio-section-title .dashicons {
    color: #7c3aed;
}

.cio-badge-success { background: #dcfce7; color: #166534; }
.cio-badge-warning { background: #fef3c7; color: #92400e; }
.cio-badge-danger { background: #fee2e2; color: #991b1b; }

.cio-resolution-overview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.cio-resolution-main {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    border: 2px solid transparent;
}

.cio-resolution-main.cio-card-success { border-color: #22c55e; }
.cio-resolution-main.cio-card-warning { border-color: #f59e0b; }
.cio-resolution-main.cio-card-danger { border-color: #ef4444; }

.cio-resolution-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #7c3aed;
}

.cio-resolution-unit {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 4px;
}

.cio-resolution-hours {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.cio-resolution-sla {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.cio-sla-target {
    font-size: 11px;
    color: #94a3b8;
}

.cio-resolution-by-priority h4 {
    font-size: 14px;
    color: #475569;
    margin: 0 0 12px 0;
}

.cio-priority-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
}

.cio-priority-label {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

.cio-priority-urgent { background: #fee2e2; color: #991b1b; }
.cio-priority-high { background: #ffedd5; color: #9a3412; }
.cio-priority-normal { background: #e0f2fe; color: #075985; }
.cio-priority-low { background: #f1f5f9; color: #475569; }

.cio-priority-value {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

/* =============================================
   Phase 2: Unassigned Tickets Alert Section
   ============================================= */
.cio-unassigned-section {
    margin-top: 24px;
    border-radius: 12px;
    padding: 24px;
}

.cio-unassigned-section.cio-alert-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.cio-unassigned-section.cio-alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #fbbf24;
}

.cio-unassigned-section.cio-alert-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 2px solid #f87171;
}

.cio-unassigned-section .cio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cio-unassigned-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #991b1b;
}

.cio-unassigned-section .cio-section-title .dashicons {
    color: #dc2626;
}

.cio-alert-badge {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    padding: 4px 12px;
    border-radius: 20px;
}

.cio-critical-alert {
    background: #dc2626;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cio-critical-alert .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.cio-unassigned-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cio-unassigned-item {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid transparent;
}

.cio-unassigned-item.cio-priority-urgent { border-left-color: #dc2626; }
.cio-unassigned-item.cio-priority-high { border-left-color: #f59e0b; }
.cio-unassigned-item.cio-priority-normal { border-left-color: #3b82f6; }
.cio-unassigned-item.cio-priority-low { border-left-color: #94a3b8; }

.cio-ticket-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cio-ticket-number {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

.cio-ticket-subject {
    font-size: 13px;
    color: #374151;
}

.cio-ticket-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cio-priority-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.cio-priority-urgent .cio-priority-badge { background: #fee2e2; color: #991b1b; }
.cio-priority-high .cio-priority-badge { background: #ffedd5; color: #9a3412; }
.cio-priority-normal .cio-priority-badge { background: #e0f2fe; color: #075985; }
.cio-priority-low .cio-priority-badge { background: #f1f5f9; color: #475569; }

.cio-waiting-hours {
    font-size: 11px;
    color: #dc2626;
    font-weight: 500;
}

/* =============================================
   Phase 2: Audit Log Activity Section
   ============================================= */
.cio-audit-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #94a3b8;
    border-radius: 12px;
    padding: 24px;
}

.cio-audit-section .cio-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.cio-audit-section .cio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: #334155;
}

.cio-audit-section .cio-section-title .dashicons {
    color: #64748b;
}

.cio-security-alert-badge {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cio-security-alert-badge .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.cio-audit-overview {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    gap: 20px;
}

.cio-audit-total {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.cio-audit-value {
    font-size: 36px;
    font-weight: 700;
    color: #334155;
    line-height: 1;
    margin-bottom: 4px;
}

.cio-audit-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.cio-audit-rate {
    font-size: 11px;
    color: #94a3b8;
}

.cio-audit-breakdown h4,
.cio-security-events h4 {
    font-size: 13px;
    color: #475569;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cio-audit-item,
.cio-security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #e2e8f0;
}

.cio-audit-action,
.cio-security-action {
    font-size: 12px;
    color: #475569;
}

.cio-audit-count {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.cio-security-events {
    background: #fef2f2;
    border-radius: 8px;
    padding: 12px;
}

.cio-security-events h4 {
    color: #991b1b;
}

.cio-security-events h4 .dashicons {
    color: #dc2626;
}

.cio-security-item {
    background: #fff;
    border-color: #fecaca;
}

.cio-security-action {
    color: #991b1b;
}

.cio-security-count {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
}

/* =============================================
   Phase 2: Responsive Styles
   ============================================= */
@media (max-width: 1024px) {
    .cio-jml-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .cio-admin-overview {
        grid-template-columns: 1fr;
    }

    .cio-resolution-overview {
        grid-template-columns: 1fr;
    }

    .cio-audit-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cio-jml-cards {
        grid-template-columns: 1fr;
    }

    .cio-jml-activity-section .cio-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cio-category-section .cio-section-header,
    .cio-resolution-section .cio-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cio-ticket-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cio-unassigned-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cio-category-breakdown {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =============================================
   PHASE 3: PENDING MOVER REQUESTS SECTION
   ============================================= */

.cio-movers-section {
    margin-bottom: 30px;
}

.cio-movers-section .cio-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cio-urgent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #dc2626;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.cio-urgent-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.cio-movers-status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.cio-status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
}

.cio-status-label {
    color: #4b5563;
}

.cio-status-count {
    background: #1f2937;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.cio-movers-list {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.cio-mover-item {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.cio-mover-item:last-child {
    border-bottom: none;
}

.cio-mover-item:hover {
    background: #f9fafb;
}

.cio-mover-item.cio-urgency-high {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.cio-mover-item.cio-urgency-medium {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.cio-mover-item.cio-urgency-low {
    border-left-color: #10b981;
}

.cio-mover-employee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cio-mover-employee .cio-employee-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.cio-mover-status {
    font-size: 12px;
    padding: 4px 12px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 12px;
    font-weight: 500;
}

.cio-mover-transfer {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.cio-transfer-from,
.cio-transfer-to {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cio-transfer-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cio-mover-transfer .cio-dept-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cio-mover-transfer .cio-position {
    font-size: 12px;
    color: #6b7280;
}

.cio-transfer-arrow {
    font-size: 24px;
    color: #3b82f6;
    font-weight: bold;
    flex-shrink: 0;
}

.cio-mover-timing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.cio-effective-date {
    color: #4b5563;
}

.cio-days-until {
    font-weight: 600;
    color: #f59e0b;
}

.cio-days-until.overdue {
    color: #dc2626;
}

/* =============================================
   PHASE 3: EXPIRING SIGNATURE LINKS SECTION
   ============================================= */

.cio-expiring-section {
    margin-bottom: 30px;
}

.cio-expiring-section .cio-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cio-expired-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #dc2626;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.cio-expired-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.cio-expiring-stats {
    margin-bottom: 20px;
}

.cio-urgency-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.cio-urgency-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cio-urgency-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cio-urgency-item.cio-critical {
    border-left: 4px solid #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.cio-urgency-item.cio-high {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.cio-urgency-item.cio-medium {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.cio-urgency-count {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.cio-urgency-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.cio-expiring-list {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.cio-expiring-item {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 20px;
    align-items: center;
    border-left: 4px solid transparent;
    transition: background 0.2s ease;
}

.cio-expiring-item:last-child {
    border-bottom: none;
}

.cio-expiring-item:hover {
    background: #f9fafb;
}

.cio-expiring-item.cio-urgency-critical {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.cio-expiring-item.cio-urgency-high {
    border-left-color: #f59e0b;
}

.cio-expiring-item.cio-urgency-medium {
    border-left-color: #3b82f6;
}

.cio-sig-employee .cio-employee-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cio-sig-employee .cio-department {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.cio-sig-document .cio-doc-type {
    font-size: 13px;
    color: #4b5563;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
}

.cio-sig-expiry {
    text-align: right;
}

.cio-sig-expiry .cio-days-remaining {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 2px;
}

.cio-sig-expiry .cio-expiry-date {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

/* =============================================
   PHASE 3: JML WORKFLOW COMPLETION TIME SECTION
   ============================================= */

.cio-workflow-section {
    margin-bottom: 30px;
}

.cio-workflow-section .cio-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cio-stat-badge {
    background: #f3f4f6;
    color: #4b5563;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.cio-workflow-overview {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.cio-workflow-main {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cio-workflow-main.cio-card-success {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cio-workflow-main.cio-card-warning {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.cio-workflow-main.cio-card-danger {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.cio-workflow-main.cio-card-no_data {
    border-color: #e5e7eb;
    background: #f9fafb;
}

.cio-workflow-value {
    font-size: 64px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.cio-workflow-unit {
    font-size: 16px;
    color: #6b7280;
    margin-top: 8px;
    margin-bottom: 4px;
}

.cio-workflow-hours {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.cio-workflow-target {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 12px;
}

.cio-workflow-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.cio-workflow-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.cio-workflow-badge.cio-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.cio-workflow-badge.cio-badge-warning {
    background: #fef3c7;
    color: #d97706;
}

.cio-workflow-completed {
    font-size: 13px;
    color: #6b7280;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    width: 100%;
}

.cio-workflow-breakdown {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}

.cio-workflow-by-type h4,
.cio-workflow-distribution h4 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-workflow-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.cio-workflow-type:last-child {
    border-bottom: none;
}

.cio-workflow-type .cio-type-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cio-workflow-type .cio-type-value {
    font-size: 16px;
    font-weight: 700;
    color: #0284c7;
}

.cio-workflow-type .cio-type-count {
    font-size: 12px;
    color: #6b7280;
    margin-left: 8px;
}

.cio-workflow-distribution {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}

.cio-dist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.cio-dist-item .cio-dist-label {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.cio-dist-item.cio-dist-fast .cio-dist-label {
    background: #dcfce7;
    color: #15803d;
}

.cio-dist-item.cio-dist-normal .cio-dist-label {
    background: #dbeafe;
    color: #1e40af;
}

.cio-dist-item.cio-dist-slow .cio-dist-label {
    background: #fef3c7;
    color: #d97706;
}

.cio-dist-item.cio-dist-very-slow .cio-dist-label {
    background: #fee2e2;
    color: #dc2626;
}

.cio-dist-item .cio-dist-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

/* =============================================
   PHASE 3: ASSET UTILIZATION SECTION
   ============================================= */

.cio-utilization-section {
    margin-bottom: 30px;
}

.cio-utilization-section .cio-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cio-waste-alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    color: #d97706;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.cio-waste-alert .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.cio-utilization-overview {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

.cio-utilization-main {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
}

.cio-utilization-main.cio-card-success {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cio-utilization-main.cio-card-warning {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.cio-utilization-main.cio-card-danger {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.cio-util-value {
    font-size: 64px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 8px;
}

.cio-util-label {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.cio-util-gauge {
    margin-bottom: 16px;
    padding: 0 10px;
}

.cio-util-bar {
    height: 14px;
    background: #e5e7eb;
    border-radius: 7px;
    overflow: hidden;
}

.cio-util-fill {
    height: 100%;
    transition: width 0.6s ease;
    border-radius: 7px;
}

.cio-util-fill.cio-util-success {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.cio-util-fill.cio-util-warning {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.cio-util-fill.cio-util-danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.cio-util-target {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 20px;
}

.cio-util-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.cio-util-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cio-util-stat .cio-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

.cio-util-stat .cio-stat-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-util-stat.cio-stat-warning .cio-stat-value {
    color: #f59e0b;
}

.cio-utilization-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cio-util-health {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}

.cio-util-health h4 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-health-value {
    font-size: 48px;
    font-weight: 700;
    color: #0284c7;
    text-align: center;
    margin-bottom: 20px;
}

.cio-health-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cio-health-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
}

.cio-health-item .cio-health-label {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.cio-health-item.cio-status-active .cio-health-label {
    background: #dcfce7;
    color: #15803d;
}

.cio-health-item.cio-status-returned .cio-health-label {
    background: #dbeafe;
    color: #1e40af;
}

.cio-health-item.cio-status-damaged .cio-health-label {
    background: #fef3c7;
    color: #d97706;
}

.cio-health-item.cio-status-lost .cio-health-label {
    background: #fee2e2;
    color: #dc2626;
}

.cio-health-item .cio-health-count {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.cio-util-ratio {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.cio-util-ratio .cio-ratio-value {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cio-util-ratio .cio-ratio-label {
    font-size: 14px;
    opacity: 0.9;
}

.cio-util-by-type {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}

.cio-util-by-type h4 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-util-type-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.cio-util-type-item:last-child {
    border-bottom: none;
}

.cio-util-type-item .cio-type-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.cio-util-type-item .cio-type-rate {
    font-size: 14px;
    font-weight: 700;
    color: #0284c7;
}

.cio-util-type-item .cio-type-counts {
    font-size: 12px;
    color: #6b7280;
    margin-left: 8px;
}

/* =============================================
   PHASE 3: Responsive Styles
   ============================================= */

@media (max-width: 1024px) {
    .cio-workflow-overview,
    .cio-utilization-overview {
        grid-template-columns: 1fr;
    }

    .cio-workflow-main,
    .cio-utilization-main {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .cio-urgency-breakdown {
        grid-template-columns: 1fr;
    }

    .cio-mover-transfer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cio-transfer-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .cio-expiring-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cio-sig-expiry {
        text-align: left;
    }

    .cio-mover-employee,
    .cio-mover-timing {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cio-health-breakdown {
        grid-template-columns: 1fr;
    }

    .cio-util-stats {
        flex-wrap: wrap;
        gap: 16px;
    }

    .cio-movers-section .cio-section-header,
    .cio-expiring-section .cio-section-header,
    .cio-workflow-section .cio-section-header,
    .cio-utilization-section .cio-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   ENHANCED COMPLIANCE GAPS TABLE
   ======================================== */

.cio-compliance-expanded {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.cio-compliance-expanded.cio-card-success {
    border-left: 4px solid #10b981;
}

.cio-compliance-expanded.cio-card-warning {
    border-left: 4px solid #f59e0b;
}

.cio-compliance-expanded.cio-card-danger {
    border-left: 4px solid #ef4444;
}

.cio-compliance-header {
    margin-bottom: 20px;
}

.cio-compliance-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cio-compliance-title .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.cio-compliance-title h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.cio-iso-badge {
    background: #eff6ff;
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.cio-compliance-summary {
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 24px;
}

.cio-gauge-container {
    flex: 1;
    max-width: 300px;
}

.cio-gauge-value {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.cio-gauge-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.cio-gauge-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.cio-gauge-success {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.cio-gauge-warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.cio-gauge-danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.cio-gauge-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.cio-compliance-stats {
    display: flex;
    gap: 32px;
}

.cio-stat {
    text-align: center;
}

.cio-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

.cio-stat-value.cio-stat-success {
    color: #10b981;
}

.cio-stat-value.cio-stat-warning {
    color: #f59e0b;
}

.cio-stat-value.cio-stat-danger {
    color: #ef4444;
}

.cio-stat-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.cio-compliance-details {
    border-top: 2px solid #e5e7eb;
    padding-top: 24px;
}

.cio-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cio-details-header h5 {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.cio-gap-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.cio-compliance-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
}

.cio-compliance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cio-compliance-table thead {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 10;
}

.cio-compliance-table thead th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #4b5563;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.cio-compliance-table thead th.cio-center {
    text-align: center;
}

.cio-compliance-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}

.cio-compliance-table tbody tr:hover {
    background: #f9fafb;
}

.cio-compliance-table tbody tr:last-child {
    border-bottom: none;
}

.cio-compliance-table td {
    padding: 12px;
    vertical-align: middle;
}

.cio-compliance-table td.cio-center {
    text-align: center;
}

/* Severity Colors */
.cio-gap-severity-critical {
    border-left: 4px solid #ef4444;
}

.cio-gap-severity-high {
    border-left: 4px solid #f59e0b;
}

.cio-gap-severity-medium {
    border-left: 4px solid #3b82f6;
}

/* User Cell */
.cio-user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cio-user-name {
    font-weight: 600;
    color: #1f2937;
}

.cio-user-email {
    font-size: 11px;
    color: #6b7280;
}

/* Department Badge */
.cio-dept-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Count Badges */
.cio-count-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cio-count-success {
    background: #dcfce7;
    color: #15803d;
}

.cio-count-danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Missing Documents Tags */
.cio-missing-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cio-doc-tag {
    display: inline-block;
    padding: 4px 8px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    transition: all 0.2s;
}

.cio-doc-tag:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* Compliance Success State */
.cio-compliance-success {
    text-align: center;
    padding: 40px 20px;
    color: #10b981;
}

.cio-compliance-success .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.cio-compliance-success p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #15803d;
}

/* Scrollbar Styling */
.cio-compliance-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cio-compliance-table-wrapper::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.cio-compliance-table-wrapper::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.cio-compliance-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive */
@media (max-width: 1400px) {
    .cio-compliance-table {
        font-size: 12px;
    }

    .cio-doc-tag {
        font-size: 10px;
        padding: 3px 6px;
    }
}

@media (max-width: 1024px) {
    .cio-compliance-summary {
        flex-direction: column;
        gap: 24px;
    }

    .cio-gauge-container {
        max-width: 100%;
    }

    .cio-compliance-stats {
        width: 100%;
        justify-content: space-around;
    }

    .cio-details-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .cio-compliance-expanded {
        padding: 16px;
    }

    .cio-compliance-table-wrapper {
        max-height: 400px;
    }

    .cio-compliance-table thead th,
    .cio-compliance-table td {
        padding: 8px;
    }

    .cio-user-email {
        display: none;
    }
}

/* ============================================
   ISO 9001 Quality Management Styling
   ============================================ */

/* Standards Breakdown */
.cio-standards-breakdown {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.cio-standard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f9fafb;
}

.cio-standard-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-standard-count {
    font-size: 12px;
    color: #6b7280;
}

.cio-standard-iso27001 .cio-standard-badge {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
}

.cio-standard-iso9001 .cio-standard-badge {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
}

.cio-standard-gdpr .cio-standard-badge {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
}

/* ISO 9001 Section */
.cio-iso9001-section {
    border-left: 4px solid #059669;
}

.cio-iso9001-section .cio-iso-section-title {
    color: #047857;
}

/* ISO 9001 Control ID Badge */
.cio-control-id.cio-control-9001 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
}

.cio-support-item.cio-support-9001 {
    border-left: 3px solid #059669;
    background: #ecfdf5;
}

/* Triple Compliance Badges in Summary */
.cio-triple-compliance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.cio-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cio-status-badge.cio-status-compliant {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
}

.cio-status-badge.cio-status-9001 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.cio-status-badge.cio-status-gdpr {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* ========================================
   ISO 14001 ENVIRONMENTAL MANAGEMENT
   ======================================== */

/* ISO 14001 Badge */
.iso-badge.iso-badge-14001 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    margin-left: 8px;
}

/* Section Divider - Environmental */
.cio-section-divider.cio-divider-environmental {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 40px 0 30px;
    padding: 20px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    border: 2px solid #10b981;
}

.cio-divider-environmental .cio-divider-icon {
    font-size: 32px;
}

.cio-divider-environmental .cio-divider-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #047857;
}

.cio-divider-environmental .cio-divider-badge {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* Environmental Sections */
.cio-environmental-section {
    border-left: 4px solid #10b981;
}

.cio-environmental-section .cio-section-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.cio-environmental-content {
    padding: 24px;
}

/* Environmental Main Metric */
.cio-env-main-metric {
    text-align: center;
    padding: 24px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 24px;
}

.cio-env-value {
    font-size: 48px;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
    margin-bottom: 8px;
}

.cio-env-value.cio-card-good {
    color: #10b981;
}

.cio-env-value.cio-card-warning {
    color: #f59e0b;
}

.cio-env-value.cio-card-danger {
    color: #ef4444;
}

.cio-env-value.cio-card-no_data {
    color: #6b7280;
}

.cio-env-label {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.cio-env-target {
    font-size: 13px;
    color: #6b7280;
}

/* Environmental Stats Grid */
.cio-env-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cio-env-stat {
    text-align: center;
    padding: 16px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.cio-env-stat.cio-stat-positive {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.cio-env-stat.cio-stat-success {
    background: #ecfdf5;
    border-color: #10b981;
}

.cio-env-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.cio-env-stat.cio-stat-positive .cio-env-stat-value {
    color: #059669;
}

.cio-env-stat.cio-stat-success .cio-env-stat-value {
    color: #059669;
}

.cio-env-stat-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Environmental Breakdown */
.cio-env-breakdown {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.cio-env-breakdown h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.cio-env-method-list,
.cio-env-breakdown-grid,
.cio-env-dept-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cio-env-method-item,
.cio-env-breakdown-item,
.cio-env-dept-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.cio-method-name,
.cio-breakdown-type,
.cio-dept-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.cio-method-count,
.cio-breakdown-value,
.cio-dept-pages {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}

/* Energy Trend */
.cio-env-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    margin-top: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.cio-env-trend.cio-trend-down {
    background: #ecfdf5;
    color: #059669;
}

.cio-env-trend.cio-trend-up {
    background: #fef2f2;
    color: #dc2626;
}

.cio-env-trend .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Carbon Footprint Section */
.cio-carbon-sources {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.cio-carbon-sources h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
}

.cio-carbon-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cio-carbon-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cio-carbon-label {
    width: 80px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.cio-carbon-progress {
    flex: 1;
    height: 24px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}

.cio-carbon-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.cio-carbon-fill.cio-fill-energy {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.cio-carbon-fill.cio-fill-paper {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.cio-carbon-value {
    width: 80px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

/* Green Initiatives Section */
.cio-initiatives-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cio-initiative-stat {
    text-align: center;
    padding: 20px 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.cio-initiative-stat.cio-stat-success {
    background: #ecfdf5;
    border-color: #10b981;
}

.cio-initiative-stat.cio-stat-positive {
    background: #f0fdf4;
    border-color: #22c55e;
}

.cio-init-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.cio-initiative-stat.cio-stat-success .cio-init-value,
.cio-initiative-stat.cio-stat-positive .cio-init-value {
    color: #059669;
}

.cio-init-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Initiatives List */
.cio-initiatives-list {
    margin-bottom: 20px;
}

.cio-initiatives-list h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.cio-initiative-item {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid #10b981;
    margin-bottom: 12px;
}

.cio-initiative-item.cio-priority-high {
    border-left-color: #ef4444;
}

.cio-initiative-item.cio-priority-medium {
    border-left-color: #f59e0b;
}

.cio-initiative-item.cio-priority-low {
    border-left-color: #3b82f6;
}

.cio-initiative-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cio-initiative-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cio-initiative-type {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: #e5e7eb;
    color: #374151;
    text-transform: uppercase;
}

.cio-initiative-type.cio-type-recycling {
    background: #dcfce7;
    color: #166534;
}

.cio-initiative-type.cio-type-energy {
    background: #fef3c7;
    color: #92400e;
}

.cio-initiative-type.cio-type-paperless {
    background: #dbeafe;
    color: #1e40af;
}

.cio-initiative-type.cio-type-remote_work {
    background: #f3e8ff;
    color: #6b21a8;
}

.cio-initiative-type.cio-type-training {
    background: #fce7f3;
    color: #9d174d;
}

.cio-initiative-type.cio-type-procurement {
    background: #ecfeff;
    color: #155e75;
}

.cio-initiative-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cio-initiative-progress .cio-progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.cio-initiative-progress .cio-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.cio-progress-text {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* Initiatives by Type */
.cio-initiatives-by-type h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.cio-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cio-type-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 12px;
}

.cio-type-badge .cio-type-count {
    font-weight: 700;
    color: #1f2937;
}

.cio-type-badge .cio-type-name {
    color: #6b7280;
}

/* Responsive Styles for Environmental Sections */
@media (max-width: 1024px) {
    .cio-env-stats-grid,
    .cio-initiatives-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cio-section-divider.cio-divider-environmental {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .cio-env-stats-grid,
    .cio-initiatives-summary {
        grid-template-columns: 1fr;
    }

    .cio-carbon-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .cio-carbon-label,
    .cio-carbon-value {
        width: auto;
        text-align: left;
    }

    .cio-initiative-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}