/* GHS Pictogram */
.ghs-grid{display:flex;flex-wrap:wrap;gap:8px}
.ghs-pictogram{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px;border:2px solid #e5eaf0;border-radius:10px;cursor:pointer;transition:all .15s;background:#fff;min-width:70px}
.ghs-pictogram:hover{border-color:#0f766e;transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,118,110,.1)}
.ghs-pictogram.is-selected{border-color:#0f766e;background:#f0fdfa}
.ghs-pictogram input{position:absolute;opacity:0}
.ghs-diamond{width:50px;height:50px;display:flex;align-items:center;justify-content:center}
.ghs-label{font-size:9px;font-weight:700;color:#64748b;margin-top:4px;text-align:center}
.ghs-pictogram.is-selected .ghs-label{color:#0f766e}
.ghs-check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:#0f766e;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.ghs-check svg{width:12px;height:12px}

/* Hazard Banner */
.hazard-banner{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;margin-bottom:24px}
.hazard-banner.is-critical{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #dc2626}
.hazard-banner.is-high{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-left:4px solid #ea580c}
.hazard-banner.is-medium{background:linear-gradient(135deg,#fefce8,#fef9c3);border-left:4px solid #ca8a04}
.hazard-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.hazard-banner.is-critical .hazard-icon{background:#dc2626;color:#fff}
.hazard-banner.is-high .hazard-icon{background:#ea580c;color:#fff}
.hazard-banner.is-medium .hazard-icon{background:#ca8a04;color:#fff}
.hazard-content h3{font-weight:700;font-size:16px}
.hazard-banner.is-critical .hazard-content h3{color:#991b1b}
.hazard-banner.is-high .hazard-content h3{color:#9a3412}
.hazard-banner.is-medium .hazard-content h3{color:#854d0e}
.hazard-content p{font-size:13px;margin-top:2px}
.hazard-pictograms{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.hazard-pictograms span{font-size:10px;background:rgba(0,0,0,.1);padding:2px 6px;border-radius:4px}

/* Deviation Stepper */
.deviation-stepper{display:flex;align-items:center;margin:24px 0}
.deviation-step{display:flex;align-items:center;flex:1}
.step-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;transition:all .2s}
.step-circle.is-pending{background:#f1f5f9;color:#94a3b8;border:2px solid #e2e8f0}
.step-circle.is-active{background:#0f766e;color:#fff;border:2px solid #0f766e;box-shadow:0 0 0 4px #ccfbf1}
.step-circle.is-done{background:#10b981;color:#fff;border:2px solid #10b981}
.step-info{margin-left:12px;flex:1;min-width:0}
.step-info h4{font-size:13px;font-weight:600;color:#334155}
.step-info small{font-size:11px;color:#64748b}
.deviation-step.is-active .step-info h4{color:#0f766e}
.step-line{flex:1;height:3px;background:#e2e8f0;margin:0 8px;border-radius:2px}
.deviation-step.is-done .step-line,.deviation-step.is-active .step-line{background:#10b981}

/* Callout */
.compliance-callout{display:flex;gap:12px;padding:16px;border-radius:12px;border:1px solid;margin:16px 0}
.compliance-callout.is-iso{background:#eff6ff;border-color:#93c5fd}
.compliance-callout.is-warning{background:#fffbeb;border-color:#fcd34d}
.compliance-callout.is-danger{background:#fef2f2;border-color:#fca5a5}
.compliance-callout.is-success{background:#ecfdf5;border-color:#6ee7b7}
.compliance-callout-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.compliance-callout.is-iso .compliance-callout-icon{background:#dbeafe;color:#2563eb}
.compliance-callout.is-warning .compliance-callout-icon{background:#fef3c7;color:#d97706}
.compliance-callout.is-danger .compliance-callout-icon{background:#fee2e2;color:#dc2626}
.compliance-callout.is-success .compliance-callout-icon{background:#d1fae5;color:#059669}
.compliance-callout-content h4{font-size:14px;font-weight:600}
.compliance-callout.is-iso .compliance-callout-content h4{color:#1e40af}
.compliance-callout.is-warning .compliance-callout-content h4{color:#92400e}
.compliance-callout-content p{font-size:13px;margin-top:4px}

/* Badges */
.severity-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase}
.severity-badge.is-critical{background:#fef2f2;color:#dc2626}
.severity-badge.is-major{background:#fff7ed;color:#ea580c}
.severity-badge.is-minor{background:#fefce8;color:#ca8a04}
.severity-badge.is-observation{background:#f8fafc;color:#64748b}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600}
.status-badge.is-open{background:#dbeafe;color:#2563eb}
.status-badge.is-active,.status-badge.is-in-progress{background:#fef3c7;color:#d97706}
.status-badge.is-pending{background:#f3e8ff;color:#9333ea}
.status-badge.is-resolved,.status-badge.is-released{background:#d1fae5;color:#059669}
.status-badge.is-closed{background:#f1f5f9;color:#475569}
.status-badge.is-overdue{background:#fef2f2;color:#dc2626}

/* Cards */
.compliance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.compliance-card{background:#fff;border:1px solid #e5eaf0;border-radius:12px;padding:16px;transition:all .15s}
.compliance-card:hover{border-color:#0f766e;box-shadow:0 4px 12px rgba(15,118,110,.08);transform:translateY(-2px)}
.compliance-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#f0fdfa;color:#0f766e}
.compliance-card h3{font-size:14px;font-weight:600;color:#1e293b;margin-top:8px}
.compliance-card p{font-size:12px;color:#64748b;margin-top:4px;line-height:1.4}

/* Responsive */
@media(max-width:768px){
.ghs-grid{gap:6px}
.ghs-pictogram{min-width:60px;padding:6px}
.hazard-banner{flex-direction:column;text-align:center}
.deviation-stepper{flex-wrap:wrap;gap:12px}
.deviation-step{flex:none;width:100%}
.step-line{display:none}
.compliance-grid{grid-template-columns:1fr}
}