:root{--primary-color: #4A90E2;--secondary-color: #F5A623;--background-color: #F4F7FC;--sidebar-bg: #1E293B;--sidebar-text: #E2E8F0;--sidebar-text-hover: #FFFFFF;--card-bg: #FFFFFF;--text-color: #334155;--border-color: #E2E8F0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--status-ontime: #22C55E;--status-atrisk: #F59E0B;--status-late: #EF4444;--status-pending: #64748B}body{margin:0;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(--background-color);color:var(--text-color)}#root{height:100vh;width:100vw;display:flex;overflow:hidden}.login-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2)}.login-form{background:var(--card-bg);padding:2.5rem;border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:400px;text-align:center}.login-form h1{margin-top:0;color:var(--primary-color)}.input-group{margin-bottom:1.5rem;text-align:left}.input-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#64748b}.input-group input,.input-group textarea,.input-group select{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;box-sizing:border-box;font-family:inherit;background-color:#fff;color:var(--text-color)}.input-group textarea{resize:vertical;min-height:80px}.login-form button{width:100%;padding:.8rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:background-color .3s}.login-form button:hover{background-color:#357abd}.app-container{display:flex;width:100%;height:100%}.sidebar{width:260px;background-color:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{display:flex;align-items:center;padding:1.5rem;font-size:1.5rem;font-weight:700;border-bottom:1px solid #334155}.sidebar-header .material-symbols-outlined{margin-right:.5rem;font-size:2rem}.nav-list{list-style:none;padding:0;margin:1rem 0;flex-grow:1}.nav-item a{display:flex;align-items:center;padding:.9rem 1.5rem;color:var(--sidebar-text);text-decoration:none;transition:background-color .2s,color .2s;border-left:3px solid transparent}.nav-item a:hover{background-color:#334155;color:var(--sidebar-text-hover)}.nav-item a.active{background-color:var(--primary-color);color:#fff;border-left:3px solid var(--secondary-color)}.nav-item .material-symbols-outlined{margin-right:1rem}.nav-section-title{padding:1rem 1.5rem .5rem;font-size:.8rem;text-transform:uppercase;color:#94a3b8;font-weight:700}.main-content{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.header{padding:1rem 2rem;background-color:var(--card-bg);border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px #0000000d;display:flex;justify-content:space-between;align-items:center}.header h1{margin:0;font-size:1.5rem;text-transform:capitalize}.user-profile{display:flex;align-items:center;gap:.5rem}.user-profile .material-symbols-outlined{font-size:2.5rem;color:#64748b}.content-area{padding:2rem;overflow-y:auto;flex-grow:1}.content-area h2{margin-top:0}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.kpi-card{background-color:var(--card-bg);padding:1.5rem;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:1rem}.kpi-card .icon{font-size:3rem;padding:1rem;border-radius:50%;color:#fff}.kpi-card.orders .icon{background-color:#4a90e2}.kpi-card.shipments .icon{background-color:#f5a623}.kpi-card.dispatch .icon{background-color:#7ed321}.kpi-card.invoices .icon{background-color:#d0021b}.kpi-card.revenue-mtd .icon,.kpi-card.revenue-ytd .icon{background-color:#16a34a}.kpi-card.outstanding .icon{background-color:#0ea5e9}.kpi-card.overdue .icon{background-color:#d97706}.kpi-card-info h3{margin:0;font-size:1rem;color:#64748b}.kpi-card-info .value{margin:.25rem 0 0;font-size:2.25rem;font-weight:700}.kpi-card-info .value.small{font-size:1rem;font-weight:400;display:flex;flex-direction:column;gap:.25rem}.dashboard-section{margin-top:2rem;background:var(--card-bg);padding:1.5rem;border-radius:12px;box-shadow:var(--shadow)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.section-header h3{margin:0;font-size:1.25rem}.view-toggle{display:flex;background-color:var(--background-color);border-radius:8px;padding:.25rem}.view-toggle button{padding:.5rem 1rem;border:none;background-color:transparent;color:var(--text-color);border-radius:6px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem}.view-toggle button.active{background-color:var(--card-bg);color:var(--primary-color);box-shadow:0 1px 3px #0000001a}.view-toggle .material-symbols-outlined{font-size:1.25rem}.map-container{width:100%;height:450px;background-color:#e2e8f0;border-radius:8px;position:relative;overflow:hidden}.route-line{stroke:#94a3b8;stroke-width:.5;stroke-dasharray:1 1}.progress-line{stroke-width:.8}.progress-line.status-on-time{stroke:var(--status-ontime)}.progress-line.status-at-risk{stroke:var(--status-atrisk)}.progress-line.status-late{stroke:var(--status-late)}.progress-line.status-pending{stroke:var(--status-pending)}.shipment-marker .marker-icon{font-size:2.5px;color:#fff;border-radius:50%;padding:.25px;box-sizing:border-box}.shipment-marker.status-on-time .marker-icon{background-color:var(--status-ontime)}.shipment-marker.status-at-risk .marker-icon{background-color:var(--status-atrisk)}.shipment-marker.status-pending .marker-icon{background-color:var(--status-pending)}.shipment-marker.status-late .marker-icon{background-color:var(--status-late);animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.shipments-view-container{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;min-height:450px}.table-container{overflow-x:auto;height:100%}.shipments-table{width:100%;border-collapse:collapse;font-size:.9rem}.shipments-table th,.shipments-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)}.shipments-table th{background-color:#f8fafc;font-weight:600}.shipments-table tbody tr{transition:background-color .2s}.shipments-table tbody tr:not(.no-hover):hover{background-color:#f1f5f9}.shipments-table tbody tr.selected{background-color:#e0f2fe}.status-badge{padding:.25rem .6rem;border-radius:12px;font-weight:500;color:#fff;font-size:.75rem}.status-on-time{background-color:var(--status-ontime)}.status-at-risk{background-color:var(--status-atrisk)}.status-late{background-color:var(--status-late)}.status-pending{background-color:var(--status-pending)}.status-paid{background-color:var(--status-ontime)}.status-invoice-sent{background-color:#3b82f6}.status-overdue{background-color:var(--status-late)}.status-row-late{background-color:#fee2e2}.status-row-at-risk{background-color:#fef3c7}.status-row-pending{background-color:#f1f5f9}tr.unassigned-row{background-color:#f7f9fc;font-style:italic;color:#64748b}.progress-bar-container{width:100px;height:8px;background-color:var(--border-color);border-radius:4px;overflow:hidden}.progress-bar{height:100%;border-radius:4px}.shipment-detail-container,.shipment-detail-placeholder{border:1px solid var(--border-color);border-radius:8px;padding:1rem;height:100%;max-height:500px;display:flex;flex-direction:column}.shipment-detail-placeholder{justify-content:center;align-items:center;text-align:center;color:#94a3b8}.shipment-detail-placeholder .material-symbols-outlined{font-size:3rem}.detail-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.detail-header h3{margin:0}.detail-section{padding:1rem 0}.detail-section h4{margin:0 0 .75rem;font-size:.9rem;color:#64748b;text-transform:uppercase}.driver-info{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}.driver-info div{display:flex;align-items:center;gap:.5rem}.escalation-actions{display:flex;flex-direction:column;gap:.5rem}.escalation-actions button{padding:.5rem;border:1px solid var(--border-color);background:#f8fafc;color:var(--text-color);border-radius:6px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem;justify-content:center;transition:background-color .2s}.escalation-actions button:hover{background-color:#f1f5f9}.escalation-actions button:disabled{background-color:#f8fafc;color:#94a3b8;cursor:not-allowed}.escalation-actions button.escalate-manager{background-color:#fef3c7;border-color:#fbbf24;color:#92400e}.escalation-actions button.escalate-manager:hover{background-color:#fde68a}.notes-section{flex-grow:1;display:flex;flex-direction:column;min-height:0}.notes-history{flex-grow:1;overflow-y:auto;padding-right:.5rem}.no-notes{color:#94a3b8;font-size:.9rem}.note-item{padding:.75rem;border-radius:6px;background:#f8fafc;margin-bottom:.5rem}.note-text{margin:0 0 .25rem;font-size:.9rem}.note-meta{margin:0;font-size:.75rem;color:#94a3b8}.add-note-form{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.add-note-form textarea{width:100%;min-height:60px;padding:.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:.9rem;box-sizing:border-box;resize:vertical}.add-note-form button{align-self:flex-end;padding:.5rem 1rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:6px;cursor:pointer}.wizard-container{background:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:var(--shadow);max-width:800px;margin:auto}.wizard-step h3{margin-top:0;margin-bottom:1.5rem;text-align:center;font-size:1.25rem}.dropzone{border:2px dashed var(--border-color);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s;background-color:#f8fafc}.dropzone:hover{background-color:#f1f5f9;border-color:var(--primary-color)}.dropzone .material-symbols-outlined{font-size:3rem;color:var(--primary-color)}.dropzone p{margin:.5rem 0 0;color:#64748b}.wizard-actions{margin-top:1.5rem;display:flex;justify-content:flex-end;gap:.5rem}.wizard-actions>div{display:flex;gap:.5rem}.wizard-actions button{padding:.8rem 1.5rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .3s;display:flex;align-items:center;gap:.5rem}.wizard-actions button:disabled{background-color:#94a3b8;cursor:not-allowed}.wizard-actions .secondary-button{background-color:transparent;border:1px solid var(--border-color);color:var(--text-color)}.wizard-actions .secondary-button:hover{background-color:#f8fafc}.wizard-actions.space-between{justify-content:space-between}.wizard-actions.center{justify-content:center}.error-message{color:var(--status-late);margin-top:1rem;text-align:center;font-size:.9rem}.spinner{width:1.25em;height:1.25em;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}.spinner.large{width:3em;height:3em;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}.page-form{background:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:var(--shadow);max-width:800px}.review-form{padding:2rem;box-shadow:none}.review-form input:disabled,.review-form textarea:disabled{background-color:#f8fafc;color:var(--text-color);opacity:1;-webkit-text-fill-color:var(--text-color);border:1px solid var(--border-color);cursor:not-allowed}.form-row{display:flex;gap:1.5rem}.form-row>.input-group{flex:1;margin-bottom:1.5rem}.page-form button{padding:.8rem 1.5rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .3s}.page-form button:hover{background-color:#357abd}.ai-automation-section{background:linear-gradient(135deg,#e0f2fe,#f0e6ff);border:1px solid var(--primary-color);border-radius:12px;padding:1.5rem;margin-bottom:2rem;text-align:center}.ai-automation-section h4{margin:0 0 .5rem;font-size:1.25rem;color:var(--sidebar-bg)}.ai-automation-section p{margin:0 0 1rem;color:#334155;max-width:600px;margin-left:auto;margin-right:auto}.ai-automation-section button{padding:.8rem 1.5rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.ai-automation-section button:disabled{background-color:#94a3b8;cursor:not-allowed}.planning-container{display:grid;grid-template-columns:3fr 2fr;gap:2rem;margin-bottom:2rem}.unassigned-shipments-list h3,.consolidation-planner h3,.created-routes-section h3{margin-top:0;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.shipment-cards-container{max-height:500px;overflow-y:auto;padding-right:.5rem}.no-items-message{color:#94a3b8;text-align:center;padding:2rem}.shipment-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:1rem;margin-bottom:.75rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:all .2s;border-left:4px solid transparent}.shipment-card:hover{border-color:var(--primary-color);background-color:#f1f5f9}.shipment-card.selected{border-left-color:var(--primary-color);background-color:#ebf8ff;border-color:var(--primary-color)}.shipment-card input[type=checkbox]{pointer-events:none;width:1.2rem;height:1.2rem}.shipment-card-info{flex-grow:1}.shipment-card-info strong{display:block;margin-bottom:.25rem}.shipment-card-info p{margin:0;font-size:.85rem;color:#64748b}.shipment-card-weight{font-weight:700;font-size:1rem}.consolidation-planner{background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow);padding:1.5rem}.planner-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:#94a3b8}.planner-placeholder .material-symbols-outlined{font-size:3rem}.planner-content{display:flex;flex-direction:column;gap:1.5rem;height:100%}.selected-shipments-info p{margin:0}.weight-tracker{width:100%}.weight-info{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem}.weight-bar-container{height:12px;background-color:#e2e8f0;border-radius:6px;overflow:hidden}.weight-bar{height:100%;background-color:var(--status-ontime);border-radius:6px;transition:width .3s}.weight-bar.over{background-color:var(--status-late)}.weight-warning{color:var(--status-late);font-size:.85rem;margin:.5rem 0 0;text-align:center}.create-route-btn{width:100%;padding:.8rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem}.create-route-btn:disabled{background-color:#94a3b8;cursor:not-allowed}.created-routes-section{margin-top:2rem}.created-routes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.route-card{background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow);padding:1.5rem;border-top:4px solid var(--primary-color)}.route-card-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:.75rem;margin-bottom:.75rem}.route-card-header h4{margin:0}.route-card-header span{display:flex;align-items:center;gap:.25rem;font-weight:500}.route-card-body p{margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}.route-card-body ol{padding-left:1.5rem;margin:0;font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container{background-color:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:0 10px 25px #0000001a;width:90%;max-width:800px;max-height:90vh;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:1rem;margin-bottom:1rem}.modal-header h3{margin:0;font-size:1.5rem}.modal-header .close-button{background:none;border:none;font-size:2rem;cursor:pointer;color:#94a3b8}.modal-body{overflow-y:auto;padding-right:1rem}.modal-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem}.modal-loading p{font-size:1.25rem;color:var(--text-color);margin:0}.suggested-routes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.suggested-route-card{border:1px solid var(--border-color);border-radius:8px;padding:1rem;background-color:#f8fafc}.suggested-route-card h4{margin:0 0 1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.suggested-route-card p{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:.9rem}.suggested-route-card ol,.suggested-route-card ul{padding-left:1.25rem;margin:.5rem 0;font-size:.9rem}.shipment-id-list{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:.5rem}.shipment-id-list li{background-color:#e2e8f0;padding:.2rem .5rem;border-radius:4px;font-size:.8rem}.modal-footer{border-top:1px solid var(--border-color);padding-top:1rem;margin-top:1rem;display:flex;justify-content:flex-end;gap:.75rem}.modal-footer button{padding:.6rem 1.2rem;border-radius:8px;font-size:1rem;cursor:pointer;background:var(--primary-color);color:#fff;border:none}.modal-footer button.secondary-button{background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color)}.modal-footer button:disabled{background-color:#94a3b8;cursor:not-allowed}.dispatch-kpis{margin-bottom:2rem}.assignment-form{padding-top:1rem}.assignment-form h4{margin:0 0 1.5rem;font-size:1rem;text-align:center;background:#f1f5f9;padding:.5rem;border-radius:6px}.dispatch-btn{width:100%;padding:.8rem;border:none;background-color:var(--status-ontime);color:#fff;border-radius:8px;font-size:1.1rem;cursor:pointer;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.dispatch-btn:disabled{background-color:#94a3b8;cursor:not-allowed}.mark-as-paid-btn{padding:.4rem .8rem;border:none;background-color:var(--status-ontime);color:#fff;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;transition:background-color .2s}.mark-as-paid-btn:hover{background-color:#15803d}
