/* ═══════════════════════════════════════
   MVM Vendor QMS – Frontend CSS
═══════════════════════════════════════ */

/* Dashboard Stat Cards */
.qms-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.qms-dash-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.qms-dash-card .dashicons { font-size: 28px; color: #888; display: block; margin-bottom: 6px; }
.qms-dash-card strong    { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.qms-dash-card > span    { font-size: 12px; color: #666; }
.qms-dash-card.qms-green  { border-top: 3px solid #28a745; }
.qms-dash-card.qms-red    { border-top: 3px solid #dc3545; }
.qms-dash-card.qms-orange { border-top: 3px solid #fd7e14; }

/* Sub-Navigation */
.qms-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}
.qms-subnav-link {
    padding: 8px 16px;
    text-decoration: none;
    color: #555;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    transition: color .15s;
}
.qms-subnav-link:hover  { color: #007cba; }
.qms-subnav-link.active { color: #007cba; border-bottom-color: #007cba; font-weight: 600; }

/* Sections */
.qms-section         { display: none; }
.qms-section.active  { display: block; }

/* Card (form panels) */
.qms-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
}

/* Checklist item blocks */
.qms-item-block {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 10px;
}
.qms-item-block p { margin: 0 0 6px; }

/* KPI Grid */
.qms-kpi-grid-inner,
#qms-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.qms-kpi-card {
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #ccc;
    border-radius: 6px;
    padding: 14px;
}
.qms-kpi-card strong      { display: block; font-size: 13px; color: #333; margin-bottom: 6px; }
.qms-kpi-card .qms-kpi-val{ display: block; font-size: 26px; font-weight: 700; }
.qms-kpi-card small       { display: block; color: #888; font-size: 11px; margin-top: 4px; }

/* Badges */
.qms-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
/* NC severity */
.qms-badge.qms-low      { background: #d1f0da; color: #1a5e2e; }
.qms-badge.qms-medium   { background: #fff3cd; color: #7d5a00; }
.qms-badge.qms-high     { background: #ffe5cc; color: #7d3c00; }
.qms-badge.qms-critical { background: #f8d7da; color: #721c24; }
/* NC status */
.qms-badge.qms-nc-open        { background: #f8d7da; color: #721c24; }
.qms-badge.qms-nc-in_progress { background: #fff3cd; color: #7d5a00; }
.qms-badge.qms-nc-closed      { background: #d1f0da; color: #1a5e2e; }
.qms-badge.qms-nc-cancelled   { background: #e9ecef; color: #666; }
/* run status */
.qms-badge.qms-status-open        { background: #cce5ff; color: #004085; }
.qms-badge.qms-status-in_progress { background: #fff3cd; color: #7d5a00; }
.qms-badge.qms-status-completed   { background: #d1f0da; color: #1a5e2e; }
.qms-badge.qms-status-failed      { background: #f8d7da; color: #721c24; }
/* certificate status */
.qms-badge.qms-cert-pending  { background: #fff3cd; color: #7d5a00; }
.qms-badge.qms-cert-valid    { background: #d1f0da; color: #1a5e2e; }
.qms-badge.qms-cert-expired  { background: #e9ecef; color: #666; }
.qms-badge.qms-cert-revoked  { background: #f8d7da; color: #721c24; }

/* Certificate badge shortcode */
.qms-cert-badges  { display: flex; flex-wrap: wrap; gap: 8px; }
.qms-cert-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #e8f8f0; border: 1px solid #28a745;
    border-radius: 20px; padding: 4px 14px;
    font-size: 13px; font-weight: 600; color: #155724;
}

/* Loading indicator */
.qms-loading { color: #888; font-style: italic; }