/* 10. Survey Report — Monitoring Sump & Dewatering (prefix ms-). Acuan: docs/mockups/OMOS Monitoring Sump V2.html.
   Token mengikuti dashboard (style.css); satu aksen hijau OMOS; angka tabular mono. */
#surveyMonitoringSumpRoot,
.ms-modal-backdrop,
.ms-drawer-backdrop {
  /* Token shadcn/ui neutral (zinc) — docs/DESIGN_STYLE.md */
  --ms-tinta: #09090b;
  --ms-tinta-2: #27272a;
  --ms-lembut: #71717a;
  --ms-samar: #a1a1aa;
  --ms-panel: #ffffff;
  --ms-panel-2: #fafafa;
  --ms-garis: #e4e4e7;
  --ms-garis-2: #f4f4f5;
  --ms-primer: #18181b;
  --ms-primer-2: #27272a;
  --ms-aksen: #2a9d8f;
  --ms-aksen-2: #238478;
  --ms-aksen-lembut: #f0fdfa;
  --ms-waspada: #b45309;
  --ms-waspada-lembut: #fffbeb;
  --ms-kritis: #b91c1c;
  --ms-kritis-lembut: #fef2f2;
  --ms-air: #264653;
  --ms-hujan: #a1a1aa;
  --ms-inflow: #f4a462;
  --ms-r-lg: 12px;
  --ms-r-md: 8px;
  --ms-r-sm: 6px;
  --ms-bayang: 0 1px 2px rgba(9, 9, 11, .05);
  --ms-mono: 'Inter', system-ui, sans-serif;
  --ms-display: 'Inter', system-ui, sans-serif;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ms-tinta);
  font-size: 13px;
}
#surveyMonitoringSumpRoot { margin-top: 12px; }
#surveyMonitoringSumpRoot .num,
.ms-modal-backdrop .num { font-family: var(--ms-mono); font-variant-numeric: tabular-nums; font-size: 12px; }

/* ikon & tombol */
.ms-ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ms-garis); background: #fff; color: var(--ms-tinta-2);
  font: 600 12px var(--font-body, inherit); padding: 7px 12px; border-radius: var(--ms-r-sm); cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.ms-btn:hover:not(:disabled) { background: var(--ms-panel-2); border-color: #D3CFC4; }
.ms-btn:active:not(:disabled) { transform: translateY(1px); }
.ms-btn:focus-visible { outline: 2px solid var(--ms-aksen); outline-offset: 2px; }
.ms-btn:disabled { opacity: .5; cursor: not-allowed; }
.ms-btn.pri { background: var(--ms-primer); border-color: var(--ms-primer); color: #fafafa; }
.ms-btn.pri:hover:not(:disabled) { background: var(--ms-primer-2); border-color: var(--ms-primer-2); }
.ms-btn.danger { color: var(--ms-kritis); }
.ms-btn.link { border-color: transparent; background: transparent; color: var(--ms-lembut); padding: 6px 8px; }
.ms-btn.link:hover:not(:disabled) { color: var(--ms-tinta); background: var(--ms-garis-2); }
.ms-btn.sm { padding: 5px 9px; font-size: 11.5px; }
.ms-btn .ms-cnt { background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 0 5px; font-family: var(--ms-mono); font-size: 11px; }

.ms-field { display: flex; flex-direction: column; gap: 3px; }
.ms-field > label, .ms-field > span.lbl { font-size: 10.5px; font-weight: 600; color: var(--ms-samar); letter-spacing: .04em; text-transform: uppercase; }
#surveyMonitoringSumpRoot select, #surveyMonitoringSumpRoot input,
.ms-modal-backdrop select, .ms-modal-backdrop input, .ms-modal-backdrop textarea {
  font: 500 12.5px var(--font-body, inherit); color: var(--ms-tinta); border: 1px solid var(--ms-garis); border-radius: var(--ms-r-sm);
  background: #fff; padding: 6px 8px; outline: none; transition: border-color .15s, box-shadow .15s; }
#surveyMonitoringSumpRoot select:focus, #surveyMonitoringSumpRoot input:focus,
.ms-modal-backdrop select:focus, .ms-modal-backdrop input:focus, .ms-modal-backdrop textarea:focus {
  border-color: var(--ms-aksen); box-shadow: 0 0 0 3px rgba(47, 111, 94, .15); }

/* toolbar */
.ms-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--ms-panel); border: 1px solid var(--ms-garis);
  border-radius: var(--ms-r-lg); padding: 10px 12px; box-shadow: var(--ms-bayang); position: sticky; top: 8px; z-index: 5; }
.ms-spacer { flex: 1; }
.ms-ro { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ms-lembut); background: var(--ms-garis-2);
  border-radius: var(--ms-r-sm); padding: 6px 10px; }

/* chip status */
.ms-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; padding: 2.5px 8.5px; border-radius: 6px; white-space: nowrap; border: 1px solid transparent; }
.ms-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ms-chip.safe { background: #f0fdfa; color: #0f766e; border-color: #5eead4; }
.ms-chip.warning { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.ms-chip.critical { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.ms-chip.unconfigured { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.ms-tag { display: inline-block; font: 600 10.5px var(--font-body, inherit); padding: 1px 6px; border-radius: 3px; background: var(--ms-garis-2); color: var(--ms-lembut); }

/* ringkasan site */
.ms-summary { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 1px; background: var(--ms-garis); border: 1px solid var(--ms-garis);
  border-radius: var(--ms-r-lg); overflow: hidden; margin: 14px 0; }
.ms-sum { background: var(--ms-panel); padding: 12px 16px; }
.ms-sum small { display: block; font-size: 11px; color: var(--ms-lembut); font-weight: 500; }
.ms-sum b { display: block; font: 600 20px/1.2 var(--ms-display); margin-top: 4px; letter-spacing: -.01em; }
.ms-sum b span { font: 500 11.5px var(--font-body, inherit); color: var(--ms-samar); margin-left: 3px; }
.ms-sum .ms-sub { font-size: 11px; color: var(--ms-samar); margin-top: 2px; }
.ms-ews-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* panel & grafik */
.ms-panel { background: var(--ms-panel); border: 1px solid var(--ms-garis); border-radius: var(--ms-r-lg); box-shadow: var(--ms-bayang); }
.ms-panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ms-garis-2); flex-wrap: wrap; }
.ms-panel-head h2 { font: 600 14px var(--ms-display); margin: 0; }
.ms-panel-head .ms-sub { font-size: 11.5px; color: var(--ms-samar); }
#surveyMonitoringSumpRoot .ms-panel-head select, #surveyMonitoringSumpRoot .ms-toolbar select { width: auto; min-width: 0; }
.ms-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--ms-lembut); flex-wrap: wrap; }
.ms-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ms-legend i.line { height: 2px; width: 14px; border-radius: 0; vertical-align: 3px; }
.ms-legend i.dash { height: 0; width: 14px; border-top: 2px dashed; background: none; vertical-align: 3px; }
.ms-chart { position: relative; padding: 8px 12px 12px; }
.ms-ch-title { display: flex; align-items: baseline; gap: 10px; padding: 6px 6px 2px; flex-wrap: wrap; }
.ms-ch-title b { font: 600 12.5px var(--ms-display); }
.ms-ch-title span { font-size: 11px; color: var(--ms-samar); }
.ms-ch-title .ms-zones { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ms-lembut); }
.ms-zones i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.ms-z-k { background: #F6DADA; } .ms-z-w { background: #FBE9D2; } .ms-z-a { background: #EAF1EE; }
.ms-chart svg { width: 100%; height: auto; display: block; }
.ms-tip { position: absolute; pointer-events: none; background: var(--ms-tinta); color: #fff; border-radius: 6px; padding: 8px 10px; font-size: 11.5px;
  line-height: 1.5; box-shadow: 0 6px 20px rgba(28, 35, 51, .25); min-width: 220px; z-index: 6; }
.ms-tip b { font-family: var(--ms-display); font-weight: 600; }
.ms-tip .r { display: flex; justify-content: space-between; gap: 14px; }
.ms-tip .r span:last-child { font-family: var(--ms-mono); }
.ms-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ms-chart-empty { padding: 32px; text-align: center; color: var(--ms-lembut); }

/* kartu sump */
.ms-sump { margin-top: 16px; }
.ms-sump-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; flex-wrap: wrap; }
.ms-sump-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ms-sump-title h3 { font: 600 17px var(--ms-display); margin: 0; letter-spacing: -.01em; }
.ms-meta { font-size: 11.5px; color: var(--ms-lembut); display: flex; gap: 12px; flex-wrap: wrap; }
.ms-meta b { font-family: var(--ms-mono); font-weight: 500; color: var(--ms-tinta-2); }
.ms-kpis { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ms-garis-2); border-bottom: 1px solid var(--ms-garis-2); }
.ms-kpi { padding: 10px 16px; border-right: 1px solid var(--ms-garis-2); min-width: 0; }
.ms-kpi:last-child { border-right: 0; }
.ms-kpi small { font-size: 11px; color: var(--ms-lembut); display: block; }
.ms-kpi b { display: block; font: 600 16px/1.3 var(--ms-display); margin-top: 3px; }
.ms-kpi b em { font: 500 11px var(--font-body, inherit); color: var(--ms-samar); font-style: normal; margin-left: 2px; }
.ms-kpi .ms-hint { font-size: 10.5px; color: var(--ms-samar); }
.ms-bar { height: 6px; background: #e4e4e7; border-radius: 9999px; margin-top: 6px; overflow: hidden; }
.ms-bar > i { display: block; height: 100%; border-radius: 9999px; }

.ms-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--ms-garis); align-items: flex-end; flex-wrap: wrap; }
.ms-tabs button { border: 0; background: none; font: 500 13.5px var(--font-body, inherit); color: var(--ms-lembut); padding: 8px 14px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; }
.ms-tabs button:hover:not(.on) { color: var(--ms-tinta); }
.ms-tabs button.on { color: var(--ms-tinta); font-weight: 600; border-bottom: 2px solid var(--ms-primer); }
.ms-tabs .ms-right { margin-left: auto; padding-bottom: 10px; font-size: 12px; color: var(--ms-lembut); }

/* tabel data */
.ms-tbl-wrap { max-height: 480px; overflow: auto; }
table.ms-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; }
.ms-grid th { position: sticky; top: 0; z-index: 2; background: var(--ms-panel-2); font: 600 11px var(--font-body, inherit); color: var(--ms-lembut);
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--ms-garis); white-space: nowrap; vertical-align: bottom; }
.ms-grid th.l, .ms-grid td.l { text-align: left; }
.ms-grid th .u { display: block; font-weight: 500; color: var(--ms-samar); font-size: 10.5px; }
.ms-grid th.in { background: #F3F6F4; }
.ms-grid td { padding: 0 10px; height: 32px; border-bottom: 1px solid var(--ms-garis-2); text-align: right; white-space: nowrap; }
.ms-grid tbody tr:hover td { background: #FAF9F5; }
.ms-grid td.date { font-family: var(--ms-mono); font-size: 12px; color: var(--ms-tinta-2); }
.ms-grid td.date small { color: var(--ms-samar); font-family: var(--font-body, inherit); margin-left: 6px; font-size: 11px; }
.ms-grid tr.wk td.date { color: var(--ms-samar); }
.ms-grid tr.fut td { color: var(--ms-samar); background: #FCFBF8; }
.ms-cell { width: 100%; max-width: 96px; text-align: right; font: 500 12px var(--ms-mono) !important; border: 1px solid transparent !important;
  background: transparent !important; padding: 4px 6px !important; border-radius: 4px !important; }
.ms-cell:hover { border-color: var(--ms-garis) !important; }
.ms-cell:focus { border-color: var(--ms-aksen) !important; background: #fff !important; box-shadow: none !important; }
.ms-cell.dirty { background: #FFF8E6 !important; border-color: #E9D49A !important; }
.ms-cell:disabled { color: var(--ms-tinta-2); }
td.ms-calc { color: var(--ms-tinta-2); }
td.ms-muted { color: var(--ms-samar); font-style: italic; font-family: var(--font-body, inherit); font-size: 11.5px; }
td.ms-est::before { content: "≈ "; color: var(--ms-samar); }
td.ms-pos { color: var(--ms-kritis); }
td.ms-neg { color: var(--ms-aksen); }
td.ms-bad { color: var(--ms-kritis); font-weight: 600; }
.ms-src { font-size: 10px; color: var(--ms-samar); margin-left: 4px; }
.ms-grid tfoot td { position: sticky; bottom: 0; background: var(--ms-panel-2); font-weight: 600; border-top: 1px solid var(--ms-garis); height: 34px; }
.ms-c-input { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 500; color: var(--ms-lembut); }
.ms-c-input input { width: 56px; padding: 2px 5px !important; font: 500 11px var(--ms-mono) !important; text-align: right; }
.ms-c-input .omos-save-status { font-size: 10px; }
.ms-rowstat { font: 500 10.5px var(--font-body, inherit); padding: 1px 6px; border-radius: 3px; }
.ms-rowstat.inv { background: var(--ms-kritis-lembut); color: var(--ms-kritis); }
.ms-rowstat.est { background: var(--ms-garis-2); color: var(--ms-lembut); }
.ms-rowstat.off { color: var(--ms-samar); }
.ms-rowstat.low { background: var(--ms-waspada-lembut); color: var(--ms-waspada); }

/* kosong, ringkas, error */
.ms-empty { padding: 36px; text-align: center; color: var(--ms-lembut); }
.ms-empty h4 { font: 600 15px var(--ms-display); color: var(--ms-tinta); margin: 8px 0 4px; }
.ms-empty p { max-width: 56ch; margin: 0 auto; }
.ms-error { padding: 20px; color: var(--ms-kritis); }
.ms-skel { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #EFECE5 25%, #F6F4EF 50%, #EFECE5 75%); background-size: 200% 100%;
  animation: ms-shimmer 1.2s infinite; margin: 10px 0; }
@keyframes ms-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* modal & drawer */
.ms-modal-backdrop, .ms-drawer-backdrop { position: fixed; inset: 0; background: rgba(28, 35, 51, .38); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; }
.ms-drawer-backdrop { justify-content: flex-end; padding: 0; }
.ms-modal { background: var(--ms-panel); border: 1px solid var(--ms-garis); border-radius: var(--ms-r-lg); box-shadow: 0 12px 40px rgba(28, 35, 51, .18);
  width: 100%; max-width: 560px; }
.ms-modal.wide { max-width: 920px; }
.ms-drawer { background: var(--ms-panel); width: 100%; max-width: 480px; height: 100%; overflow-y: auto; box-shadow: -12px 0 40px rgba(28, 35, 51, .16); }
.ms-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ms-garis-2); }
.ms-modal-h h4 { margin: 0; font: 600 15px var(--ms-display); }
.ms-modal-b { padding: 14px 18px; }
.ms-modal-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ms-garis-2);
  background: var(--ms-panel-2); border-radius: 0 0 var(--ms-r-lg) var(--ms-r-lg); }
.ms-modal-f .ms-err { margin-right: auto; }
.ms-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-form .full { grid-column: 1 / -1; }
.ms-form .ms-field input, .ms-form .ms-field select { width: 100%; }
.ms-section { font: 600 11px var(--font-body, inherit); color: var(--ms-lembut); letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 -2px; grid-column: 1 / -1; }
.ms-err { color: var(--ms-kritis); font-size: 11.5px; }
.ms-note { font-size: 11.5px; color: var(--ms-lembut); }
.ms-ver { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ms-ver button { text-align: left; border: 1px solid var(--ms-garis); border-radius: var(--ms-r-md); padding: 8px 10px; min-width: 170px;
  background: #fff; cursor: pointer; font: inherit; color: inherit; }
.ms-ver button.on { border-color: var(--ms-aksen); background: var(--ms-aksen-lembut); }
.ms-ver button.new { border-style: dashed; color: var(--ms-lembut); }
.ms-ver small { display: block; color: var(--ms-lembut); font-size: 11px; }
.ms-ver b { font-family: var(--ms-mono); font-weight: 500; font-size: 12px; }
.ms-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.ms-radio { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.ms-radio label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--ms-garis); border-radius: var(--ms-r-md); padding: 8px 10px; cursor: pointer; }
.ms-radio label.on { border-color: var(--ms-aksen); background: var(--ms-aksen-lembut); }
.ms-radio small { display: block; color: var(--ms-lembut); }
.ms-pts-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--ms-garis-2); border-radius: var(--ms-r-md); }
table.ms-mini { width: 100%; min-width: 0; }
table.ms-mini td { height: 30px; }
table.ms-mini input { width: 100%; max-width: 120px; text-align: right; font: 500 12px var(--ms-mono) !important; padding: 3px 6px !important; }
table.ms-mini tr.bad td { background: var(--ms-kritis-lembut); }
.ms-paste { border: 1px dashed var(--ms-garis); border-radius: var(--ms-r-md); padding: 8px 10px; color: var(--ms-lembut); font-size: 11.5px;
  margin-top: 8px; background: var(--ms-panel-2); }
.ms-log { list-style: none; margin: 0; padding: 0; }
.ms-log li { padding: 10px 18px; border-bottom: 1px solid var(--ms-garis-2); display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.ms-log time { font: 500 11px var(--ms-mono); color: var(--ms-samar); }
.ms-log .who { font-weight: 600; }
.ms-log .diff { font: 500 11.5px var(--ms-mono); color: var(--ms-lembut); word-break: break-word; }
.ms-log .diff s { color: var(--ms-kritis); text-decoration-thickness: 1px; }
.ms-log .diff ins { color: var(--ms-aksen); text-decoration: none; }

@media (max-width: 1100px) {
  .ms-summary { grid-template-columns: 1fr 1fr; }
  .ms-kpis { grid-template-columns: repeat(3, 1fr); }
  .ms-two, .ms-form { grid-template-columns: 1fr; }
}

/* riwayat CA/C (berlaku mulai) */
.ms-hist table.ms-mini input[type="date"] { max-width: 150px; text-align: left; }
.ms-hist table.ms-mini input[inputmode="decimal"] { max-width: 100px; }
.ms-grid td.ms-chg { box-shadow: inset 3px 0 0 var(--ms-waspada); font-weight: 600; }

/* ===== Gaya teks, warna & kontras shadcn/ui (docs/DESIGN_STYLE.md) ===== */
#surveyMonitoringSumpRoot, .ms-modal-backdrop, .ms-drawer-backdrop { font-size: 14px; font-feature-settings: "cv11", "ss01"; }
#surveyMonitoringSumpRoot :where(td, b, input) { font-variant-numeric: tabular-nums; }
.ms-btn { font: 500 14px 'Inter', system-ui, sans-serif; border-radius: 6px; color: var(--ms-tinta); box-shadow: 0 1px 2px rgba(9, 9, 11, .04); }
.ms-btn.sm { font-size: 13px; }
.ms-btn:hover:not(:disabled) { background: var(--ms-garis-2); border-color: var(--ms-garis); }
.ms-btn.pri { background: var(--ms-primer); border-color: var(--ms-primer); color: #fafafa; }
.ms-btn.pri:hover:not(:disabled) { background: var(--ms-primer-2); }
.ms-btn.link { color: var(--ms-tinta); box-shadow: none; }
.ms-btn:focus-visible { outline-color: var(--ms-tinta); }
.ms-field > label, .ms-field > span.lbl { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ms-tinta); }
#surveyMonitoringSumpRoot :is(select, input), .ms-modal-backdrop :is(select, input, textarea) { font: 400 14px 'Inter', system-ui, sans-serif; border-radius: 6px; }
#surveyMonitoringSumpRoot :is(select, input):focus, .ms-modal-backdrop :is(select, input, textarea):focus { border-color: var(--ms-tinta); box-shadow: 0 0 0 2px rgba(9, 9, 11, .12); }
.ms-section { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ms-tinta); }
.ms-sum small { font-size: 14px; font-weight: 500; color: var(--ms-tinta); }
.ms-sum b { font: 700 24px/1.2 'Inter', system-ui, sans-serif; letter-spacing: -.02em; }
.ms-sum b span { font: 500 13px 'Inter', system-ui, sans-serif; color: var(--ms-lembut); }
.ms-sum .ms-sub { font-size: 12px; color: var(--ms-lembut); }
.ms-panel-head h2 { font: 600 16px 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.ms-ch-title b { font: 600 14px 'Inter', system-ui, sans-serif; }
.ms-ch-title span, .ms-legend, .ms-panel-head .ms-sub { font-size: 12px; color: var(--ms-lembut); }
.ms-sump-title h3 { font: 600 18px 'Inter', system-ui, sans-serif; letter-spacing: -.02em; }
.ms-meta { font-size: 13px; color: var(--ms-lembut); }
.ms-meta b { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; color: var(--ms-tinta); }
.ms-kpi small { font-size: 13px; font-weight: 500; color: var(--ms-tinta); }
.ms-kpi b { font: 700 20px/1.3 'Inter', system-ui, sans-serif; letter-spacing: -.02em; }
.ms-kpi b em { font: 500 12px 'Inter', system-ui, sans-serif; color: var(--ms-lembut); }
.ms-kpi .ms-hint { font-size: 12px; color: var(--ms-lembut); }
.ms-tabs button { font: 500 13.5px 'Inter', system-ui, sans-serif; color: var(--ms-lembut); padding: 8px 14px 10px; }
.ms-tabs button:hover:not(.on) { color: var(--ms-tinta); }
.ms-tabs button.on { color: var(--ms-tinta); font-weight: 600; border-bottom: 2px solid var(--ms-primer); }
.ms-tabs .ms-right { font-size: 12px; color: var(--ms-lembut); }
.ms-grid th { font: 500 13px 'Inter', system-ui, sans-serif; color: var(--ms-lembut); background: var(--ms-panel-2); }
.ms-grid th .u { font-size: 12px; color: var(--ms-samar); }
.ms-grid th.in { background: var(--ms-garis-2); }
.ms-grid td { font-size: 13px; }
.ms-grid td.date { font: 500 13px 'Inter', system-ui, sans-serif; color: var(--ms-tinta); }
.ms-grid td.date small { font-size: 12px; font-weight: 400; color: var(--ms-lembut); }
.ms-cell { font: 500 13px 'Inter', system-ui, sans-serif !important; }
td.ms-muted { font-size: 12.5px; color: var(--ms-lembut); }
.ms-grid tfoot td { color: var(--ms-tinta); }
.ms-chip { font: 600 12px 'Inter', system-ui, sans-serif; border-radius: 6px; border: 1px solid transparent; padding: 2.5px 8.5px; }
.ms-chip::before { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ms-chip.safe { background: #f0fdfa; color: #0f766e; border-color: #5eead4; }
.ms-chip.warning { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.ms-chip.critical { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.ms-chip.unconfigured { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.ms-tag { font: 600 12px 'Inter', system-ui, sans-serif; border-radius: 6px; background: transparent; border: 1px solid var(--ms-garis); color: var(--ms-tinta); }
.ms-rowstat { font: 500 12px 'Inter', system-ui, sans-serif; border-radius: 6px; }
.ms-rowstat.est { color: var(--ms-tinta-2); }
td.ms-neg { color: #0f766e; }
.ms-ro { font-size: 13px; color: var(--ms-tinta-2); }
.ms-empty h4, .ms-modal-h h4 { font: 600 16px 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.ms-note, .ms-err { font-size: 13px; }
.ms-ver small { font-size: 12px; }
.ms-ver b { font: 600 13px 'Inter', system-ui, sans-serif; }
.ms-ver button.on, .ms-radio label.on { border-color: var(--ms-tinta); background: var(--ms-garis-2); }
.ms-log time { font: 500 12px 'Inter', system-ui, sans-serif; }
.ms-log .diff { font: 400 13px 'Inter', system-ui, sans-serif; }
.ms-tip { background: #fff; color: var(--ms-tinta); border: 1px solid var(--ms-garis); box-shadow: 0 4px 12px rgba(9, 9, 11, .08); }
.ms-tip b { font-family: 'Inter', system-ui, sans-serif; }
.ms-tip .r span:last-child { font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ms-z-k { background: #fee2e2; } .ms-z-w { background: #fef3c7; } .ms-z-a { background: #f0fdfa; }