*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:#333;background-color:#f5f5f5}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{background-color:#2c3e50;color:#fff;padding:.5rem 2rem;min-height:60px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;box-shadow:0 2px 4px #0000001a;z-index:2000}.app-header h1{font-size:1.25rem;font-weight:500;margin:0}.header-left{flex:1 1 18rem;min-width:0}.header-right{display:flex;align-items:center;flex-wrap:wrap;max-width:100%;gap:.75rem}#language-switcher{flex:0 0 auto;width:auto;min-width:7rem;max-width:100%;margin:0;padding:.5rem;color:#333}#auth-container,#user-display{align-items:center;gap:.5rem}#username-label{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-info{font-size:.9rem;color:#bdc3c7}.project-info>a{font-size:.9rem;text-decoration:none;color:#bdc3c7}.user-info{display:flex;align-items:center;gap:1rem}.main-content{display:flex;flex:1;overflow:hidden;position:relative}.drawing-controls{top:100px;left:1em;display:flex;flex-direction:column;gap:2px;z-index:1000;background-color:transparent}.drawing-controls button{width:2em;height:2em;background-color:#fff;border:none;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;transition:background-color .2s}.drawing-controls button:hover{background-color:#fffc}.drawing-controls button.active{background-color:#4caf50;color:#fff}.basemap-control{top:10px;bottom:auto;right:10px;z-index:1000}.basemap-control button{width:2em;height:2em;background-color:#fff;border:none;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;transition:background-color .2s}.basemap-control button:hover{background-color:#fffc}.basemap-options{position:absolute;top:100%;right:0;margin-bottom:10px;background-color:#fff;padding:10px;border-radius:4px;box-shadow:0 2px 6px #0003;min-width:180px;display:flex;flex-direction:column;gap:8px}.basemap-options label{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}.basemap-options label:hover{color:#2c3e50}.drawing-controls button svg{width:1.5em;height:1.5em}.sidebar{width:25vw;background-color:#fff;border-right:1px solid #ddd;overflow-y:auto;box-shadow:2px 0 4px #0000000d;transition:transform .3s ease,width .3s ease;position:relative;z-index:1500}.sidebar.collapsed{width:0;transform:translate(-300px);overflow:hidden}.sidebar-toggle{position:absolute;top:50vh;left:25vw;width:30px;height:40px;background-color:#fff;border:1px solid #ddd;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 4px #0000001a;z-index:1600;transition:left .3s ease}.sidebar-toggle:hover{background-color:#f8f9fa}.sidebar-toggle.collapsed{left:0}.sidebar-toggle.collapsed span{transform:rotate(180deg)}.control-panel{padding:1.5rem;min-width:300px}.control-panel h3{color:#2c3e50;margin-bottom:1.5rem;font-size:1.25rem}.control-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}.control-section:last-child{border-bottom:none}.control-section h4{color:#34495e;margin-bottom:.75rem;font-size:1rem;font-weight:600}#layer-controls{display:flex;flex-direction:column;gap:.5rem}#layer-controls label{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.25rem;transition:background-color .2s}#layer-controls label:hover{background-color:#f8f9fa}input[type=checkbox]{margin-right:8px}select{width:100%;padding:8px;margin-top:8px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}select:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}select{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem;background-color:#fff;cursor:pointer}select:focus{outline:none;border-color:#3498db}.time-controls{display:flex;flex-direction:column;gap:.75rem}.time-controls label{font-size:.85rem;color:#555;font-weight:500}.time-controls input[type=datetime-local]{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.timeline-controls{display:flex;flex-direction:column;gap:.5rem}#timeline-slider{width:100%;cursor:pointer}#timeline-label{font-size:.85rem;color:#555;text-align:center;padding:.5rem;background-color:#f8f9fa;border-radius:4px}.timeline-buttons{display:flex;gap:.5rem}button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .2s,transform .1s}button:active{transform:scale(.98)}.btn-primary{background-color:#3498db;color:#fff}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-danger{background-color:#e74c3c;color:#fff}.btn-danger:hover{background-color:#c0392b}.btn-warning{background-color:#f39c12;color:#fff}.btn-warning:hover{background-color:#e67e22}button:disabled{background-color:#bdc3c7;cursor:not-allowed;opacity:.6}#data-info{font-size:.9rem;color:#555}#data-info p{margin-bottom:.5rem}#data-info span{font-weight:600;color:#2c3e50}.map-container{flex:1;position:relative}#map{width:100%;height:100%}.heatmap-legend{position:absolute;bottom:30px;right:20px;background-color:#fffffff2;padding:15px;border-radius:8px;box-shadow:0 2px 8px #0003;z-index:1000;min-width:180px}.heatmap-legend h4{margin:0 0 10px;font-size:.9rem;color:#2c3e50;text-align:center}.legend-gradient{height:20px;background:linear-gradient(to right,#00f,#0f0,#ff0,red);border-radius:4px;margin-bottom:5px}.legend-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#555}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fffffff2;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026;text-align:center;z-index:1000}.spinner{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-footer{background-color:#2c3e50;color:#fff;text-align:center;padding:1rem;font-size:.9rem}.map-overlays-container{position:absolute;bottom:30px;right:30px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.map-info{pointer-events:auto;background:#fff;padding:10px;border-radius:4px;box-shadow:0 1px 5px #0006;min-width:150px;font-size:.9rem}.map-info h4{margin:0 0 5px;font-size:1rem;color:#333}.map-info h5{margin:5px 0;font-size:.9rem;color:#555}.legend{pointer-events:auto;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10px #0003;min-width:200px;max-width:250px}.legend h4{margin-bottom:10px;font-size:14px;color:#333;text-align:center}.legend-gradient{height:20px;width:100%;background:linear-gradient(to right,#00f,#0ff,green,#ff0,orange,red);border-radius:4px;margin-bottom:5px}.legend-labels{display:flex;justify-content:space-between;font-size:12px;color:#666}.ol-popup{font-size:.9rem}.ol-popup h3{margin-top:0;color:#2c3e50}#auth-container,#user-display{display:flex;align-items:center;gap:1rem}#username-label{font-weight:500;color:#ecf0f1}.btn-primary{background-color:#3498db;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.btn-primary:hover{background-color:#2980b9}.btn-secondary{background-color:transparent;color:#bdc3c7;border:1px solid #bdc3c7;padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-secondary:hover{color:#fff;border-color:#fff}.modal{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background-color:#00000080;align-items:center;justify-content:center}.modal-content{background-color:#fff;padding:2rem;border-radius:8px;width:90%;max-width:400px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 4px 6px #0000001a;animation:modalFadeIn .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal{animation:backdropFadeIn .3s ease-out forwards}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.field-card{animation:slideUpFade .4s ease-out forwards;transition:all .3s ease;overflow:hidden;max-height:800px}.field-card.removing{opacity:0;transform:scale(.9);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0;pointer-events:none}.modal-md{max-width:600px}.modal-lg{max-width:800px}.modal-xl{max-width:1400px;width:95%}.close-modal{position:absolute;inset-inline-end:1.5rem;top:1rem;font-size:1.5rem;cursor:pointer;color:#7f8c8d}.close-modal:hover{color:#2c3e50}.modal h2{margin-bottom:1.5rem;color:#2c3e50;text-align:center}.form-group{margin-bottom:1.2rem}.form-group label{display:block;margin-bottom:.5rem;color:#34495e;font-weight:500}.form-group input{width:100%;padding:.8rem;border:1px solid #bdc3c7;border-radius:4px;font-size:1rem}.form-group input:focus{border-color:#3498db;outline:none}.form-actions{margin-top:1.5rem}.form-actions button{width:100%;padding:.8rem;font-size:1rem}.error-message{color:#e74c3c;margin-top:1rem;text-align:center;font-size:.9rem;min-height:1.2em}.ol-control.ol-zoom{top:1rem;left:1rem;background-color:transparent;border:none;padding:0}.ol-control.ol-zoom button{width:32px!important;height:32px!important;font-size:24px!important;line-height:28px!important;background-color:#ffffffe6!important;color:#333!important;border:1px solid #ccc!important;border-radius:4px!important;margin-bottom:5px!important;cursor:pointer;box-shadow:0 2px 4px #0003;font-weight:700}.ol-control.ol-zoom button:hover{background-color:#fff!important;color:#000!important;border-color:#bbb!important}.ol-control.ol-zoom button:focus{outline:none;box-shadow:0 0 0 2px #3388ff80}.zoom-warning{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%);background:#fffc;color:#000;padding:20px;border-radius:8px;z-index:1000;pointer-events:none;text-align:center;box-shadow:0 4px 6px #0000004d}.zoom-warning-icon{font-size:24px;margin-bottom:10px}.ol-tooltip{position:relative;background:#00000080;border-radius:4px;color:#fff;padding:4px 8px;opacity:.7;white-space:nowrap;font-size:12px;cursor:default;-webkit-user-select:none;user-select:none}.ol-tooltip-measure{opacity:1;font-weight:700}.ol-tooltip-static{background-color:#fc3;color:#000;border:1px solid white}.ol-tooltip-measure:before,.ol-tooltip-static:before{border-top:6px solid rgba(0,0,0,.5);border-right:6px solid transparent;border-left:6px solid transparent;content:"";position:absolute;bottom:-6px;margin-left:-7px;left:50%}.ol-tooltip-static:before{border-top-color:#fc3}.hidden{display:none}.swal-toast-offset{margin-top:65px!important}@media(max-width:768px){.main-content{flex-direction:column}.app-header{padding:0 .5rem;gap:.25rem;height:auto;min-height:60px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px}.app-header h1{font-size:1rem;white-space:normal;line-height:1.2}.header-left{flex:1;min-width:200px}.header-right{gap:.5rem;flex-wrap:wrap}.hide-mobile{display:none!important}.sidebar{width:85vw!important;position:absolute;height:100%;top:0;left:0;z-index:1500;box-shadow:4px 0 10px #0003}.sidebar.collapsed{transform:translate(-100%)}.sidebar-toggle{left:85vw!important;top:50vh;width:30px;height:50px;border-radius:0 8px 8px 0;background-color:#3498db;color:#fff;box-shadow:2px 0 5px #0003;display:flex;align-items:center;justify-content:center;border:none}.sidebar-toggle.collapsed{left:0!important}.modal-content{width:95%!important;max-width:none!important;padding:1rem!important;margin:10px auto}.modal-content h2{font-size:1.25rem}.control-panel{min-width:0;padding:1rem}}html[dir=rtl]{text-align:right}html[dir=rtl] .header-left img{margin-right:0!important;margin-left:15px!important}html[dir=rtl] .header-right{flex-direction:row-reverse}html[dir=rtl] .sidebar{transform:none;border-right:none;border-left:1px solid #ddd}html[dir=rtl] .sidebar.collapsed{width:0;transform:translate(300px)}html[dir=rtl] .sidebar-toggle{left:auto;right:25vw;border-radius:5px 0 0 5px;border-right:none;border-left:1px solid #ddd}html[dir=rtl] .sidebar-toggle.collapsed{right:0}html[dir=rtl] .sidebar-toggle span{transform:rotate(180deg)}html[dir=rtl] .sidebar-toggle.collapsed span{transform:rotate(0)}@media(max-width:768px){html[dir=rtl] .sidebar{right:0;left:auto}html[dir=rtl] .sidebar.collapsed{transform:translate(100%)}html[dir=rtl] .sidebar-toggle{right:85vw!important;left:auto!important}}#edit-shape-instructions{text-align:start!important}@media(max-width:768px){html[dir=rtl] .sidebar-toggle.collapsed{right:0!important}}
