/* =====================================================================
   AC PRO — Peta Live (Leaflet) & pemilih lokasi
   ===================================================================== */
.ac-map { position: relative; height: 100%; min-height: 140px; border-radius: 10px; overflow: hidden; background: #e8eef6; z-index: 0; }
.ac-map.leaflet-container { font-family: inherit; }
.leaflet-container { font-family: inherit; font-size: 12px; background: #e8eef6; }
.leaflet-container a { color: #1b6ef3; }

/* Leaflet 1.9 memakai SVG bendera kecil di atribusi — aturan `svg` global app
   membuatnya membesar dan menutupi peta, jadi ukurannya dikunci di sini. */
.leaflet-container .leaflet-attribution-flag,
.leaflet-control-attribution .leaflet-attribution-flag {
  width: 12px !important; height: 8px !important; max-width: 12px !important; max-height: 8px !important;
  display: inline-block !important; vertical-align: middle; margin-right: 2px;
}
.leaflet-control-attribution { font-size: 9.5px !important; line-height: 1.5; background: rgba(255,255,255,.88) !important; padding: 1px 5px !important; border-radius: 4px 0 0 0; }
.leaflet-control-attribution a { color: #33507a !important; }
.leaflet-control-scale-line { font-size: 9px; line-height: 1.3; padding: 1px 4px; border-color: #8fa3bf; color: #33507a; }
.leaflet-bottom { z-index: 450; }
.ac-mapless { display: grid; place-items: center; height: 100%; padding: 18px; text-align: center; color: #6b7c93; font-size: 12px; }

/* marker */
.ac-dot-wrap, .ac-pin-wrap { background: none; border: 0; }
.ac-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pc, #1b6ef3);
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(11,37,69,.35); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; }
.ac-dot b { font-weight: 800; }
.ac-dot.off { background: #94a3b8; opacity: .8; }
.ac-dot.job { animation: acPulse 2s ease-out infinite; }
@keyframes acPulse { 0% { box-shadow: 0 2px 8px rgba(11,37,69,.35), 0 0 0 0 rgba(27,110,243,.45); } 70% { box-shadow: 0 2px 8px rgba(11,37,69,.35), 0 0 0 12px rgba(27,110,243,0); } 100% { box-shadow: 0 2px 8px rgba(11,37,69,.35), 0 0 0 0 rgba(27,110,243,0); } }
.ac-pin { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--pc, #e5484d); border: 2.5px solid #fff; box-shadow: 0 3px 9px rgba(11,37,69,.4); }
.ac-pin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255,255,255,.9); }
.ac-pop { min-width: 190px; font-size: 11.5px; }
.ac-pop-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 2px; }
.ac-pop-h .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.ac-pop-s { color: #6b7c93; font-size: 11px; margin-bottom: 7px; }
.ac-pop-r { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-top: 1px dashed #eef2f7; }
.ac-pop-r span { color: #7d8ea3; }
.ac-pop-r b { color: #0b2545; text-align: right; font-weight: 600; max-width: 130px; }
.ac-pop-job { margin-top: 7px; padding: 7px 8px; border-radius: 8px; background: #f4f8ff; border: 1px solid #dbe8ff; }
.ac-pop-job span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: #6b7c93; }
.ac-pop-job b { display: block; font-size: 11.5px; }
.ac-pop-job small { display: block; color: #4a5d75; font-size: 10.5px; line-height: 1.45; }

/* ---------------- pemilih lokasi (form booking) ---------------- */
.ac-picker { position: relative; border: 1px solid var(--line, #e3e9f2); border-radius: 12px; overflow: hidden; background: #eef2f8; }
.ac-picker-canvas { height: 260px; }
.ac-picker-bar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 500; display: flex; gap: 6px; }
.ac-search { position: relative; flex: 1; display: flex; align-items: center; background: #fff; border-radius: 9px; box-shadow: 0 3px 12px rgba(11,37,69,.18); }
.ac-search input { flex: 1; border: 0; background: none; padding: 9px 10px 9px 11px; font-size: 12px; color: var(--ink, #0b2545); outline: none; font-family: inherit; min-width: 0; }
.ac-search-btn { border: 0; background: none; color: #1b6ef3; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; border-radius: 9px; }
.ac-search-btn:hover { background: #eef4ff; }
.ac-loc { width: 36px; height: 36px; border: 0; border-radius: 9px; background: #fff; color: #0b2545; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 12px rgba(11,37,69,.18); }
.ac-loc:hover { background: #eef4ff; color: #1b6ef3; }
.ac-results { position: absolute; top: 50px; left: 8px; right: 8px; z-index: 600; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(11,37,69,.22); max-height: 214px; overflow: auto; }
.ac-res-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 11px; cursor: pointer; border-bottom: 1px solid #f0f4f9; font-family: inherit; }
.ac-res-item:last-child { border-bottom: 0; }
.ac-res-item:hover { background: #f4f8ff; }
.ac-res-item b { display: block; font-size: 11.5px; color: var(--ink, #0b2545); }
.ac-res-item small { display: block; font-size: 10.5px; color: #6b7c93; line-height: 1.4; margin-top: 1px; }
.ac-res-item.muted { color: #8095ab; font-size: 11px; cursor: default; }
.ac-picker-note { display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; background: #fff; border-top: 1px solid var(--line, #e3e9f2); font-size: 11px; color: #4a5d75; line-height: 1.45; }
.ac-picker-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #f79009; margin-top: 4px; flex: 0 0 7px; }
.ac-picker-note.ok .dot { background: #12a05a; }
.ac-picker-note.ok .txt { color: #0b6b3a; font-weight: 600; }

/* ---------------- dashboard live map ---------------- */
.track-card .map.ac-live { height: 214px; }
.ac-live-tag { position: absolute; z-index: 450; top: 8px; right: 8px; display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.95); border-radius: 20px; padding: 4px 9px; font-size: 9.5px; font-weight: 700;
  color: #0b2545; box-shadow: 0 2px 8px rgba(11,37,69,.18); }
.ac-live-tag i { width: 6px; height: 6px; border-radius: 50%; background: #12a05a; box-shadow: 0 0 0 0 rgba(18,160,90,.5); animation: acPulse 2s infinite; }
.ac-live-legend { position: absolute; z-index: 450; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 9px;
  background: rgba(255,255,255,.95); border-radius: 8px; padding: 5px 8px; font-size: 9px; color: #33475f; box-shadow: 0 2px 8px rgba(11,37,69,.15); }
.ac-live-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ac-live-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ---------------- halaman Peta Live ---------------- */
.ac-page { display: grid; gap: 12px; }
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ac-stat { background: #fff; border: 1px solid var(--line, #e3e9f2); border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; }
.ac-stat .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 34px; }
.ac-stat b { display: block; font-size: 18px; line-height: 1.1; color: var(--ink, #0b2545); letter-spacing: -.3px; }
.ac-stat small { display: block; font-size: 10.5px; color: #6b7c93; margin-top: 2px; }
.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 12px; align-items: stretch; }
.ac-card { background: #fff; border: 1px solid var(--line, #e3e9f2); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.ac-card-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line2, #eef2f7); flex-wrap: wrap; }
.ac-card-h b { font-size: 12.5px; color: var(--ink, #0b2545); }
.ac-card-h .grow { flex: 1; }
.ac-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-toolbar > select { width: auto !important; max-width: 140px; flex: 0 0 auto; }
.ac-toolbar > input { width: 168px; max-width: 45vw; flex: 0 0 auto; background: #fff; }
.ac-toolbar select, .ac-toolbar input { border: 1px solid var(--line, #e3e9f2); background: #f8fafd; border-radius: 8px; padding: 6px 8px; font-size: 11px; color: var(--ink, #0b2545); font-family: inherit; outline: none; }
.ac-toolbar select:focus, .ac-toolbar input:focus { border-color: #1b6ef3; background: #fff; }
.ac-btn { border: 1px solid var(--line, #e3e9f2); background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #33475f; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
.ac-btn:hover { border-color: #c9d8ee; background: #f4f8ff; color: #1b6ef3; }
.ac-btn.on { background: #1b6ef3; border-color: #1b6ef3; color: #fff; }
.ac-btn.on:hover { background: #155bd6; color: #fff; }
.ac-mapbox { position: relative; flex: 1; min-height: 420px; padding: 8px; display: flex; }
.ac-mapbox .ac-map { position: relative; flex: 1; border-radius: 10px; min-height: 0; }
.ac-mapbox .ac-live-tag { top: 16px; right: 16px; }
.ac-legendrow { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 8px 13px; border-top: 1px solid var(--line2, #eef2f7); font-size: 10.5px; color: #4a5d75; }
.ac-legendrow span { display: inline-flex; align-items: center; gap: 5px; }
.ac-legendrow i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ac-side { max-height: 620px; }
.ac-list { overflow: auto; flex: 1; }
.ac-item { display: flex; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #f2f6fb; cursor: pointer; align-items: flex-start; }
.ac-item:hover { background: #f7faff; }
.ac-item.on { background: #eef4ff; box-shadow: inset 3px 0 0 #1b6ef3; }
.ac-item .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 800; flex: 0 0 30px; position: relative; }
.ac-item .av i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; }
.ac-item .tx { flex: 1; min-width: 0; }
.ac-item .tx b { display: block; font-size: 11.5px; color: var(--ink, #0b2545); }
.ac-item .tx small { display: block; font-size: 10px; color: #6b7c93; line-height: 1.45; margin-top: 1px; }
.ac-item .tx .job { color: #0f4fc4; font-weight: 600; }
.ac-item .tm { font-size: 9px; color: #95a3b6; text-align: right; flex: 0 0 auto; padding-top: 1px; }
.ac-empty { padding: 26px 14px; text-align: center; color: #8095ab; font-size: 11.5px; }
.ac-note { padding: 8px 12px; border-top: 1px solid var(--line2, #eef2f7); font-size: 10px; color: #8095ab; display: flex; justify-content: space-between; gap: 8px; }

@media (max-width: 1080px) {
  .ac-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-side { max-height: none; }
  .ac-list { max-height: 300px; }
  .ac-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ac-stats { grid-template-columns: repeat(2, 1fr); }
  .ac-picker-canvas { height: 220px; }
  .ac-mapbox { min-height: 330px; }
  .track-card .map.ac-live { height: 190px; }
}