/* 10. Survey Report — Monitoring Geotek (prefix mg-). Acuan: docs/mockups/OMOS Monitoring Geotek.html.
   Gaya teks, warna & kontras shadcn/ui zinc sesuai docs/DESIGN_STYLE.md. */
#surveyMonitoringGeotekRoot,
.mg-modal-backdrop,
.mg-drawer-backdrop {
  --mg-fg: #09090b; --mg-fg2: #27272a; --mg-muted: #71717a; --mg-subtle: #a1a1aa;
  --mg-soft: #fafafa; --mg-mute: #f4f4f5; --mg-line: #e4e4e7; --mg-pri: #18181b;
  --mg-ok: #0f766e; --mg-ok-bg: #f0fdfa; --mg-ok-ln: #5eead4;
  --mg-wr: #b45309; --mg-wr-bg: #fffbeb; --mg-wr-ln: #fcd34d;
  --mg-sg: #c2410c; --mg-sg-bg: #fff7ed; --mg-sg-ln: #fdba74;
  --mg-cr: #b91c1c; --mg-cr-bg: #fef2f2; --mg-cr-ln: #fca5a5;
  font-family: 'Inter', system-ui, sans-serif; color: var(--mg-fg); font-size: 13px;
}
#surveyMonitoringGeotekRoot { margin-top: 12px; }
#surveyMonitoringGeotekRoot .num, .mg-modal-backdrop .num { font-variant-numeric: tabular-nums; }

.mg-ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mg-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mg-line); background: #fff; color: var(--mg-fg);
  font: 500 13px 'Inter', system-ui, sans-serif; padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .04); transition: background .15s, border-color .15s; }
.mg-btn:hover:not(:disabled) { background: var(--mg-mute); }
.mg-btn:focus-visible { outline: none; border-color: var(--mg-fg); box-shadow: 0 0 0 2px rgba(9, 9, 11, .12); }
.mg-btn:disabled { opacity: .5; cursor: not-allowed; }
.mg-btn.pri { background: var(--mg-pri); border-color: var(--mg-pri); color: #fafafa; }
.mg-btn.pri:hover:not(:disabled) { background: #27272a; }
.mg-btn.link { border-color: transparent; background: transparent; box-shadow: none; color: var(--mg-muted); padding: 4px 6px; }
.mg-btn.link:hover:not(:disabled) { color: var(--mg-fg); background: var(--mg-mute); }
.mg-btn.danger { color: var(--mg-cr); }
.mg-btn.sm { padding: 4px 9px; font-size: 12px; }

.mg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mg-field > span { font-size: 12px; font-weight: 500; color: var(--mg-muted); }
#surveyMonitoringGeotekRoot select, #surveyMonitoringGeotekRoot input,
.mg-modal-backdrop select, .mg-modal-backdrop input, .mg-modal-backdrop textarea {
  font: 500 13px 'Inter', system-ui, sans-serif; color: var(--mg-fg); border: 1px solid var(--mg-line); border-radius: 6px;
  background: #fff; padding: 6px 8px; outline: none; transition: border-color .15s, box-shadow .15s; max-width: 100%; }
#surveyMonitoringGeotekRoot select:focus, #surveyMonitoringGeotekRoot input:focus,
.mg-modal-backdrop select:focus, .mg-modal-backdrop input:focus, .mg-modal-backdrop textarea:focus { border-color: var(--mg-fg); box-shadow: 0 0 0 2px rgba(9, 9, 11, .12); }
#surveyMonitoringGeotekRoot input.bad, .mg-modal-backdrop input.bad, .mg-cell.bad { border-color: var(--mg-cr) !important; background: var(--mg-cr-bg) !important; }
.mg-modal-backdrop input[type=checkbox] { width: auto; padding: 0; }

.mg-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--mg-soft); border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px; }
.mg-spacer { flex: 1; }
.mg-zone { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--mg-fg2); background: #fff; border: 1px solid var(--mg-line); border-radius: 6px; padding: 7px 10px; }
.mg-ro { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--mg-muted); background: var(--mg-mute); border-radius: 6px; padding: 7px 10px; }
.mg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mg-row.end { justify-content: flex-end; }
.mg-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mg-muted); font-weight: 500; }
.mg-inline input { width: 68px; padding: 4px 6px !important; }
.mg-note { font-size: 12px; color: var(--mg-muted); margin: 8px 2px 0; }
.mut { color: var(--mg-muted); }
.mg-panel { background: #fff; border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(9, 9, 11, .05); }
.mg-panel h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.mg-error { margin-top: 14px; color: var(--mg-cr); display: flex; gap: 8px; align-items: center; }
.mg-empty { margin-top: 14px; text-align: center; padding: 28px 16px; }
.mg-empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.mg-empty p { margin: 0 auto 14px; max-width: 520px; color: var(--mg-muted); }
.mg-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #f4f4f5, #e4e4e7, #f4f4f5); background-size: 200% 100%; animation: mgSk 1.2s infinite; margin: 8px 0; }
@keyframes mgSk { to { background-position: -200% 0; } }

.mg-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2.5px 8.5px; border-radius: 6px; border: 1px solid; white-space: nowrap; line-height: 1.4; }
.mg-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mg-chip.s-normal { color: var(--mg-ok); background: var(--mg-ok-bg); border-color: var(--mg-ok-ln); }
.mg-chip.s-waspada { color: var(--mg-wr); background: var(--mg-wr-bg); border-color: var(--mg-wr-ln); }
.mg-chip.s-siaga { color: var(--mg-sg); background: var(--mg-sg-bg); border-color: var(--mg-sg-ln); }
.mg-chip.s-evakuasi { color: var(--mg-cr); background: var(--mg-cr-bg); border-color: var(--mg-cr-ln); }
.mg-chip.s-unconfigured, .mg-chip.s-closed, .mg-chip.s-none { color: #52525b; background: var(--mg-mute); border-color: var(--mg-line); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mg-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--mg-line); border-radius: 12px; margin-top: 14px; overflow: hidden; background: #fff; }
.mg-kpi { padding: 14px 16px; border-left: 1px solid var(--mg-line); min-width: 0; }
.mg-kpi:first-child { border-left: 0; }
.mg-kpi .l { font-size: 13px; font-weight: 500; color: #52525b; }
.mg-kpi .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.mg-kpi .v small { font-size: 12px; font-weight: 500; color: var(--mg-muted); }
.mg-kpi .h { font-size: 11.5px; color: var(--mg-muted); margin-top: 2px; }

.mg-alert { margin-top: 14px; border: 1px solid var(--mg-sg-ln); background: var(--mg-sg-bg); border-radius: 12px; padding: 12px 14px; }
.mg-alert h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #9a3412; }
.mg-alert-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-alert-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--mg-line); border-radius: 8px; padding: 7px 10px; cursor: pointer; font: 400 12.5px 'Inter', system-ui, sans-serif; color: var(--mg-fg); text-align: left; }
.mg-alert-item:hover, .mg-alert-item:focus-visible { border-color: var(--mg-fg); outline: none; }

.mg-area { border: 1px solid var(--mg-line); border-radius: 12px; margin-top: 14px; box-shadow: 0 1px 2px rgba(9, 9, 11, .05); background: #fff; overflow: hidden; }
.mg-area-h { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mg-area-h:focus-visible { outline: 2px solid var(--mg-fg); outline-offset: -2px; }
.mg-area-h h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.mg-chev { transition: transform .15s; }
.mg-area.open .mg-chev { transform: rotate(90deg); }
.mg-area-b { border-top: 1px solid var(--mg-line); padding: 16px; }

.mg-thr { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mg-thr-t { border-collapse: separate; border-spacing: 0; border: 1px solid var(--mg-line); border-radius: 8px; overflow: hidden; }
.mg-thr-t th, .mg-thr-t td { padding: 6px 12px; font-size: 12.5px; text-align: right; border-bottom: 1px solid var(--mg-mute); }
.mg-thr-t th { background: var(--mg-soft); font-weight: 500; color: var(--mg-muted); }
.mg-thr-t th:first-child, .mg-thr-t td:first-child { text-align: left; }
.mg-thr-t tr:last-child td { border-bottom: 0; }
.mg-thr-t .lv { font-weight: 600; }
.mg-thr-t .sub { color: var(--mg-subtle); font-size: 11.5px; }
.mg-thr-t.edit { margin-top: 12px; width: 100%; }
.mg-thr-t.edit input { width: 90px; text-align: right; }
.mg-thr-side { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--mg-muted); }
.mg-thr-side b { color: var(--mg-fg); font-weight: 600; }
.mg-thr-empty { flex: 1; min-width: 260px; background: var(--mg-soft); box-shadow: none; }
.mg-thr-empty p { margin: 0 0 10px; color: var(--mg-muted); font-size: 12.5px; }

.mg-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--mg-line); margin-top: 18px; overflow-x: auto; white-space: nowrap; }
.mg-tabs button { border: 0; background: none; padding: 8px 0; font: 500 14px 'Inter', system-ui, sans-serif; color: var(--mg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; }
.mg-tabs button:hover { color: var(--mg-fg); }
.mg-tabs button.on { color: var(--mg-fg); font-weight: 600; border-bottom-color: var(--mg-pri); }

.mg-tw { overflow-x: auto; margin-top: 12px; }
table.mg-grid { width: 100%; border-collapse: collapse; }
table.mg-grid th { background: var(--mg-soft); color: var(--mg-muted); font-weight: 500; font-size: 13px; text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--mg-line); white-space: nowrap; }
table.mg-grid th .u { display: block; font-size: 11px; color: var(--mg-subtle); font-weight: 400; }
table.mg-grid td { padding: 8px 10px; border-bottom: 1px solid var(--mg-mute); text-align: right; white-space: nowrap; }
table.mg-grid.sm th, table.mg-grid.sm td { padding: 6px 8px; font-size: 12px; }
table.mg-grid .l { text-align: left; }
table.mg-grid tr.pt { cursor: pointer; }
table.mg-grid tr.pt:hover, table.mg-grid tr.sel { background: var(--mg-soft); }
table.mg-grid tr.pt:focus-visible { outline: 2px solid var(--mg-fg); outline-offset: -2px; }
table.mg-grid tr.closed td { color: var(--mg-subtle); }
table.mg-grid .code { font-weight: 600; }
table.mg-grid .sub { display: block; font-size: 11.5px; color: var(--mg-muted); font-weight: 400; }
table.mg-grid .acc { color: var(--mg-subtle); }
table.mg-grid .out { text-decoration: line-through; color: var(--mg-subtle); }
.mg-flag { font-size: 11px; font-weight: 600; color: var(--mg-muted); background: var(--mg-mute); border-radius: 4px; padding: 1px 6px; }
tr.mg-det > td { background: var(--mg-soft); padding: 14px 16px; text-align: left; white-space: normal; }
.mg-det-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; position: sticky; left: 0; }
.mg-det-grid svg { display: block; max-width: 720px; }
.mg-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--mg-muted); margin: 6px 0 4px; }
.mg-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.mg-hist { max-height: 320px; overflow: auto; margin-top: 6px; }
.mg-paste { border: 1px dashed var(--mg-line); border-radius: 8px; padding: 10px 12px; color: var(--mg-muted); font-size: 12.5px; margin-top: 12px; background: var(--mg-soft); }
.mg-cell { width: 100%; min-width: 110px; text-align: right; border-color: transparent !important; background: transparent !important; padding: 4px 6px !important; }
.mg-cell:hover, .mg-cell:focus { border-color: var(--mg-line) !important; background: #fff !important; }
select.mg-cell, input.mg-cell[type=date], input.mg-cell.hhmm { text-align: left; min-width: 0; }
.mg-cell:not(.num) { text-align: left; }
input.mg-cell.hhmm { width: 64px; }
.mg-ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mg-mute); }
.mg-ev .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.mg-ev b { font-weight: 600; }
.mg-ev p { margin: 2px 0 0; color: var(--mg-muted); font-size: 12.5px; }

.mg-modal-backdrop { position: fixed; inset: 0; background: rgba(9, 9, 11, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; z-index: 1000; }
.mg-modal { background: #fff; border: 1px solid var(--mg-line); border-radius: 12px; width: 100%; max-width: 600px; box-shadow: 0 10px 30px rgba(9, 9, 11, .18); }
.mg-modal.wide { max-width: 900px; }
.mg-modal-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--mg-line); }
.mg-modal-h h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mg-modal-h p { margin: 3px 0 0; font-size: 13px; color: var(--mg-muted); }
.mg-modal-b { padding: 16px 18px; display: grid; gap: 12px; }
.mg-modal-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--mg-line); background: var(--mg-soft); border-radius: 0 0 12px 12px; }
.mg-err { margin-right: auto; color: var(--mg-cr); font-size: 12.5px; }
.mg-form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.mg-sep { height: 1px; background: var(--mg-line); }
.mg-check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 13px; }
.mg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.mg-drop { display: block; border: 1px dashed #d4d4d8; border-radius: 8px; padding: 14px; background: var(--mg-soft); cursor: pointer; }
.mg-drop input { display: block; margin-bottom: 8px; }
.mg-drop > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-stats > div { border: 1px solid var(--mg-line); border-radius: 8px; padding: 8px 12px; min-width: 120px; }
.mg-stats b { display: block; font-size: 18px; font-weight: 700; }
.mg-stats span { font-size: 12px; color: var(--mg-muted); }
.mg-warn { font-size: 12.5px; color: #92400e; background: var(--mg-wr-bg); border: 1px solid var(--mg-wr-ln); border-radius: 8px; padding: 8px 10px; }
.mg-warn.bad { color: var(--mg-cr); background: var(--mg-cr-bg); border-color: var(--mg-cr-ln); }
details.mg-guide { border: 1px solid var(--mg-line); border-radius: 8px; }
details.mg-guide summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13px; }
details.mg-guide ol { margin: 0; padding: 0 16px 12px 32px; color: var(--mg-fg2); font-size: 12.5px; }
details.mg-guide li { margin: 4px 0; }
details.mg-guide .mg-tw { margin: 0 12px 12px; }

.mg-drawer-backdrop { position: fixed; inset: 0; background: rgba(9, 9, 11, .35); z-index: 1000; display: flex; justify-content: flex-end; }
.mg-drawer { background: #fff; width: min(440px, 100%); height: 100%; overflow: auto; border-left: 1px solid var(--mg-line); }
.mg-log { list-style: none; margin: 0; padding: 0 18px 18px; }
.mg-log li { padding: 10px 0; border-bottom: 1px solid var(--mg-mute); font-size: 13px; }
.mg-log li .mg-note { display: block; margin: 2px 0 0; }

@media (max-width: 900px) {
  .mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-kpi { border-left: 0; border-top: 1px solid var(--mg-line); }
  .mg-kpi:nth-child(even) { border-left: 1px solid var(--mg-line); }
  .mg-det-grid, .mg-form3 { grid-template-columns: minmax(0, 1fr); }
}