*{margin:0;padding:0;box-sizing:border-box}html{font-size:clamp(14px,1.5vw,16px)}html,body,#root{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:1rem;line-height:1.5;background:#fff;min-height:100vh;padding:clamp(12px,2vw,24px);color:#1f2937}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fff;color:#1a5276;padding:1.25rem 0 .625rem;border-bottom:2px solid #e5e7eb;margin-bottom:1.25rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.header-left{flex:1;min-width:200px}.header h1{font-size:1.625rem;font-weight:700;margin-bottom:.25rem}.header p{opacity:.85;font-size:.875rem}.header-actions{display:flex;gap:.625rem;flex-wrap:wrap}.search-section{padding:0 0 14px}.filters-card{background:#fff;border:1px solid #e6eaf0;border-radius:16px;padding:12px 14px;box-shadow:0 1px 2px #1018280f}.filters-row{display:grid;grid-template-columns:minmax(250px,360px) minmax(210px,300px) minmax(240px,340px) minmax(150px,220px) minmax(120px,160px);grid-template-areas:"supplier item brand origin year";justify-content:start;gap:10px}.supplier-filter{grid-area:supplier;min-width:0}.item-filter{grid-area:item;min-width:0}.brand-filter{grid-area:brand;min-width:0}.filter-origin{grid-area:origin}.filter-year{grid-area:year}.filter-inline{display:flex;flex-direction:column;gap:5px;align-items:stretch;min-width:0}.filter-inline-label{width:auto;flex:0 0 auto;padding-top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.filter-label{font-size:.75rem;font-weight:650;color:#111827;line-height:1.1}.filter-inline-meta{font-size:.6875rem;color:#6b7280;font-weight:500;margin-left:auto;text-align:right}.filter-control{flex:1;min-width:0;width:100%}.search-container,.input-shell{position:relative}.input-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none}.search-input{width:100%;padding:.625rem .75rem;font-size:.875rem;border:1px solid #e5e7eb;border-radius:.65rem;outline:none;transition:all .2s;background:#fff}.search-input.has-icon{padding-left:2rem}.search-input.has-clear{padding-right:2rem}.input-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;border:1px solid transparent;background:transparent;color:#6b7280;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.input-clear:hover{background:#f3f4f6;border-color:#e5e7eb}.search-input:focus{border-color:#1a5276;box-shadow:0 0 0 3px #1a527614}.search-input::placeholder{color:#9ca3af}.search-input:disabled{background:#f9fafb;color:#9ca3af}.suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e1e5eb;border-radius:10px;margin-top:5px;box-shadow:0 4px 20px #0000001a;max-height:400px;overflow-y:auto;z-index:100}.suggestion-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;gap:12px}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background:#f8f9fa}.suggestion-item.selected{background:#e8f4f8}.supplier-name{font-size:.875rem;line-height:1.2;font-weight:600;color:#333}.supplier-stats{font-size:.6875rem;color:#666;white-space:nowrap}.supplier-stats span{margin-left:10px}.supplier-stats .ordered{color:#856404}.supplier-stats .transit{color:#004085}.loading{text-align:center;padding:30px;color:#666}.report-container{flex:1}.report-content{background:transparent;padding:0}.report-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #1a5276}.report-header-left{flex:1}.report-title{color:#1a5276;font-size:1.375rem;font-weight:700;margin:0 0 .5rem;text-decoration:underline}.report-date{font-size:.8125rem;color:#666;margin-bottom:.3125rem}.report-customer{font-weight:600;font-size:.8125rem;margin-bottom:.1875rem}.report-brand-filter{font-weight:600;font-size:.8125rem}.report-supplier-name{font-size:1.75rem;font-weight:800;color:#1a5276;font-family:Arial Black,Arial,sans-serif;letter-spacing:-.0625rem;text-align:right}.report-summary{display:flex;gap:18px;padding:10px 14px;margin-bottom:14px;background:#f8f9fa;border:1px solid #e8eef3;border-left:3px solid #1a5276;border-radius:10px;flex-wrap:wrap}.report-summary .summary-item{font-size:.75rem;color:#333}.report-summary .summary-item strong{font-weight:700;color:#000}.report-section-header{background:#1a5276;color:#fff;padding:.625rem 1rem;font-weight:700;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03rem;border-radius:.25rem .25rem 0 0}.report-table-container{overflow-x:auto}.report-table{width:100%;border-collapse:collapse;font-size:clamp(.72rem,.55vw,.8rem);table-layout:fixed}.report-table th{background:#2c3e50;color:#fff;padding:.5rem;text-align:left;font-weight:600;font-size:.75rem;white-space:nowrap;border:1px solid #1a252f}.report-table th:nth-child(8),.report-table td:nth-child(8){text-align:center}.report-table th:nth-child(1),.report-table td:nth-child(1){width:clamp(110px,9vw,140px)}.report-table th:nth-child(2),.report-table td:nth-child(2){width:clamp(74px,6vw,92px)}.report-table th:nth-child(3),.report-table td:nth-child(3){width:clamp(66px,5.5vw,86px)}.report-table th:nth-child(4),.report-table td:nth-child(4){width:clamp(180px,18vw,310px)}.report-table th:nth-child(5),.report-table td:nth-child(5){width:clamp(82px,6.5vw,110px)}.report-table th:nth-child(6),.report-table td:nth-child(6){width:clamp(92px,7vw,120px)}.report-table th:nth-child(7),.report-table td:nth-child(7){width:clamp(108px,7.5vw,136px)}.report-table th:nth-child(8),.report-table td:nth-child(8){width:clamp(40px,4vw,52px)}.report-table th:nth-child(9),.report-table td:nth-child(9){width:clamp(104px,10vw,160px)}.report-table th:nth-child(10),.report-table td:nth-child(10){width:clamp(74px,6vw,92px)}.report-table th:nth-child(11),.report-table td:nth-child(11){width:clamp(64px,6vw,104px)}.report-table th:nth-child(12),.report-table td:nth-child(12){width:clamp(86px,8vw,120px)}.report-table td{padding:.4375rem .5rem;border:1px solid #ddd;vertical-align:middle;color:#333}.report-table td strong{font-weight:700}.order-cell,.pfi-cell,.origin-cell,.bl-cell,.eta-cell,.tc-cell{white-space:nowrap}.pfi-cell{font-variant-numeric:tabular-nums}.eta-cell{overflow:hidden;text-overflow:ellipsis}.order-cell,.invoice-cell{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}.bl-cell{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.amount-cell{text-align:right;font-size:clamp(.74rem,.62vw,.88rem);white-space:normal;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums;font-weight:700}.tc-cell{text-align:center;font-variant-numeric:tabular-nums}.eta-cell{font-variant-numeric:tabular-nums}.product-cell div{line-height:1.25}.report-table .report-row:nth-child(2n){background:#f8f9fa}.report-table .report-row:hover{background:#f0f4f8}.product-cell div{padding:0;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container-cell{font-family:Consolas,Monaco,monospace;font-size:clamp(.66rem,.5vw,.72rem);color:#555;overflow-wrap:anywhere;word-break:break-all}.container-cell div{white-space:nowrap}.report-table td:nth-child(11){padding-left:.4375rem;padding-right:.4375rem}.brand-tag{background:#e8f4f8;color:#1a5276;padding:.0625rem .375rem;border-radius:.25rem;font-weight:600;font-size:clamp(.56rem,.35vw,.66rem);line-height:1.1;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.tc-number{font-weight:700;color:#000}.tc-danger{color:#dc3545;font-weight:700}.status-transit{color:#004085;font-weight:700}.status-pending{color:#dc3545;font-weight:700}.status-awaiting{color:#856404;font-weight:600}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#888;background:#fff;border-radius:12px}.empty-state svg{width:80px;height:80px;margin-bottom:20px;opacity:.3}.empty-state p{font-size:1rem}.keyboard-hint{margin-top:.375rem;font-size:.625rem;color:#9ca3af}.keyboard-hint kbd{display:inline-flex;align-items:center;justify-content:center;background:#f3f4f6;border:1px solid #e5e7eb;padding:.125rem .375rem;border-radius:.25rem;font-family:inherit;font-size:.6rem;min-width:1.125rem}.active-filters-bar{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(225,229,235,.9);border-radius:10px;background:#f8fafcbf}.active-filters-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}.active-filters-label{font-size:.6875rem;font-weight:750;color:#6b7280;letter-spacing:.02em;flex:0 0 auto}.active-filters-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.active-filters-clear{border:1px solid #e1e5eb;background:#ffffffe6;border-radius:10px;padding:.3125rem .625rem;font-size:.6875rem;font-weight:750;color:#6b7280;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;flex:0 0 auto}.active-filters-clear:hover{background:#f0f7fb;border-color:#d7dde6;color:#1a5276}.brand-selected-chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.brand-clear-link{background:transparent;border:1px solid transparent;color:#1a5276;font-size:.6875rem;font-weight:650;cursor:pointer;padding:.1875rem .4375rem;border-radius:999px;margin-left:.25rem}.brand-clear-link:hover{background:#f0f7fb;border-color:#d7dde6}.brand-chip{display:inline-flex;align-items:center;gap:.375rem;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;padding:.3125rem .625rem;border-radius:999px;font-size:.6875rem;cursor:pointer;transition:all .15s}.brand-chip:hover{border-color:#1a5276}.brand-chip.active{background:#e8f4f8;border-color:#b9ddea;color:#1a5276}.chip-remove{font-size:.875rem;font-weight:400;opacity:.7}.chip-remove:hover{opacity:1}.brand-suggestions,.item-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;border:1px solid #e1e5eb;border-radius:10px;background:#fff;max-height:260px;overflow-y:auto;box-shadow:0 12px 24px #1018281f}.brand-suggestion-item,.item-suggestion-item{width:100%;text-align:left;border:none;background:transparent;padding:.625rem .75rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.625rem;border-bottom:1px solid #f0f0f0;color:#2c3e50;font-size:.8125rem}.item-suggestion-item:last-child{border-bottom:none}.item-suggestion-item:hover{background:#f8f9fa}.brand-suggestion-item:last-child{border-bottom:none}.brand-suggestion-item:hover{background:#f8f9fa}.brand-suggestion-item.is-highlighted,.item-suggestion-item.is-highlighted{background:#eef6fb}.brand-suggestion-item.active{background:#e8f4f8}.item-suggestion-meta,.brand-suggestion-meta{font-size:.75rem;color:#1a5276;font-weight:700}.brand-no-results{padding:.625rem .75rem;color:#888;font-size:.8125rem}.brand-suggestion-item.search-typed{background:#f0f7fb;border-bottom:1px solid #d7dde6}.brand-suggestion-item.search-typed:hover{background:#e0eff7}.brand-suggestions-divider,.item-suggestions-divider{padding:.375rem .75rem;font-size:.6875rem;color:#888;text-transform:uppercase;letter-spacing:.02rem;background:#f8f9fa;border-bottom:1px solid #f0f0f0}.item-suggestion-item.search-typed{background:#f0f7fb;border-bottom:1px solid #d7dde6}.item-suggestion-item.search-typed:hover{background:#e0eff7}.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:400px}.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px #00000026;cursor:pointer;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.toast-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.toast-warning{background:#fff3cd;color:#856404;border:1px solid #ffeeba}.toast-info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.toast-icon{font-size:1rem;font-weight:700}.toast-message{flex:1;font-size:.875rem}.toast-close{background:none;border:none;font-size:1.125rem;cursor:pointer;opacity:.5;padding:0;line-height:1}.toast-close:hover{opacity:1}.stale-warning{background:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:.625rem 1.25rem;text-align:center;font-size:.8125rem}.stale-warning button{background:#856404;color:#fff;border:none;padding:.25rem .75rem;border-radius:.25rem;margin-left:.625rem;cursor:pointer;font-size:.75rem}.last-updated{text-align:center;font-size:.75rem;color:#888;padding:.625rem;border-top:1px solid #eee;margin-top:1.25rem}.date-filter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.date-filter label{font-size:.8125rem;color:#374151;font-weight:500}.date-filter input[type=date]{padding:.5rem .625rem;border:1px solid #d7dde6;border-radius:.375rem;font-size:.8125rem;outline:none;background:#fff}.date-filter input[type=date]:focus{border-color:#1a5276;box-shadow:0 0 0 2px #1a52761a}.btn-clear{background:#f8f9fa;border:1px solid #d7dde6;padding:.5rem .75rem;border-radius:.375rem;font-size:.75rem;cursor:pointer;color:#666}.btn-clear:hover{background:#e9ecef}.btn-action{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.125rem;border:1px solid #d7dde6;background:#fff;color:#374151;border-radius:.5rem;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-action:hover:not(:disabled){border-color:#1a5276;color:#1a5276}.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-action svg{flex-shrink:0}.btn-action.btn-excel{color:#047857}.btn-action.btn-excel:hover:not(:disabled){border-color:#047857;background:#ecfdf5}@media print{.header,.search-section,.stale-warning,.toast-container,.actions-row,.filters-card,.last-updated,.error{display:none!important}.app{display:block!important}.report-container{padding:0!important}.report-content{box-shadow:none!important;border-radius:0!important;padding:0!important}}@media (max-width: 1100px){.header{margin:0;padding:18px 14px}.search-section{padding:14px}.filters-row{grid-template-columns:1fr;grid-template-areas:"supplier" "item" "brand";gap:14px}.supplier-filter,.item-filter,.brand-filter{min-width:0;width:100%}.filters-row{grid-template-areas:"supplier" "item" "brand" "origin" "year"}.filter-origin,.filter-year{width:100%}.report-container{padding:0 14px 14px}}.skeleton-line{background:linear-gradient(90deg,#e8e8e8 25%,#f5f5f5,#e8e8e8 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-suggestions{position:relative;background:#fff;border:1px solid #e1e5eb;border-radius:10px;padding:10px 0;max-width:600px}.skeleton-item{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.skeleton-item .supplier-stats{display:flex;gap:15px}.loading-skeleton{display:flex;flex-direction:column;gap:20px;padding:20px}.loading-text{text-align:center;color:#888;font-size:14px}.report-skeleton{background:#fff;border-radius:10px;padding:30px;box-shadow:0 2px 10px #0000000d}.skeleton-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:2px solid #eee;margin-bottom:20px}.skeleton-header-left{display:flex;flex-direction:column;gap:8px}.skeleton-summary{display:flex;gap:30px;padding:15px 20px;background:#f9f9f9;border-radius:8px;margin-bottom:20px}.skeleton-table{border:1px solid #eee;border-radius:8px;overflow:hidden}.skeleton-table-header{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;padding:12px 15px;background:#2c3e50}.skeleton-table-header .skeleton-line{background:linear-gradient(90deg,#3d5166 25%,#4a6178,#3d5166 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-table-row{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;padding:12px 15px;border-bottom:1px solid #f0f0f0}.skeleton-table-row:last-child{border-bottom:none}.mt-8{margin-top:8px}@media (max-width: 768px){.header{margin:0;padding:16px 12px;border-radius:0;flex-direction:column;gap:12px}.header-left{min-width:100%}.header-actions{width:100%;justify-content:flex-start}.header h1{font-size:20px}.search-section{padding:12px}.filters-card{padding:16px;border-radius:10px}.filters-row{grid-template-columns:1fr;grid-template-areas:"supplier" "item" "brand";gap:14px}.supplier-filter,.item-filter,.brand-filter{min-width:0;width:100%}.filters-row{grid-template-areas:"supplier" "item" "brand" "origin" "year"}.filter-origin,.filter-year{width:100%}.filter-inline{gap:6px}.search-input{padding:12px 14px;font-size:16px}.search-input.has-icon{padding-left:2.5rem}.search-input.has-clear{padding-right:2.5rem}.date-filter{flex-wrap:wrap;justify-content:flex-start;width:100%}.date-filter input[type=date]{flex:1;min-width:130px;font-size:16px}.btn-action{flex:1;min-width:80px;justify-content:center;padding:10px 12px;font-size:12px}.report-container{padding:0 12px 12px}.report-frame{border-radius:10px}.empty-state{height:auto;padding:20px;border-radius:10px}.empty-state svg{width:60px;height:60px}.empty-state p{font-size:14px;text-align:center}.skeleton-summary{flex-wrap:wrap;gap:15px}.skeleton-table-header,.skeleton-table-row{grid-template-columns:repeat(4,1fr)}.skeleton-table-header .skeleton-line:nth-child(n+5),.skeleton-table-row .skeleton-line:nth-child(n+5){display:none}.toast-container{left:10px;right:10px;max-width:none}.stale-warning{flex-direction:column;gap:10px;padding:15px}.stale-warning button{margin-left:0;padding:8px 16px}.keyboard-hint{display:none}.last-updated{font-size:11px;padding:8px}}@media (max-width: 480px){.header{padding:15px}.header h1{font-size:18px}.header p{font-size:12px}.search-section{padding:12px}.section-label{font-size:11px}.suggestion-item{flex-direction:column;align-items:flex-start;gap:5px}.supplier-stats{width:100%;justify-content:space-between}.supplier-stats span{margin-left:0}.brand-chip{padding:8px 12px;font-size:13px}.btn-action{padding:14px 12px;font-size:13px}.report-container{padding:10px}}@media (hover: none) and (pointer: coarse){.suggestion-item{padding:16px 20px}.brand-suggestion-item{padding:14px 12px}.brand-chip{padding:10px 14px}.btn-action{min-height:48px}.btn-clear{min-height:44px;padding:10px 16px}}.error{background:#fee;color:#c00;padding:15px 20px;border-radius:8px;margin:16px}@media (max-width: 768px){.error{margin:15px;font-size:14px}}.filters-secondary{display:flex;align-items:flex-end;gap:12px;padding-top:10px;margin-top:10px;border-top:1px solid #eef2f7;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:5px;min-width:0}.filter-status{flex:1 1 auto;min-width:280px}.btn-clear-all{margin-left:auto}.filter-group-label{font-size:.6875rem;color:#374151;font-weight:650}.filter-group input[type=date],.filter-group select{padding:.5rem .625rem;border:1px solid #e5e7eb;border-radius:.65rem;font-size:.75rem;outline:none;background:#fff}.filter-group input[type=date]:focus,.filter-group select:focus{border-color:#1a5276;box-shadow:0 0 0 3px #1a527614}.filter-group select{cursor:pointer;min-width:150px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.filter-group select:disabled{opacity:.55;cursor:not-allowed;background-color:#f9fafb}.date-range{display:flex;align-items:center;gap:8px}.date-range input[type=date]{min-width:140px}.date-range-sep{color:#9ca3af;font-size:.875rem}.status-chips{display:flex;gap:6px;flex-wrap:wrap}.status-chip{border:1px solid #e5e7eb;background:#f9fafb;color:#374151;padding:.3125rem .625rem;border-radius:999px;font-size:.6875rem;cursor:pointer;transition:all .15s;font-weight:650}.status-chip:hover:not(:disabled){border-color:#1a5276;background:#fff}.status-chip:disabled{opacity:.5;cursor:not-allowed}.status-chip.active{background:#e8f4f8;border-color:#b9ddea;color:#1a5276}.btn-clear-all{background:#fff;border:1px solid #e5e7eb;padding:.375rem .625rem;border-radius:999px;font-size:.6875rem;cursor:pointer;color:#374151;font-weight:650;transition:all .2s;margin-left:auto}.btn-clear-all:hover{background:#f9fafb;border-color:#d1d5db}@media (max-width: 768px){.filters-secondary{flex-direction:column;align-items:stretch;gap:12px}.status-chips{flex-wrap:wrap}.filter-group{min-width:0}.filter-group select,.date-range input[type=date]{width:100%}.date-range{flex-direction:column;align-items:stretch}.btn-clear-all{margin-left:0;text-align:center}}