:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#193047;background:#f3f6f9;font-size:16px;line-height:1.5;--navy:#123f58;--teal:#08796f;--border:#dbe3e9;--muted:#607080}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{border:1px solid #ccd7df;border-radius:8px;background:white;padding:10px 15px;color:#234157;font-weight:600;cursor:pointer;min-height:44px}button:hover{background:#f0f5f8}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--teal);color:white;border-color:var(--teal)}button.primary:hover{background:#05665e}.danger{color:#ad2c32;border-color:#eccacc}button.text-button{border:0;background:none;padding:0;min-height:36px;color:var(--muted);font-size:.875rem}.text-button:hover{color:var(--navy)}:focus-visible{outline:3px solid #38bdb3;outline-offset:3px}a{color:#076b86}h1,h2,h3,p{margin-top:0}h1{font-size:2rem;line-height:1.2;letter-spacing:-.035em;margin-bottom:10px}h2{font-size:1.1rem;margin-bottom:20px;letter-spacing:-.01em}h3{font-size:.9rem;margin-bottom:12px}p{margin-bottom:12px}label{font-size:.875rem;font-weight:600;display:grid;gap:7px}input,textarea,select{width:100%;border:1px solid #cbd6de;border-radius:7px;padding:11px 12px;background:white;color:#193047;min-height:44px}textarea{resize:vertical}input[readonly],textarea[readonly]{background:#f4f7f9;color:#506478}input::placeholder,textarea::placeholder{color:#7c8b98}select{cursor:pointer}fieldset{border:0;padding:0;margin:0;min-width:0}[hidden]{display:none!important}.muted,.help{color:var(--muted)}.help{font-size:.875rem}.required{color:#ad2c32;display:contents}.topbar{background:var(--navy);color:white}.topbar-inner{max-width:1240px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{color:white;display:flex;align-items:center;gap:12px;text-decoration:none;font-size:1.05rem}.brand strong{font-weight:400;opacity:.82}.brand-mark{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border:1px solid #75a0b6;border-radius:10px;font-size:1.4rem;font-weight:700}.brand-mark span{color:#58dfcc}.local-badge{font-size:.8rem;border:1px solid #517386;border-radius:50px;padding:6px 12px;color:#e0eef2}main{max-width:1240px;margin:auto;padding:36px 28px 20px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.page-heading p:last-child{margin-bottom:0}.eyebrow{font-size:.75rem;letter-spacing:.14em;color:var(--teal);font-weight:700;margin-bottom:10px}.panel{background:white;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 4px #14344803}.toolbar{display:flex;align-items:end;gap:18px;justify-content:space-between;padding:22px 24px}.search-label{max-width:440px;flex:1}.search-label span{font-weight:600}.show-label{display:flex;gap:10px;align-items:center}.show-label select{width:80px}.table-heading,.customer-row{display:grid;grid-template-columns:minmax(200px,1.6fr) minmax(145px,1.2fr) minmax(110px,.9fr) minmax(110px,.9fr) 178px;gap:18px;align-items:center;padding:15px 24px}.table-heading{background:#f7f9fb;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:#6c7d8b;font-size:.72rem;font-weight:700;letter-spacing:.065em}.customer-row{min-height:105px;border-bottom:1px solid #edf1f5;font-size:.875rem}.customer-row:last-child{border-bottom:0}.customer-row p{margin:0;overflow-wrap:anywhere}.customer-identity{display:flex;align-items:center;gap:13px;min-width:0}.customer-identity strong{font-size:1rem;overflow-wrap:anywhere}.thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none;background:#e7eef3}.row-actions{display:flex;flex-wrap:wrap;gap:5px}.row-actions button{padding:7px;min-height:36px;font-size:.8rem}.mobile-label{display:none}.empty{text-align:center;padding:60px 20px 70px;color:var(--muted)}.empty h2{font-size:1.2rem;color:#193047;margin-bottom:8px}.empty-symbol{border:1px solid #c9dce3;background:#eff7f8;width:62px;height:62px;display:grid;place-items:center;border-radius:18px;margin:0 auto 20px;color:var(--teal);font-size:2rem}.pagination{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-top:1px solid var(--border);font-size:.875rem}.pagination nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.pagination button{min-width:36px;min-height:36px;padding:6px 10px;font-size:.85rem}.pagination button[aria-current=page]{background:var(--navy);color:white;border-color:var(--navy)}footer{display:flex;justify-content:space-between;gap:30px;font-size:.8rem;color:var(--muted);padding:28px 0}footer details{max-width:540px}summary{cursor:pointer}footer details p:first-of-type{margin-top:12px}.notice{padding:13px 17px;border-radius:8px;background:#e8f5ef;color:#196046;border:1px solid #b8dfcc;margin-bottom:18px;overflow-wrap:anywhere}.notice.error{background:#fff1f0;color:#992d2d;border-color:#efc3bd}.form-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px}.form-main,.form-aside{min-width:0}.form-section{padding:24px;margin-bottom:22px}.step{color:var(--teal);font-size:.8rem;background:#e9f5f3;border-radius:6px;padding:6px 8px;margin-right:7px}.fields{display:grid;gap:18px}.button-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inline-message{font-size:.875rem;margin:12px 0}.error-text{color:#a13232;font-size:.875rem}.inline-message:empty{display:none}#map{height:340px;margin:18px 0 12px;border-radius:9px;background:#e9eff3;border:1px solid var(--border);z-index:0;display:grid;place-items:center}#map:empty:before{content:'Peta akan tampil setelah lokasi tersedia';padding:20px;text-align:center;color:var(--muted);font-size:.875rem}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-bottom:20px}.legend>span{display:flex;align-items:center;gap:6px}.legend i{font-style:normal;display:grid;place-items:center;color:white;width:21px;height:21px;font-size:.7rem;font-weight:700}.legend-input{background:#2463b2;border-radius:50%}.legend i.legend-customer{background:transparent;border-radius:0;width:16px;height:22px}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:18px}.coordinates label{margin-bottom:9px;font-size:.8rem}.coordinates input{font-size:.875rem;font-variant-numeric:tabular-nums}.gps-label{margin-top:15px}.gps-status{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:10px}.gps-status button{font-size:.8rem}.attribution{font-size:.75rem;color:var(--muted);margin:12px 0 0}.photo-stage{background:#eef3f6;border:1px dashed #c5d2dc;border-radius:9px;overflow:hidden;margin:18px 0;min-height:240px;display:grid;place-items:center}.photo-stage video,.photo-stage img{display:block;width:100%;height:auto;max-height:600px;object-fit:contain}.photo-stage #photo-empty{text-align:center;color:var(--muted);padding:34px}.photo-stage #photo-empty>span{font-size:3rem;color:#7897a8}.storage-note{border-left:3px solid #83b9bd;padding:0 15px;font-size:.875rem;color:var(--muted)}.storage-note p{margin:5px 0}.record-times{font-size:.85rem;border-top:1px solid var(--border);padding-top:16px;margin:20px 0 0}.record-times:empty{display:none}.record-times dt{color:var(--muted);margin-top:10px}.record-times dd{margin:3px 0}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f3f6f9;padding:18px 0 12px;border-top:1px solid var(--border)}.input-map-icon{display:grid!important;place-items:center;color:white;font-weight:800;font-size:14px;box-shadow:0 2px 5px #0004}.input-map-icon{background:#2463b2;border:4px solid #c5ddff;border-radius:50%}.customer-map-icon{background:transparent;border:0;box-shadow:none}.customer-pin-svg{display:block;width:100%;height:100%;overflow:visible}.customer-map-icon .customer-pin-svg{filter:drop-shadow(0 2px 2px #0005)}.customer-map-icon.leaflet-marker-draggable{cursor:grab}.customer-map-icon.leaflet-drag-target{cursor:grabbing}.leaflet-tooltip{font-family:inherit}.leaflet-control-attribution{font-size:11px!important}.detail-mode .required{display:none}.detail-mode .fields input,.detail-mode .fields textarea{border-color:transparent;background:#f7f9fb}.detail-mode .coordinates input{background:#f7f9fb}
@media(max-width:1000px){.table-heading{display:none}.customer-row{grid-template-columns:1.5fr 1fr 1fr;gap:15px}.customer-row .row-address{grid-column:1/3}.customer-row .row-actions{grid-column:3;grid-row:1/3;justify-content:flex-end}.customer-row .row-date{grid-column:3;grid-row:3}.customer-row .row-phone{grid-column:1/3;grid-row:3}.mobile-label{display:block;color:var(--muted);font-size:.75rem;margin-bottom:3px}.form-grid{grid-template-columns:minmax(0,1.25fr) minmax(270px,1fr)}}
@media(max-width:760px){.topbar-inner{padding:15px 18px}.local-badge{display:none}main{padding:26px 16px 14px}.page-heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:20px}h1{font-size:1.75rem}.page-heading>.primary{width:100%}.toolbar{padding:18px 16px;flex-wrap:wrap;align-items:center}.search-label{max-width:none;flex-basis:100%}.show-label{font-size:.8rem}.customer-row{display:flex;flex-direction:column;align-items:stretch;padding:20px 16px;gap:12px}.customer-identity{padding-bottom:3px}.customer-row .row-actions{justify-content:flex-start;gap:8px}.customer-row .row-actions button{min-height:44px;padding:9px 14px}.row-date{font-size:.8rem}.pagination{align-items:flex-start;flex-direction:column;padding:16px;gap:12px}.pagination button{min-height:42px;min-width:40px}.form-grid{grid-template-columns:1fr;gap:0}.form-section{padding:20px 16px}.coordinates{gap:12px}.coordinates input{padding:9px 8px}.form-actions{align-items:stretch;flex-direction:column;gap:10px}.form-actions>.button-row{justify-content:flex-end}.form-actions button{flex:1}.gps-status{align-items:flex-start;flex-direction:column}#map{height:320px}footer{flex-direction:column;gap:4px;font-size:.8rem}.empty{padding:42px 15px}.photo-stage{min-height:210px}.brand{font-size:1rem}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s ease}}
.photo-thumb-button{display:block;padding:0;min-height:0;border:0;border-radius:8px;background:transparent;flex:none;cursor:zoom-in}.photo-thumb-button .thumb{display:block}.photo-thumb-button:hover{box-shadow:0 0 0 3px #91bfc4}.photo-stage img{cursor:zoom-in}#photo-viewer{padding:0;width:min(1100px,96vw);height:min(880px,94dvh);max-width:96vw;max-height:94dvh;border:1px solid #466074;border-radius:12px;background:#132536;color:#f4f8fb;overflow:hidden}#photo-viewer::backdrop{background:#06111cce}.viewer-shell{height:100%;display:flex;flex-direction:column;min-height:0}.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid #344858}.viewer-header h2{margin:0;font-size:1.05rem;overflow-wrap:anywhere;max-height:5em;overflow:auto}.viewer-header button{flex:none}.viewer-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px}.viewer-toolbar button{font-size:.875rem;background:#213b4d;color:#e9f4fa;border-color:#4d6779}.viewer-toolbar button[aria-pressed=true]{background:#08796f;border-color:#52c9bb;color:white}#viewer-viewport{flex:1;min-height:0;overflow:auto;background:#09131d;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;position:relative}#viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex:none}#photo-viewer.actual-size #viewer-viewport{display:block}#photo-viewer.actual-size #viewer-image{max-width:none;max-height:none;object-fit:initial}.viewer-status{font-size:.8rem;color:#c6d5e0;margin:0;padding:12px 20px;overflow-wrap:anywhere}@media(max-width:760px){#photo-viewer{width:96vw;height:92dvh}.viewer-header,.viewer-toolbar{padding:12px}.viewer-status{padding:10px 12px}.viewer-toolbar button{flex:1}}