*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial, sans-serif;background-color:#F5E6EA;color:#333;height:100vh;display:flex;flex-direction:column}
.header{background-color:#8B1538;color:white;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}
.header h1{font-size:24px;font-weight:normal}
.user-info{font-size:14px}
.app-container{flex:1;display:flex;overflow:hidden}
.sidebar{width:80px;background-color:#8B1538;display:flex;flex-direction:column;align-items:center;padding:20px 0;box-shadow:2px 0 5px rgba(0,0,0,0.1)}
.logo{color:white;font-size:18px;font-weight:bold;margin-bottom:30px;text-align:center}
.nav-item{width:50px;height:50px;margin:10px 0;background:none;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(255,255,255,0.7);transition:all .3s ease;position:relative}
.nav-item:hover{background-color:rgba(255,255,255,0.2);color:white}
.nav-item.active{background-color:#C41E3A;color:white}
.tooltip{position:absolute;left:70px;background:#333;color:white;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s;z-index:1000}
.nav-item:hover .tooltip{opacity:1}
.main-content{flex:1;padding:20px;overflow-y:auto;max-width:1200px;margin:0 auto;width:100%}
.card{background:white;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border:1px solid #E8D5DB}
.section-title{font-size:18px;color:#8B1538;margin-bottom:15px;padding-bottom:5px;border-bottom:2px solid #F5E6EA}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;margin-bottom:20px}
.form-group{display:flex;flex-direction:column}
.form-group label{font-weight:bold;margin-bottom:5px;color:#555}
.form-group input,.form-group select,.form-group textarea{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#C41E3A;box-shadow:0 0 0 2px rgba(196,30,58,0.2)}
.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:bold;text-decoration:none;display:inline-block;text-align:center}
.btn-primary{background-color:#C41E3A;color:white}
.btn-primary:hover{background-color:#8B1538}
.btn-secondary{background-color:#6c757d;color:white}
.btn-secondary:hover{background-color:#5a6268}
.table-container{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{text-align:left;padding:12px 8px;border-bottom:1px solid #E8D5DB}
th{background-color:#F5E6EA;font-weight:bold;color:#8B1538}
tr:hover{background-color:#F9F9F9}
.status-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold}
.status-nieuw{background-color:#E3F2FD;color:#1976D2}
.status-lopend{background-color:#FFF3E0;color:#F57C00}
.status-afleveren{background-color:#E8F5E8;color:#388E3C}
.status-ophalen{background-color:#F3E5F5;color:#7B1FA2}
.status-voltooid{background-color:#E0E0E0;color:#424242}
.search-filter{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap}
.search-filter input,.search-filter select{padding:8px 12px;border:1px solid #ddd;border-radius:4px}
.hidden{display:none}
.actions{display:flex;gap:10px;margin-top:20px}
.edit-btn,.delete-btn{padding:5px 10px;border:none;border-radius:3px;cursor:pointer;font-size:12px}
.edit-btn{background-color:#17a2b8;color:white}
.delete-btn{background-color:#dc3545;color:white}
.truck-planning{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}
.truck-card{background:white;border-radius:8px;padding:15px;border:2px solid #E8D5DB;position:relative}
.truck-header{background-color:#8B1538;color:white;padding:10px;margin:-15px -15px 15px -15px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center}
.truck-capacity{font-size:12px;background-color:rgba(255,255,255,0.2);padding:3px 8px;border-radius:12px}
.capacity-bar{background-color:#f0f0f0;border-radius:10px;height:20px;margin:10px 0;overflow:hidden}
.capacity-fill{height:100%;background-color:#28a745;transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:bold}
.capacity-fill.warning{background-color:#ffc107}
.capacity-fill.danger{background-color:#dc3545}
.transport-item{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:8px;margin:5px 0;font-size:12px;cursor:move}
.transport-item:hover{background-color:#e9ecef}
.unplanned-orders{background:white;border-radius:8px;padding:20px;border:2px solid #ffc107}
.dimensions-info{font-size:11px;color:#666;margin-top:3px}
.drag-over{border-color:#C41E3A !important;background-color:#fff5f5 !important}
.drop-zone{min-height:100px;border:1px dashed #ccc;padding:10px;border-radius:4px}
#mapContainer{height:500px;width:100%;border-radius:8px;border:1px solid #E8D5DB}
.map-filters{display:flex;gap:15px;margin-bottom:15px;flex-wrap:wrap}
.legend{background:white;padding:10px;border-radius:4px;border:1px solid #ccc;margin-top:10px}
.legend-item{display:flex;align-items:center;gap:8px;margin:5px 0}
.legend-marker{width:20px;height:20px;border-radius:50%;border:2px solid white}
.route-controls{background:white;padding:15px;border-radius:4px;border:1px solid #ccc;margin-bottom:15px}
.route-info{background:white;padding:10px;border-radius:4px;border:1px solid #ccc;margin-top:10px;max-height:200px;overflow-y:auto}
.truck-route{margin-bottom:10px;padding:8px;border-left:4px solid;background-color:#f8f9fa}
.route-stop{font-size:12px;padding:2px 0;color:#666}
.route-summary{font-weight:bold;margin-bottom:5px}
.leaflet-routing-container{display:none}
.truck-list{background:white;padding:10px;border-radius:4px;border:1px solid #ccc;margin-top:10px;max-height:300px;overflow-y:auto}
.truck-item{margin-bottom:10px;padding:10px;border-left:4px solid;background-color:#f8f9fa;cursor:pointer;border-radius:4px;transition:all .3s ease}
.truck-item:hover{background-color:#e9ecef;transform:translateX(5px)}
.truck-item.active{background-color:#fff3cd;border-color:#ffc107}
.truck-header-info{font-weight:bold;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center}
.truck-stats{font-size:11px;color:#666;margin-bottom:8px}
.route-orders{font-size:12px}
.route-order-item{margin:2px 0;padding:2px 0;color:#555}
@media (max-width:768px){
  .form-grid{grid-template-columns:1fr}
  .search-filter{flex-direction:column}
  .truck-planning{grid-template-columns:1fr}
}