.metric-card{background:var(--color-white);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:var(--transition)}.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.metric-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.metric-card-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.metric-card-blue .metric-card-icon{background:linear-gradient(135deg,#3b82f6,#2563eb)}.metric-card-green .metric-card-icon{background:linear-gradient(135deg,#10b981,#059669)}.metric-card-orange .metric-card-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}.metric-card-red .metric-card-icon{background:linear-gradient(135deg,#ef4444,#dc2626)}.metric-card-purple .metric-card-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.metric-card-title{font-size:.875rem;font-weight:600;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.5px}.metric-card-body{display:flex;flex-direction:column;gap:.25rem}.metric-card-value{font-size:2rem;font-weight:700;color:var(--color-text);line-height:1.2}.metric-card-subtitle{font-size:.875rem;color:var(--color-text-light)}.metric-card-trend{font-size:.875rem;font-weight:600;margin-top:.5rem}.metric-card-trend.up{color:var(--color-success)}.metric-card-trend.down{color:var(--color-danger)}.search-bar{position:relative;display:flex;align-items:center;background:var(--color-white);border:2px solid var(--color-border);border-radius:10px;padding:.75rem 1rem;transition:var(--transition);box-shadow:var(--shadow-sm)}.search-bar:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px #3b82f61a}.search-icon{color:var(--color-text-light);flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-size:1rem;padding:0 .75rem;background:transparent;color:var(--color-text)}.search-input::placeholder{color:var(--color-text-light)}.search-clear{background:transparent;border:none;padding:.25rem;cursor:pointer;color:var(--color-text-light);display:flex;align-items:center;justify-content:center;border-radius:4px;transition:var(--transition)}.search-clear:hover{background:var(--color-bg);color:var(--color-text)}.filter-panel{background:var(--color-white);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.filter-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.filter-panel-title{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;color:var(--color-text)}.filter-clear-btn{display:flex;align-items:center;gap:.375rem;background:transparent;border:1px solid var(--color-border);padding:.375rem .75rem;border-radius:6px;font-size:.875rem;color:var(--color-text-light);cursor:pointer;transition:var(--transition)}.filter-clear-btn:hover{background:var(--color-bg);border-color:var(--color-text-light);color:var(--color-text)}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.filter-group{display:flex;flex-direction:column;gap:.5rem}.filter-label{font-size:.875rem;font-weight:600;color:var(--color-text)}.filter-select{padding:.625rem;border:1px solid var(--color-border);border-radius:6px;font-size:.875rem;background:var(--color-white);color:var(--color-text);cursor:pointer;transition:var(--transition)}.filter-select:hover{border-color:var(--color-accent)}.filter-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #3b82f61a}.data-table-container{background:var(--color-white);border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);overflow:hidden}.table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-table thead{background:var(--color-bg);border-bottom:2px solid var(--color-border)}.data-table th{padding:1rem;text-align:left;font-weight:600;color:var(--color-text);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.data-table th:hover{background:#f3f4f6}.th-content{display:flex;align-items:center;gap:.375rem}.sort-icon{color:var(--color-text-light);transition:var(--transition)}.sort-icon.active{color:var(--color-accent)}.sort-icon.inactive{opacity:.3}.data-table tbody tr{border-bottom:1px solid var(--color-border);cursor:pointer;transition:var(--transition)}.data-table tbody tr:hover{background:var(--color-bg)}.data-table tbody tr.row-failed{background:#fef2f2}.data-table tbody tr.row-failed:hover{background:#fee2e2}.data-table td{padding:1rem;color:var(--color-text)}.lot-code{font-family:Monaco,Courier New,monospace;background-color:#f3f4f6;padding:.25rem .5rem;border-radius:4px;font-size:.8125rem;font-weight:600;color:var(--color-accent)}.supplier-cell{display:flex;flex-direction:column;gap:.125rem}.supplier-location{font-size:.75rem;color:var(--color-text-light)}.quantity-cell{font-weight:600;text-align:right}.ccp-badge{display:inline-block;padding:.25rem .625rem;background:#dbeafe;color:#1e40af;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap}.status-cell{display:flex;align-items:center;gap:.5rem}.status-icon.status-pass{color:var(--color-success)}.status-icon.status-fail{color:var(--color-danger)}.status-icon.status-warning{color:var(--color-warning)}.no-data{padding:3rem;text-align:center;color:var(--color-text-light)}.no-data p{font-size:1rem}.dashboard-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:1.5rem}.chart-card{background:var(--color-white);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.chart-card.full-width{grid-column:1 / -1}.chart-header{margin-bottom:1.5rem}.chart-title{font-size:1.125rem;font-weight:700;color:var(--color-text);margin-bottom:.25rem}.chart-subtitle{font-size:.875rem;color:var(--color-text-light)}.custom-tooltip{background:var(--color-white);border:1px solid var(--color-border);border-radius:8px;padding:.75rem;box-shadow:var(--shadow-md)}.tooltip-label{font-weight:600;color:var(--color-text);margin-bottom:.5rem;font-size:.875rem}.tooltip-value{font-size:.8125rem;color:var(--color-text-light);margin:.25rem 0}.tooltip-value strong{color:var(--color-text)}.supplier-list{display:flex;flex-direction:column;gap:1rem}.supplier-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:var(--transition)}.supplier-item:hover{box-shadow:var(--shadow-sm);border-color:var(--color-accent)}.supplier-info{display:flex;flex-direction:column;gap:.25rem}.supplier-name{font-size:1rem;font-weight:700;color:var(--color-text)}.supplier-location{font-size:.875rem;color:var(--color-text-light)}.supplier-metrics{display:flex;gap:2rem}.metric-item{display:flex;flex-direction:column;gap:.25rem}.metric-label{font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:1.125rem;font-weight:700;color:var(--color-text)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.supplier-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.supplier-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}@media (max-width: 768px){.dashboard-charts{grid-template-columns:1fr}.supplier-metrics{flex-wrap:wrap;gap:1rem}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--color-white);border-radius:16px;box-shadow:var(--shadow-lg);max-width:1200px;width:100%;max-height:90vh;display:flex;flex-direction:column}.traceability-modal{max-width:1400px}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:2rem;border-bottom:1px solid var(--color-border)}.modal-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:.25rem}.modal-subtitle{font-size:.875rem;color:var(--color-text-light)}.modal-close{background:transparent;border:none;padding:.5rem;cursor:pointer;color:var(--color-text-light);border-radius:6px;transition:var(--transition)}.modal-close:hover{background:var(--color-bg);color:var(--color-text)}.modal-body{padding:2rem;overflow-y:auto;display:flex;flex-direction:column;gap:2rem}.section-title{font-size:1.125rem;font-weight:700;color:var(--color-text);margin-bottom:1rem}.record-overview{background:linear-gradient(135deg,#3b82f6,#2563eb);padding:1.5rem;border-radius:12px;color:#fff}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.overview-item{display:flex;flex-direction:column;gap:.25rem}.overview-label{font-size:.75rem;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.overview-value{font-size:1.125rem;font-weight:600}.overview-value code{background:#fff3;padding:.25rem .5rem;border-radius:4px;color:#fff}.traceability-chain{background:var(--color-bg);padding:1.5rem;border-radius:12px}.chain-timeline{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:1rem 0}.chain-stage{background:var(--color-white);border-radius:12px;padding:1.5rem;min-width:280px;box-shadow:var(--shadow-sm);border:2px solid var(--color-border)}.chain-stage.stage-blue{border-color:#3b82f6}.chain-stage.stage-green{border-color:#10b981}.chain-stage.stage-purple{border-color:#8b5cf6}.chain-stage.stage-orange{border-color:#f59e0b}.stage-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#fff}.stage-blue .stage-icon{background:linear-gradient(135deg,#3b82f6,#2563eb)}.stage-green .stage-icon{background:linear-gradient(135deg,#10b981,#059669)}.stage-purple .stage-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.stage-orange .stage-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}.stage-content{display:flex;flex-direction:column;gap:.75rem}.stage-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.stage-title{font-size:1rem;font-weight:700;color:var(--color-text)}.stage-date{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--color-text-light)}.stage-entity{display:flex;align-items:center;gap:.375rem;font-weight:600;color:var(--color-text)}.stage-location{font-size:.875rem;color:var(--color-text-light);padding-left:1.25rem}.stage-lot{margin-top:.5rem}.stage-lot code{background:var(--color-bg);padding:.375rem .625rem;border-radius:6px;font-size:.8125rem;font-weight:600;color:var(--color-accent)}.stage-details{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.5rem}.detail-item{display:flex;flex-direction:column;gap:.125rem}.detail-label{font-size:.75rem;color:var(--color-text-light);text-transform:capitalize}.detail-value{font-size:.875rem;color:var(--color-text);font-weight:500}.chain-arrow{display:flex;align-items:center;padding:0 1rem;color:var(--color-text-light)}.quality-section{background:var(--color-bg);padding:1.5rem;border-radius:12px}.quality-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.quality-item{display:flex;flex-direction:column;gap:.375rem;padding:1rem;background:var(--color-white);border-radius:8px;border:1px solid var(--color-border)}.quality-label{font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.5px}.quality-value{font-size:1rem;font-weight:600;color:var(--color-text)}.quality-badge{display:inline-block;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;text-align:center}.badge-success{background:#d1fae5;color:#065f46}.badge-danger{background:#fee2e2;color:#991b1b}.compliance-section{background:#d1fae5;padding:1.5rem;border-radius:12px;border:2px solid #10b981}.compliance-checklist{display:flex;flex-direction:column;gap:.75rem}.compliance-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--color-text)}.compliance-item.completed{color:#065f46}.compliance-item svg{color:#10b981;flex-shrink:0}.recall-modal{max-width:1200px}.recall-header{background:linear-gradient(135deg,#fef3c7,#fde68a);border-bottom:3px solid #f59e0b}.recall-header .modal-title{display:flex;align-items:center;gap:.75rem;color:#92400e}.recall-alert{background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #ef4444;border-radius:12px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;color:#991b1b}.recall-alert svg{flex-shrink:0;color:#dc2626}.recall-alert h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.recall-alert p{font-size:.875rem;margin:.25rem 0}.recall-alert code{background:#0000001a;padding:.25rem .5rem;border-radius:4px;font-weight:700}.recall-time{font-weight:600;color:#7c2d12;margin-top:.5rem}.impact-summary{background:var(--color-bg);padding:1.5rem;border-radius:12px}.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.impact-card{background:var(--color-white);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;border:2px solid var(--color-border);transition:var(--transition)}.impact-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.impact-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.impact-icon.impact-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.impact-icon.impact-orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.impact-icon.impact-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.impact-details{display:flex;flex-direction:column;gap:.25rem}.impact-value{font-size:1.75rem;font-weight:700;color:var(--color-text);line-height:1}.impact-label{font-size:.875rem;color:var(--color-text-light);font-weight:500}.affected-section{background:var(--color-bg);padding:1.5rem;border-radius:12px}.customer-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.customer-card{background:var(--color-white);padding:1rem;border-radius:8px;border:1px solid var(--color-border);display:flex;align-items:center;gap:.625rem;font-weight:600;color:var(--color-text)}.customer-card svg{color:var(--color-accent);flex-shrink:0}.lots-section{background:var(--color-bg);padding:1.5rem;border-radius:12px}.lots-table-wrapper{overflow-x:auto;background:var(--color-white);border-radius:8px;border:1px solid var(--color-border)}.lots-table{width:100%;border-collapse:collapse;font-size:.875rem}.lots-table thead{background:var(--color-bg);border-bottom:2px solid var(--color-border)}.lots-table th{padding:1rem;text-align:left;font-weight:600;color:var(--color-text);white-space:nowrap}.lots-table tbody tr{border-bottom:1px solid var(--color-border)}.lots-table tbody tr:hover{background:var(--color-bg)}.lots-table td{padding:1rem;color:var(--color-text)}.recall-actions{background:#dbeafe;padding:1.5rem;border-radius:12px;border:2px solid #3b82f6}.action-list{display:flex;flex-direction:column;gap:1rem}.action-item{background:var(--color-white);padding:1.25rem;border-radius:8px;display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--color-border)}.action-number{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.action-content h4{font-size:1rem;font-weight:700;color:var(--color-text);margin-bottom:.375rem}.action-content p{font-size:.875rem;color:var(--color-text-light);line-height:1.5}.compliance-note{background:#d1fae5;border:2px solid #10b981;border-radius:12px;padding:1.25rem}.compliance-note p{font-size:.875rem;color:#065f46;line-height:1.6;margin:0}.compliance-note strong{font-weight:700}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;box-shadow:var(--shadow-lg);position:sticky;top:0;z-index:100}.header-content{max-width:1400px;margin:0 auto;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}.header-left{display:flex;align-items:center;gap:1rem}.logo{width:56px;height:56px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #3b82f666}.header-text{display:flex;flex-direction:column;gap:.25rem}.app-title{font-size:1.5rem;font-weight:700;margin:0}.app-subtitle{font-size:.875rem;opacity:.9;margin:0}.header-actions{display:flex;gap:.75rem;flex-wrap:wrap}.btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:var(--transition);white-space:nowrap}.btn-secondary{background:#fff;color:var(--color-text)}.btn-secondary:hover{background:#f3f4f6;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.btn-warning:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b66}.app-main{flex:1;padding:2rem 0}.container{max-width:1400px;margin:0 auto;padding:0 2rem}.metrics-section{margin-bottom:2rem}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.search-section{margin-bottom:1.5rem}.filter-section,.charts-section,.table-section{margin-bottom:2rem}.section-header{margin-bottom:1.5rem}.section-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:.25rem}.section-subtitle{font-size:.875rem;color:var(--color-text-light)}.compliance-badge{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:2px solid #10b981;border-radius:16px;padding:2rem;margin-bottom:2rem}.badge-content{display:flex;align-items:flex-start;gap:1.5rem}.badge-icon{width:64px;height:64px;background:linear-gradient(135deg,#10b981,#059669);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.badge-text h3{font-size:1.25rem;font-weight:700;color:#065f46;margin-bottom:.5rem}.badge-text p{font-size:.875rem;color:#047857;line-height:1.6;margin:0}.app-footer{background:var(--color-secondary);color:#fff;padding:2rem 0;margin-top:auto}.app-footer .container{text-align:center}.app-footer p{margin:0;font-size:.875rem;opacity:.9}@media (max-width: 1024px){.container{padding:0 1.5rem}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}@media (max-width: 768px){.header-content{padding:1rem 1.5rem}.app-title{font-size:1.25rem}.app-subtitle{font-size:.8125rem}.header-actions{width:100%}.btn{flex:1;justify-content:center}.container{padding:0 1rem}.app-main{padding:1.5rem 0}.metrics-grid{grid-template-columns:1fr}.section-title{font-size:1.25rem}.badge-content{flex-direction:column}}@media (max-width: 480px){.logo{width:48px;height:48px}.app-title{font-size:1.125rem}.compliance-badge{padding:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #0f172a;--color-secondary: #1e293b;--color-accent: #3b82f6;--color-success: #10b981;--color-warning: #f59e0b;--color-danger: #ef4444;--color-text: #1f2937;--color-text-light: #6b7280;--color-border: #e5e7eb;--color-bg: #f9fafb;--color-white: #ffffff;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--transition: all .2s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);line-height:1.6}code{font-family:Monaco,Courier New,monospace;background-color:#f3f4f6;padding:.125rem .375rem;border-radius:.25rem;font-size:.875em}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}