/*
 * MIDOPS 3.0 — Tactical Command Experience
 * Mobile-first visual overhaul. Presentation only; existing routes/business logic remain intact.
 */
:root {
  --mx-bg-0:#050908;
  --mx-bg-1:#08100e;
  --mx-bg-2:#0b1411;
  --mx-surface-1:#0e1815;
  --mx-surface-2:#121e1a;
  --mx-surface-3:#17241f;
  --mx-surface-4:#1b2a24;
  --mx-text-1:#f6faf8;
  --mx-text-2:#d1ddd7;
  --mx-text-3:#a8b8b0;
  --mx-text-4:#81948b;
  --mx-green:#1bcf8f;
  --mx-green-hi:#63f2bc;
  --mx-green-soft:rgba(27,207,143,.11);
  --mx-cyan:#69c9ff;
  --mx-amber:#f2c66d;
  --mx-red:#ff6b72;
  --mx-line:rgba(207,231,219,.095);
  --mx-line-hi:rgba(99,242,188,.24);
  --mx-shadow-1:0 12px 30px rgba(0,0,0,.25);
  --mx-shadow-2:0 20px 50px rgba(0,0,0,.38);
  --mx-r8:8px;
  --mx-r12:12px;
  --mx-r16:16px;
  --mx-r20:20px;
  --mx-r24:24px;
  --mx-r28:28px;
  --mx-page-x:16px;
  --mx-nav-h:74px;
  --mx-ease:cubic-bezier(.2,.75,.25,1);
  --mx-display:"Sora","Roboto","Inter","Segoe UI",system-ui,sans-serif;
  --mx-body:"Inter","Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --mx-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

html.midops-mobile-ui { color-scheme:dark; background:var(--mx-bg-0); }
body.midops-native-page {
  font-family:var(--mx-body)!important;
  font-weight:500;
  letter-spacing:-.008em;
  color:var(--mx-text-1)!important;
  background:
    radial-gradient(70% 38% at 88% -8%, rgba(27,207,143,.11), transparent 68%),
    linear-gradient(180deg,var(--mx-bg-1),var(--mx-bg-0) 62%)!important;
}
body.midops-native-page::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.009) 1px,transparent 1px);
  background-size:32px 32px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 78%);
}
body.midops-native-page *, body.midops-native-page *::before, body.midops-native-page *::after { box-sizing:border-box; }
body.midops-native-page :is(h1,h2,h3,h4,h5,h6,.nav-txt,.section-title,.section-header,.ota-title,.sys-title) { font-family:var(--mx-display)!important; }
body.midops-native-page :is(p,span,small,label,li,td,th,input,select,textarea,button,a) { text-rendering:optimizeLegibility; }
body.midops-native-page :is(p,li,.faq-answer,.doc-content,.release-notes,.arti-lambang-box,.deskripsi-kompi) { line-height:1.62; }
body.midops-native-page :is(code,.mono,.data-value[id*=nrp],#displayNrp,.release-meta,.audit,.stat-value) { font-family:var(--mx-mono)!important; font-variant-numeric:tabular-nums; }

/* High-contrast baseline: fixes legacy dark-on-dark combinations. */
body.midops-native-page :is(h1,h2,h3,h4,h5,h6,strong,b) { color:var(--mx-text-1)!important; }
body.midops-native-page :is(p,li,.info span,.sub-title,.release-notes,.ota-sub,.faq-answer,.doc-content,.image-caption,.mars-text) { color:var(--mx-text-2)!important; }
body.midops-native-page :is(.text-muted,.muted,.meta,.release-meta,.data-label,.label,.foto-label,.c-periode,.feed-meta-v2,.lb-unit,.stat-label) { color:var(--mx-text-3)!important; }
body.midops-native-page :is(a,button,[onclick]) { -webkit-tap-highlight-color:transparent; }

/* App shell */
body.midops-native-page .app-container { background:transparent!important; }
body.midops-native-page:not(.midops-auth-page):not(.midops-fullscreen-page) .app-container { padding-bottom:calc(var(--mx-nav-h) + max(16px,env(safe-area-inset-bottom)) + 22px)!important; }
body.midops-native-page .top-nav {
  min-height:62px!important; padding:10px var(--mx-page-x)!important;
  background:rgba(5,10,8,.93)!important; border-bottom:1px solid var(--mx-line)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.19)!important;
  backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%);
}
body.midops-native-page .top-nav > a,
body.midops-native-page .top-nav > i {
  width:42px!important; height:42px!important; min-width:42px!important; border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.085)!important; color:var(--mx-text-1)!important;
}
body.midops-native-page .top-nav > a:active { transform:scale(.94); background:var(--mx-green-soft)!important; }
body.midops-native-page .top-nav .nav-txt p,
body.midops-native-page .top-nav .nav-txt h1,
body.midops-native-page .top-nav .nav-txt h2,
body.midops-native-page .top-nav .nav-txt h3 {
  color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:13px!important;
  font-weight:800!important; letter-spacing:.045em!important;
}
body.midops-native-page .top-nav .nav-txt::after {
  content:attr(data-midops-context); display:block; min-height:10px; margin-top:2px;
  color:var(--mx-text-4); font:700 7px/1.2 var(--mx-mono); letter-spacing:.11em;
}

.midops-bottom-nav {
  left:10px!important; right:10px!important; height:var(--mx-nav-h)!important;
  padding:6px!important; border-radius:24px!important;
  background:linear-gradient(180deg,rgba(18,30,26,.985),rgba(10,18,15,.985))!important;
  border:1px solid rgba(211,235,223,.11)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.midops-bottom-nav a { height:60px!important; gap:5px!important; border-radius:17px!important; color:#8da198!important; }
.midops-bottom-nav a i { font-size:18px!important; }
.midops-bottom-nav a span { font-family:var(--mx-body)!important; font-size:8px!important; font-weight:750!important; letter-spacing:.035em!important; }
.midops-bottom-nav a.is-active { color:var(--mx-green-hi)!important; background:linear-gradient(180deg,rgba(27,207,143,.15),rgba(27,207,143,.045))!important; }
.midops-bottom-nav a.is-active::before { width:22px!important; height:3px!important; top:2px!important; background:var(--mx-green-hi)!important; box-shadow:0 0 16px rgba(99,242,188,.55)!important; }
.midops-bottom-nav a:active { transform:scale(.92); }

/* Universal mobile spacing */
body.midops-native-page:not(.midops-page-dashboard):not(.midops-auth-page):not(.midops-fullscreen-page) :is(.content-body,.form-edit-container,.feed-container,.faq-container,.ota-wrap,.kta-container) {
  padding-left:var(--mx-page-x)!important; padding-right:var(--mx-page-x)!important;
}
.midops-v3-page-intro { margin:18px 0 16px; }
.midops-v3-page-intro__eyebrow { color:var(--mx-green-hi); font:800 8px/1.2 var(--mx-mono); letter-spacing:.14em; text-transform:uppercase; }
.midops-v3-page-intro h1 { margin:5px 0 5px; color:var(--mx-text-1); font:800 23px/1.18 var(--mx-display); letter-spacing:-.035em; }
.midops-v3-page-intro p { margin:0; color:var(--mx-text-3)!important; font-size:12px; line-height:1.55; }

/* Unified surfaces */
body.midops-native-page:not(.midops-auth-page) :is(
  .info-item,.section-card,.program-card,.prestasi-card,.beladiri-card,.rekap-card,.commander-card,
  .faq-wrapper,.sub-section,.hirbak-item,.activity-item,.location-box,.arti-lambang-box,.dislokasi-card,
  .feed-card-v2,.lb-card,.chart-card,.stat-box,.demografi-card,.ota-card,.sys-card,.rekap-item
) {
  background:linear-gradient(155deg,rgba(25,39,33,.96),rgba(12,22,18,.98))!important;
  border:1px solid var(--mx-line)!important; border-radius:var(--mx-r20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  color:var(--mx-text-1)!important;
}
body.midops-native-page:not(.midops-auth-page) :is(.section-card,.ota-card,.sys-card,.program-card,.rekap-card,.dislokasi-card,.chart-card) { box-shadow:var(--mx-shadow-1),inset 0 1px 0 rgba(255,255,255,.025)!important; }
body.midops-native-page :is(.section-header,.section-title,.ota-title,.sys-title,.rekap-header,.chart-title) {
  color:var(--mx-text-1)!important; border-color:var(--mx-line-hi)!important; letter-spacing:-.018em!important;
}
body.midops-native-page :is(.section-header,.section-title) i { color:var(--mx-green-hi)!important; }

/* Buttons */
body.midops-native-page :is(.btn-submit,.btn-update,.btn-save,.ota-btn,.btn-broadcast,.btn-pill-lari) {
  min-height:52px!important; border:0!important; border-radius:16px!important;
  background:linear-gradient(135deg,#0bb278,#1ed095)!important; color:#03110c!important;
  font-family:var(--mx-display)!important; font-size:11px!important; font-weight:850!important; letter-spacing:.04em!important;
  box-shadow:0 10px 24px rgba(16,180,123,.18)!important;
}
body.midops-native-page :is(.btn-submit,.btn-update,.btn-save,.ota-btn,.btn-broadcast,.btn-pill-lari):active { transform:scale(.985); filter:brightness(.95); }
body.midops-native-page :is(.btn-cancel,.mini-btn,.btn-out) {
  min-height:46px!important; border-radius:14px!important; border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.04)!important; color:var(--mx-text-2)!important;
  font-family:var(--mx-display)!important; font-weight:750!important;
}
body.midops-native-page button:disabled { opacity:.5!important; filter:saturate(.45); }

/* Inputs */
body.midops-native-page :is(input,select,textarea) { font-family:var(--mx-body)!important; color:var(--mx-text-1)!important; caret-color:var(--mx-green-hi); }
body.midops-native-page :is(.input-box,.ota-field input,.ota-field select,.ota-field textarea,.bd-input,.input-renang,.input-nilai-jas,.input-nilai) {
  background:rgba(255,255,255,.045)!important; border-color:rgba(211,235,223,.12)!important; color:var(--mx-text-1)!important;
}
body.midops-native-page :is(input,select,textarea)::placeholder { color:#72857b!important; opacity:1; }
body.midops-native-page :is(input,select,textarea):focus { border-color:rgba(99,242,188,.52)!important; box-shadow:0 0 0 4px rgba(27,207,143,.09)!important; outline:none!important; }
body.midops-native-page .input-box:focus-within { border-color:rgba(99,242,188,.52)!important; box-shadow:0 0 0 4px rgba(27,207,143,.09)!important; }
body.midops-native-page :is(.input-box label,.form-group label,.ota-field label) { color:var(--mx-text-3)!important; font-size:10px!important; font-weight:800!important; letter-spacing:.06em; }
body.midops-native-page select option { background:#12201b; color:var(--mx-text-1); }

/* Tabs / segmented controls */
body.midops-native-page .tab-container {
  padding:5px!important; gap:4px!important; border-radius:16px!important; background:rgba(255,255,255,.035)!important; border:1px solid var(--mx-line)!important;
}
body.midops-native-page .tab-btn { min-height:42px; border-radius:12px!important; color:var(--mx-text-3)!important; font-family:var(--mx-body)!important; font-size:10px!important; font-weight:750!important; }
body.midops-native-page .tab-btn.active { color:#06120e!important; background:var(--mx-green-hi)!important; box-shadow:0 8px 18px rgba(27,207,143,.16)!important; }

/* Dashboard — mobile command cockpit */
body.midops-page-dashboard .tactical-header-bg {
  border-radius:0 0 34px 34px!important; padding-bottom:28px!important;
  background:
    radial-gradient(60% 80% at 86% 6%,rgba(27,207,143,.19),transparent 70%),
    radial-gradient(48% 70% at 18% -10%,rgba(105,201,255,.07),transparent 72%),
    linear-gradient(160deg,#0d1a16 0%,#07100d 72%)!important;
}
body.midops-page-dashboard .top-nav { min-height:58px!important; background:transparent!important; border:0!important; box-shadow:none!important; }
body.midops-page-dashboard .hero-section { padding:4px var(--mx-page-x) 0!important; }
body.midops-page-dashboard .hero-card {
  border-radius:24px!important; padding:20px!important;
  background:linear-gradient(145deg,rgba(29,47,39,.9),rgba(11,22,18,.95))!important;
  border:1px solid rgba(99,242,188,.13)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.midops-page-dashboard .hero-card::before { content:"MIDOPS"!important; color:rgba(99,242,188,.045)!important; font-family:var(--mx-display)!important; font-weight:900!important; }
body.midops-page-dashboard .jabatan-badge { background:rgba(242,198,109,.10)!important; color:#f6d68e!important; border:1px solid rgba(242,198,109,.21)!important; }
body.midops-page-dashboard #displayNama { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-weight:850!important; }
body.midops-page-dashboard #displayNrp { color:var(--mx-green-hi)!important; font-family:var(--mx-mono)!important; background:rgba(27,207,143,.08)!important; border-color:rgba(99,242,188,.18)!important; }
.midops-command-deck {
  margin:16px var(--mx-page-x) 8px!important; padding:17px!important; border-radius:24px!important;
  background:linear-gradient(150deg,rgba(21,37,31,.98),rgba(10,20,16,.99))!important;
  border:1px solid rgba(211,235,223,.09)!important; box-shadow:var(--mx-shadow-2)!important;
}
.midops-command-deck__eyebrow { color:var(--mx-green-hi)!important; font-family:var(--mx-mono)!important; }
.midops-command-deck__title { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:16px!important; }
.midops-command-clock { color:var(--mx-text-3)!important; font-family:var(--mx-mono)!important; }
.midops-live-tile { min-height:67px!important; padding:12px!important; border-radius:16px!important; background:rgba(255,255,255,.034)!important; border-color:rgba(255,255,255,.065)!important; }
.midops-live-tile__label { color:var(--mx-text-3)!important; font-family:var(--mx-mono)!important; }
.midops-live-tile__value { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:12px!important; }
.midops-quick-actions a { min-height:62px!important; border-radius:16px!important; background:rgba(27,207,143,.07)!important; border:1px solid rgba(99,242,188,.11)!important; color:var(--mx-text-2)!important; }
.midops-quick-actions a i { color:var(--mx-green-hi)!important; }

.midops-v3-launcher {
  margin:12px var(--mx-page-x) 0; width:calc(100% - (var(--mx-page-x) * 2)); min-height:54px;
  display:flex; align-items:center; gap:11px; padding:0 15px; border:1px solid var(--mx-line);
  border-radius:17px; background:rgba(255,255,255,.035); color:var(--mx-text-3); text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.midops-v3-launcher i { color:var(--mx-green-hi); font-size:15px; }
.midops-v3-launcher span { flex:1; color:var(--mx-text-2)!important; font-size:12px; font-weight:650; }
.midops-v3-launcher kbd { padding:4px 7px; border:1px solid var(--mx-line); border-radius:8px; color:var(--mx-text-4); font:700 8px/1 var(--mx-mono); }

body.midops-page-dashboard .grid-container { margin:0!important; padding:8px var(--mx-page-x) 28px!important; }
.midops-module-section { margin-top:24px!important; }
.midops-module-section__header { margin:0 2px 11px!important; }
.midops-module-section__header h3 { margin:0!important; color:var(--mx-text-1)!important; font:800 12px/1.25 var(--mx-display)!important; letter-spacing:.035em!important; }
.midops-module-section__header p { margin:4px 0 0!important; color:var(--mx-text-4)!important; font-size:9px!important; }
.midops-module-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
body.midops-page-dashboard .midops-module-grid .grid-item {
  position:relative; min-height:102px; align-items:flex-start!important; justify-content:flex-end!important;
  padding:14px!important; border-radius:20px!important; overflow:hidden;
  background:linear-gradient(145deg,rgba(25,40,34,.93),rgba(12,22,18,.96))!important;
  border:1px solid var(--mx-line)!important; box-shadow:none!important; text-align:left!important;
  transition:transform .18s var(--mx-ease),border-color .18s ease,background .18s ease;
}
body.midops-page-dashboard .midops-module-grid .grid-item:active { transform:scale(.975); border-color:rgba(99,242,188,.22)!important; }
body.midops-page-dashboard .midops-module-grid .icon-wrapper {
  position:absolute; top:12px; left:12px; width:38px!important; height:38px!important; margin:0!important;
  border-radius:13px!important; background:rgba(27,207,143,.075)!important; border:1px solid rgba(99,242,188,.11)!important;
  color:var(--mx-green-hi)!important; font-size:15px!important; box-shadow:none!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item span {
  width:100%; color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:10px!important;
  font-weight:750!important; line-height:1.35; letter-spacing:.005em!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item::after {
  content:"›"; position:absolute; right:12px; top:16px; color:var(--mx-text-4); font:500 18px/1 var(--mx-body);
}

/* Dashboard alert/broadcast */
body.midops-page-dashboard .alert-header { color:var(--mx-text-2)!important; }
body.midops-page-dashboard .alert-card { background:linear-gradient(145deg,rgba(57,27,29,.48),rgba(23,18,18,.78))!important; border-color:rgba(255,107,114,.18)!important; }
body.midops-page-dashboard .alert-card p { color:var(--mx-text-1)!important; }
body.midops-page-dashboard .alert-meta { color:var(--mx-text-3)!important; }

/* HIRBAK: explicit contrast fix from user feedback */
body.midops-page-hirbak .content-body > h3 { color:var(--mx-text-1)!important; font:800 21px/1.25 var(--mx-display)!important; letter-spacing:-.025em; }
body.midops-page-hirbak .content-body > p { color:var(--mx-text-3)!important; font-size:12px!important; }
body.midops-page-hirbak .hirbak-item {
  min-height:78px; margin-bottom:11px!important; padding:12px 66px 12px 12px!important; border-radius:20px!important;
  background:linear-gradient(145deg,#14231e,#0c1713)!important; border:1px solid rgba(211,235,223,.09)!important;
}
body.midops-page-hirbak .hirbak-item .icon-box { width:46px!important; height:46px!important; min-width:46px; margin-right:13px!important; background:rgba(27,207,143,.085)!important; color:var(--mx-green-hi)!important; border:1px solid rgba(99,242,188,.10)!important; }
body.midops-page-hirbak .hirbak-item .info { min-width:0; flex:1; }
body.midops-page-hirbak .hirbak-item .info h4 { color:var(--mx-text-1)!important; font:780 12px/1.35 var(--mx-display)!important; letter-spacing:.01em; }
body.midops-page-hirbak .hirbak-item .info span { display:block; margin-top:4px; color:var(--mx-text-3)!important; font-size:10px!important; }
body.midops-page-hirbak .score-badge { right:13px!important; min-width:38px; padding:6px 10px!important; text-align:center; background:#e9fff7!important; color:#0a694b!important; font-family:var(--mx-mono)!important; border-radius:999px!important; }
body.midops-page-hirbak .modal { align-items:flex-end!important; background:rgba(0,0,0,.7)!important; backdrop-filter:blur(10px); }
body.midops-page-hirbak .modal-content { width:100%!important; max-width:none!important; padding:18px 18px calc(18px + env(safe-area-inset-bottom))!important; border-radius:26px 26px 0 0!important; background:#101c18!important; border:1px solid var(--mx-line)!important; color:var(--mx-text-1)!important; }
body.midops-page-hirbak .modal-content::before { content:""; display:block; width:38px; height:4px; margin:0 auto 18px; border-radius:999px; background:#41554b; }

/* Logo / history / reference content */
body.midops-page-arti-logo .content-body { padding-top:16px!important; }
body.midops-page-arti-logo .section-card { padding:18px!important; margin-bottom:16px!important; }
body.midops-page-arti-logo .section-header { margin-bottom:12px!important; padding-bottom:12px!important; color:var(--mx-text-1)!important; font-size:15px!important; line-height:1.35!important; }
body.midops-page-arti-logo .section-card p,
body.midops-page-arti-logo .tactical-list li { color:var(--mx-text-2)!important; font-size:13px!important; line-height:1.7!important; text-align:left!important; }
body.midops-page-arti-logo .tactical-list li strong { color:var(--mx-text-1)!important; }
body.midops-page-arti-logo .image-placeholder-box { padding:12px!important; border-radius:16px!important; background:#eef5f2!important; border:1px solid rgba(255,255,255,.16)!important; }
body.midops-page-arti-logo .image-caption { margin:2px 0 9px!important; color:#53695f!important; font:750 10px/1.3 var(--mx-body)!important; letter-spacing:.055em!important; }
body.midops-page-arti-logo .image-placeholder-box img { margin-top:0!important; border-radius:12px!important; box-shadow:0 10px 24px rgba(3,14,9,.13)!important; }
body.midops-page-arti-logo .image-placeholder-box p { color:#4c6258!important; }
body.midops-page-arti-logo .motto-box { border-radius:22px!important; background:linear-gradient(145deg,#1b2b24,#0d1713)!important; border:1px solid rgba(242,198,109,.18)!important; }
body.midops-page-arti-logo .motto-title { color:var(--mx-text-3)!important; }
body.midops-page-arti-logo .motto-text { color:#f4cd78!important; font-family:var(--mx-display)!important; text-shadow:none!important; font-size:21px!important; line-height:1.35; }

/* Data-rich screens */
body.midops-native-page .data-row { padding:11px 0!important; border-color:var(--mx-line)!important; }
body.midops-native-page .data-label { color:var(--mx-text-3)!important; font-size:10px!important; }
body.midops-native-page .data-value { color:var(--mx-text-1)!important; font-size:12px!important; }
body.midops-native-page :is(.info-item,.rekap-item) { padding:13px!important; }
body.midops-native-page .info-content p { color:var(--mx-text-1)!important; }
body.midops-native-page :is(.info-icon,.icon-box,.bd-icon) { background:rgba(27,207,143,.08)!important; color:var(--mx-green-hi)!important; border:1px solid rgba(99,242,188,.10)!important; }
body.midops-native-page :is(.badge-kompi,.badge,.status-badge) { border-radius:999px!important; }

/* Tables become readable mobile scroll surfaces */
.midops-v3-table-shell { width:100%; overflow:auto; margin:10px 0 16px; border:1px solid var(--mx-line); border-radius:16px; background:rgba(255,255,255,.02); -webkit-overflow-scrolling:touch; }
.midops-v3-table-shell table { margin:0!important; min-width:max(100%,560px); border:0!important; }
body.midops-native-page :is(table,.tactical-table) { color:var(--mx-text-2)!important; }
body.midops-native-page :is(table,.tactical-table) th { position:sticky; top:0; z-index:2; background:#13241d!important; color:var(--mx-green-hi)!important; font:750 9px/1.3 var(--mx-body)!important; letter-spacing:.045em; border-color:var(--mx-line)!important; }
body.midops-native-page :is(table,.tactical-table) td { background:rgba(255,255,255,.018)!important; color:var(--mx-text-2)!important; border-color:var(--mx-line)!important; font-size:11px!important; }

/* FAQ and document modules */
body.midops-native-page .faq-wrapper { border-radius:18px!important; }
body.midops-native-page .faq-header { min-height:56px; padding:13px 14px!important; color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; }
body.midops-native-page .faq-header i { color:var(--mx-green-hi)!important; }
body.midops-native-page .faq-answer { padding:0 14px 14px!important; color:var(--mx-text-2)!important; }
body.midops-native-page .doc-content { color:var(--mx-text-2)!important; }

/* Program / achievements / dislocation */
body.midops-native-page :is(.program-card,.prestasi-card,.dislokasi-card,.commander-card) { overflow:hidden; }
body.midops-native-page :is(.program-card,.prestasi-card,.dislokasi-card) :is(p,span,li) { color:var(--mx-text-2)!important; }
body.midops-native-page .c-name { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; }
body.midops-native-page :is(.c-nrp,.c-jabatan,.c-periode) { color:var(--mx-text-3)!important; }
body.midops-native-page .location-box { background:rgba(105,201,255,.05)!important; border-color:rgba(105,201,255,.11)!important; }

/* Forms / profile */
body.midops-page-biodata .digital-card { border-radius:26px!important; background:linear-gradient(145deg,#143327,#071813)!important; border:1px solid rgba(99,242,188,.15)!important; box-shadow:0 24px 48px rgba(0,0,0,.34)!important; }
body.midops-page-biodata .content-body { padding-top:8px!important; }
body.midops-page-pengaturan .form-edit-container { padding-top:14px!important; }
.midops-settings-intro { margin-bottom:18px!important; padding:18px!important; border-radius:22px; background:linear-gradient(145deg,rgba(27,207,143,.09),rgba(255,255,255,.025)); border:1px solid rgba(99,242,188,.11); }
.midops-settings-intro__eyebrow { color:var(--mx-green-hi)!important; font-family:var(--mx-mono)!important; }
.midops-settings-intro h2 { color:var(--mx-text-1)!important; font-size:20px!important; letter-spacing:-.03em; }
.midops-settings-intro p { color:var(--mx-text-3)!important; }
.midops-system-authority-label { border-color:var(--mx-line)!important; }
.midops-system-authority-label span { color:var(--mx-green-hi)!important; font-family:var(--mx-mono)!important; }
.midops-system-authority-label p { color:var(--mx-text-3)!important; }

/* Modal -> native mobile bottom sheet */
body.midops-native-page:not(.midops-fullscreen-page) .modal-overlay,
body.midops-native-page:not(.midops-fullscreen-page) .modal {
  background:rgba(0,0,0,.73)!important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
body.midops-native-page:not(.midops-fullscreen-page) .modal-overlay { align-items:flex-end!important; }
body.midops-native-page:not(.midops-fullscreen-page) .modal-box {
  width:100%!important; max-width:560px!important; max-height:88dvh!important; margin:0 auto!important;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom))!important; border-radius:26px 26px 0 0!important;
  background:#101d18!important; border:1px solid var(--mx-line)!important; box-shadow:0 -24px 50px rgba(0,0,0,.4)!important;
}

/* OTA / System authority */
body.midops-page-update-admin .ota-wrap,
body.midops-page-system-admin .system-wrap { padding-top:14px!important; }
.midops-ota-command { border-radius:24px!important; background:radial-gradient(circle at 92% 6%,rgba(27,207,143,.16),transparent 34%),linear-gradient(145deg,#172c24,#0b1713)!important; border-color:rgba(99,242,188,.14)!important; }
.midops-ota-command__eyebrow { color:var(--mx-green-hi)!important; font-family:var(--mx-mono)!important; }
.midops-ota-command h2 { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; }
.midops-ota-command p { color:var(--mx-text-3)!important; }
.midops-ota-command__badge { color:#f4d58e!important; background:rgba(242,198,109,.08)!important; border-color:rgba(242,198,109,.17)!important; }
.midops-ota-pipeline span { color:var(--mx-text-3)!important; border-color:var(--mx-line)!important; background:rgba(255,255,255,.025)!important; }
.midops-ota-pipeline i { color:var(--mx-green-hi)!important; }
body.midops-page-update-admin .ota-card { padding:18px!important; margin-bottom:14px!important; }
body.midops-page-update-admin .release-row { border-color:var(--mx-line)!important; padding:14px 0!important; }
body.midops-page-update-admin .release-name { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; }
body.midops-page-update-admin .release-meta { color:var(--mx-text-3)!important; }
body.midops-page-update-admin .release-notes { color:var(--mx-text-2)!important; }
body.midops-page-update-admin .mini-btn { color:var(--mx-text-2)!important; background:rgba(255,255,255,.04)!important; border-color:var(--mx-line)!important; }
body.midops-page-update-admin .ota-progress-text { color:var(--mx-text-3)!important; }
body.midops-page-system-admin .metric { border-radius:16px!important; background:rgba(255,255,255,.034)!important; border-color:var(--mx-line)!important; }
body.midops-page-system-admin .metric span { color:var(--mx-text-3)!important; }
body.midops-page-system-admin .metric strong { color:var(--mx-text-1)!important; }
body.midops-page-system-admin .audit { color:var(--mx-text-2)!important; border-color:var(--mx-line)!important; }

/* Command palette / bottom sheet */
.midops-v3-sheet { position:fixed; inset:0; z-index:2147483600; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); }
.midops-v3-sheet.is-open { display:flex; animation:mxFade .16s ease both; }
.midops-v3-sheet__panel { width:100%; max-width:560px; max-height:min(82dvh,720px); padding:10px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:linear-gradient(180deg,#14241e,#0b1512); border:1px solid var(--mx-line); box-shadow:0 -25px 65px rgba(0,0,0,.52); overflow:hidden; animation:mxSheet .26s var(--mx-ease) both; }
.midops-v3-sheet__handle { width:42px; height:4px; margin:2px auto 14px; border-radius:999px; background:#43584e; }
.midops-v3-sheet__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.midops-v3-sheet__head span { color:var(--mx-green-hi)!important; font:800 8px/1.2 var(--mx-mono); letter-spacing:.13em; }
.midops-v3-sheet__head h2 { margin:4px 0 0; color:var(--mx-text-1)!important; font:800 20px/1.2 var(--mx-display)!important; letter-spacing:-.035em; }
.midops-v3-sheet__close { width:40px; height:40px; border-radius:13px; border:1px solid var(--mx-line); background:rgba(255,255,255,.04); color:var(--mx-text-2); }
.midops-v3-search { position:relative; margin-bottom:11px; }
.midops-v3-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--mx-green-hi); }
.midops-v3-search input { width:100%; min-height:52px; padding:0 14px 0 42px; border-radius:16px; border:1px solid var(--mx-line); background:rgba(255,255,255,.045); color:var(--mx-text-1); font-size:16px; }
.midops-v3-results { overflow:auto; max-height:calc(min(82dvh,720px) - 150px); padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.midops-v3-result { width:100%; min-height:64px; display:flex; align-items:center; gap:12px; padding:10px 11px; margin:6px 0; border:1px solid var(--mx-line); border-radius:17px; background:rgba(255,255,255,.027); color:inherit; text-decoration:none; }
.midops-v3-result__icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:var(--mx-green-soft); color:var(--mx-green-hi); }
.midops-v3-result__copy { min-width:0; flex:1; }
.midops-v3-result__copy strong { display:block; color:var(--mx-text-1)!important; font:750 11px/1.35 var(--mx-display)!important; }
.midops-v3-result__copy span { display:block; margin-top:3px; color:var(--mx-text-4)!important; font-size:9px; }
.midops-v3-result > i { color:var(--mx-text-4); }
.midops-v3-empty { padding:28px 14px; text-align:center; color:var(--mx-text-3); font-size:12px; }

/* Touch feedback */
.midops-v3-pressable { transition:transform .17s var(--mx-ease),border-color .17s ease,background .17s ease; }
.midops-v3-pressable:active { transform:scale(.985); }

/* Network state */
.midops-network-state { color:#fff!important; background:rgba(112,28,31,.97)!important; border-color:rgba(255,255,255,.13)!important; font-family:var(--mx-body)!important; }

/* Auth 3.0 */
body.midops-auth-page { background:radial-gradient(70% 45% at 50% 3%,rgba(27,207,143,.16),transparent 72%),linear-gradient(180deg,#07110e,#040807)!important; }
body.midops-auth-page .auth-wrapper { max-width:460px; margin:auto; padding-left:22px!important; padding-right:22px!important; }
body.midops-auth-page .auth-header::before { color:var(--mx-green-hi)!important; border-color:rgba(99,242,188,.18)!important; background:rgba(27,207,143,.07)!important; font-family:var(--mx-mono)!important; }
body.midops-auth-page .auth-header h1 { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:22px!important; font-weight:850!important; }
body.midops-auth-page .auth-header p { color:var(--mx-text-3)!important; }
body.midops-auth-page .auth-logo { filter:drop-shadow(0 18px 34px rgba(0,0,0,.46))!important; }
body.midops-auth-page .input-box { min-height:60px!important; background:rgba(255,255,255,.04)!important; border-color:rgba(255,255,255,.095)!important; }
body.midops-auth-page .input-box i { color:var(--mx-green-hi)!important; }
body.midops-auth-page .btn-submit { min-height:58px!important; }
body.midops-auth-page .auth-footer { color:var(--mx-text-3)!important; }
body.midops-auth-page .auth-footer a { color:var(--mx-green-hi)!important; }
.midops-auth-security div { color:var(--mx-text-3)!important; border-color:var(--mx-line)!important; background:rgba(255,255,255,.025)!important; }
.midops-auth-security i { color:var(--mx-green-hi)!important; }

/* Fullscreen operational modules */
body.midops-fullscreen-page { background:#050908!important; }
body.midops-fullscreen-page .top-nav { background:rgba(5,10,8,.88)!important; }
body.midops-page-radar-pasukan :is(.leaflet-control,.map-controls,.radar-panel,.info-panel),
body.midops-page-tracker-lari :is(.tracker-panel,.stats-panel,.summary-card) { border-radius:18px!important; }

/* Motion */
@keyframes mxFade { from{opacity:0} to{opacity:1} }
@keyframes mxSheet { from{transform:translateY(28px);opacity:.75} to{transform:translateY(0);opacity:1} }
@keyframes mxRise { from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
body.midops-native-page.midops-v3-ready .midops-command-deck,
body.midops-native-page.midops-v3-ready .midops-v3-page-intro { animation:mxRise .3s var(--mx-ease) both; }

@media (max-width:359px) {
  :root { --mx-page-x:12px; }
  .midops-module-grid { gap:8px!important; }
  body.midops-page-dashboard .midops-module-grid .grid-item { min-height:96px; padding:12px!important; }
  .midops-live-grid { gap:6px!important; }
  .midops-bottom-nav a span { font-size:7px!important; }
}

@media (min-width:700px) {
  body.midops-native-page:not(.midops-fullscreen-page) .app-container { max-width:560px!important; margin:0 auto!important; }
  .midops-bottom-nav { max-width:540px!important; left:50%!important; right:auto!important; width:calc(100% - 20px)!important; transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* 3.0 system authority hero + scroll progress */
.midops-v3-scroll-progress{position:fixed;left:0;right:0;top:61px;height:2px;z-index:2999;pointer-events:none;background:transparent}
.midops-v3-scroll-progress>span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mx-green),var(--mx-green-hi));box-shadow:0 0 12px rgba(99,242,188,.45);transition:width .08s linear}
.midops-v3-authority-card{margin:0 0 14px;padding:18px;border-radius:24px;background:radial-gradient(circle at 90% 5%,rgba(105,201,255,.11),transparent 35%),linear-gradient(145deg,#172720,#0b1713);border:1px solid var(--mx-line);box-shadow:var(--mx-shadow-1)}
.midops-v3-authority-card__eyebrow{color:var(--mx-green-hi);font:800 8px/1.2 var(--mx-mono);letter-spacing:.14em}
.midops-v3-authority-card__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:7px}
.midops-v3-authority-card h1{margin:0;color:var(--mx-text-1)!important;font:800 20px/1.2 var(--mx-display)!important;letter-spacing:-.035em}
.midops-v3-authority-card p{margin:6px 0 0;color:var(--mx-text-3)!important;font-size:10px;line-height:1.55}
.midops-v3-authority-card__status{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:rgba(27,207,143,.08);border:1px solid rgba(99,242,188,.14);color:var(--mx-green-hi);font:800 7px/1 var(--mx-mono);letter-spacing:.06em}
.midops-v3-authority-card__status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mx-green-hi);box-shadow:0 0 10px rgba(99,242,188,.55)}
body.midops-page-system-admin .sys-wrap{padding:14px var(--mx-page-x)!important}
body.midops-page-system-admin .metrics{gap:10px!important}
body.midops-page-system-admin .metric{min-height:82px;padding:13px!important;display:flex;flex-direction:column;justify-content:center}
body.midops-page-system-admin .metric span{font-family:var(--mx-mono)!important;letter-spacing:.06em}
body.midops-page-system-admin .metric strong{margin-top:7px!important;font-family:var(--mx-display)!important;font-size:15px!important}
/* App-bar compatibility for legacy pages that use a direct heading instead of .nav-txt. */
body.midops-native-page .top-nav > :is(h1,h2,h3) {
  flex:1; margin:0!important; padding-right:42px; text-align:center;
  color:var(--mx-text-1)!important; font:800 13px/1.25 var(--mx-display)!important; letter-spacing:.045em!important;
}
body.midops-native-page .top-nav > i:last-child { color:var(--mx-green-hi)!important; }
/* Detailed module refinements */
body.midops-page-dashboard .alert-card h4 { color:var(--mx-red)!important; }
body.midops-page-system-admin .metric strong.ok { color:var(--mx-green-hi)!important; }
body.midops-page-system-admin .metric strong.bad { color:var(--mx-red)!important; }

/* Reference/document list */
body.midops-page-halaman .faq-wrapper { margin-bottom:10px!important; }
body.midops-page-halaman .faq-header { gap:12px!important; }
body.midops-page-halaman .list-number {
  width:34px!important; height:34px!important; min-width:34px!important; display:grid!important; place-items:center!important;
  border-radius:11px!important; background:rgba(27,207,143,.09)!important; color:var(--mx-green-hi)!important;
  border:1px solid rgba(99,242,188,.11)!important; font:800 10px/1 var(--mx-mono)!important;
}
body.midops-page-halaman .list-text { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-size:11px!important; line-height:1.4!important; }

/* Activity / feed / log cards */
body.midops-page-feed-lari .feed-card-v2,
body.midops-page-log-pelanggaran .lb-card,
body.midops-page-data-penugasan .activity-item { padding:14px!important; margin-bottom:10px!important; }
body.midops-page-feed-lari .feed-name-v2,
body.midops-page-log-pelanggaran .lb-name { color:var(--mx-text-1)!important; font-family:var(--mx-display)!important; font-weight:750!important; }
body.midops-page-feed-lari .feed-meta-v2,
body.midops-page-log-pelanggaran .lb-unit { color:var(--mx-text-3)!important; }
body.midops-page-log-pelanggaran .lb-score-lbl { color:var(--mx-text-4)!important; }

/* Materiel and Alutsista */
body.midops-page-alutsista :is(.card,.item-card,.alutsista-card),
body.midops-page-alutsista-detail :is(.card,.detail-card) {
  background:linear-gradient(145deg,rgba(24,39,33,.96),rgba(11,21,17,.98))!important;
  border-color:var(--mx-line)!important; color:var(--mx-text-1)!important; box-shadow:none!important;
}
body.midops-page-alutsista :is(.card,.item-card,.alutsista-card) :is(p,span),
body.midops-page-alutsista-detail :is(.card,.detail-card) :is(p,span) { color:var(--mx-text-2)!important; }

/* Readiness input screens */
body:is(.midops-page-kesjas,.midops-page-menembak,.midops-page-renang,.midops-page-beladiri) :is(.section-header-jas,.section-title,.bd-info h4) {
  color:var(--mx-text-1)!important; font-family:var(--mx-display)!important;
}
body:is(.midops-page-kesjas,.midops-page-menembak,.midops-page-renang,.midops-page-beladiri) :is(.section-header-jas,.section-title) {
  border-color:rgba(99,242,188,.16)!important;
}

/* History and achievements */
body.midops-page-sejarah-satuan .commander-card,
body.midops-page-data-prestasi .prestasi-card { padding:13px!important; }
body.midops-page-sejarah-satuan .commander-photo,
body.midops-page-data-prestasi .prestasi-img-box { border-radius:15px!important; overflow:hidden; }
body.midops-page-sejarah-satuan .c-name,
body.midops-page-data-prestasi .prestasi-label { color:var(--mx-text-1)!important; }

/* Data dislocation */
body.midops-page-data-dislokasi .dislokasi-header { color:var(--mx-text-1)!important; }
body.midops-page-data-dislokasi .badge-kompi { background:rgba(27,207,143,.09)!important; color:var(--mx-green-hi)!important; border:1px solid rgba(99,242,188,.13)!important; }
body.midops-page-data-dislokasi .foto-label { color:var(--mx-text-3)!important; }
body.midops-page-data-dislokasi .deskripsi-kompi,
body.midops-page-data-dislokasi .list-arti li { color:var(--mx-text-2)!important; }

/* Profile detail */
body.midops-page-detail-anggota .section-card { padding:16px!important; margin-bottom:12px!important; }
body.midops-page-detail-anggota .data-row:last-child { border-bottom:0!important; }

/* Checkbox / switches */
body.midops-native-page input[type="checkbox"] { accent-color:var(--mx-green); }
/* Flagship operational module */
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] {
  grid-column:1 / -1!important; min-height:112px;
  background:
    radial-gradient(circle at 88% 14%,rgba(99,242,188,.15),transparent 34%),
    linear-gradient(145deg,#173328,#0b1a15)!important;
  border-color:rgba(99,242,188,.17)!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] .icon-wrapper {
  width:44px!important; height:44px!important; background:rgba(27,207,143,.12)!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] span { font-size:12px!important; }
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"]::before {
  content:"LIVE OPERATION"; position:absolute; left:68px; top:17px; color:var(--mx-green-hi);
  font:800 7px/1 var(--mx-mono); letter-spacing:.11em;
}


/* =====================================================================
 * MIDOPS 3.1 — MOBILE LEGIBILITY & RESPONSIVE LAYOUT PASS
 * Purpose: phone-first sizing, deterministic text hierarchy, and strict
 * foreground/background readability without changing application logic.
 * ===================================================================== */
:root {
  --mx-text-1:#f7fbf9;
  --mx-text-2:#dce6e1;
  --mx-text-3:#b8c7c0;
  --mx-text-4:#93a69c;
  --mx-on-light-1:#08130f;
  --mx-on-light-2:#21342c;
  --mx-on-light-3:#4b5f56;
  --mx-page-x:clamp(14px,3.8vw,18px);
}

html.midops-mobile-ui {
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html.midops-mobile-ui body.midops-native-page {
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
body.midops-native-page .app-container,
body.midops-native-page .app-container > *,
body.midops-native-page :is(.content-body,.form-edit-container,.feed-container,.faq-container,.ota-wrap,.kta-container,.grid-container,.midops-module-section,.midops-module-grid) {
  min-width:0;
  max-width:100%;
}
body.midops-native-page:not(.midops-fullscreen-page) :is(img,video) {
  max-width:100%;
}

/* Text hierarchy — minimum phone-readable sizes. */
body.midops-native-page :is(p,li,.faq-answer,.doc-content,.release-notes,.arti-lambang-box,.deskripsi-kompi) {
  color:var(--mx-text-2)!important;
}
body.midops-native-page :is(.text-muted,.muted,.meta,.release-meta,.data-label,.label,.foto-label,.c-periode,.feed-meta-v2,.lb-unit,.stat-label) {
  color:var(--mx-text-3)!important;
}
body.midops-native-page .midops-v3-page-intro__eyebrow,
body.midops-native-page .midops-module-section__header p,
body.midops-native-page .midops-live-tile__label,
body.midops-native-page .midops-command-clock {
  color:var(--mx-text-3)!important;
}

/* Dashboard module cards: balanced two-line titles, aligned baselines and
   sufficient size at common Android widths (360–430 CSS px). */
body.midops-page-dashboard .midops-module-section { margin-top:26px!important; }
body.midops-page-dashboard .midops-module-section__header {
  margin:0 2px 12px!important;
}
body.midops-page-dashboard .midops-module-section__header h3 {
  color:var(--mx-text-1)!important;
  font-size:clamp(12.5px,3.15vw,14px)!important;
  line-height:1.25!important;
  letter-spacing:.02em!important;
}
body.midops-page-dashboard .midops-module-section__header p {
  margin-top:5px!important;
  font-size:clamp(9.5px,2.45vw,10.5px)!important;
  line-height:1.45!important;
}
body.midops-page-dashboard .midops-module-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item {
  min-height:106px!important;
  padding:13px 34px 13px 13px!important;
  justify-content:flex-end!important;
  border-color:rgba(211,235,223,.12)!important;
}
body.midops-page-dashboard .midops-module-grid .icon-wrapper {
  top:13px!important;
  left:13px!important;
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item span {
  display:flex!important;
  align-items:flex-end!important;
  width:100%!important;
  min-height:31px!important;
  margin-top:48px!important;
  padding:0!important;
  color:var(--mx-text-1)!important;
  font-size:clamp(11px,2.8vw,12px)!important;
  line-height:1.32!important;
  font-weight:780!important;
  letter-spacing:-.005em!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
body.midops-page-dashboard .midops-module-grid .grid-item::after {
  right:12px!important;
  top:18px!important;
  color:var(--mx-text-3)!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] {
  min-height:116px!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] span {
  min-height:32px!important;
  margin-top:54px!important;
  color:var(--mx-text-1)!important;
  font-size:clamp(12px,3vw,13px)!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"]::before {
  color:#8ff7cd!important;
}

/* Bottom navigation readability. */
.midops-bottom-nav a { color:#a8bbb2!important; }
.midops-bottom-nav a span {
  font-size:clamp(8px,2.1vw,9px)!important;
  font-weight:800!important;
}
.midops-bottom-nav a.is-active { color:#78f6c7!important; }

/* App bars and common secondary copy. */
body.midops-native-page .top-nav .nav-txt::after { color:var(--mx-text-3)!important; }
.midops-v3-result__copy span { color:var(--mx-text-3)!important; }
body.midops-native-page .midops-v3-page-intro p { color:var(--mx-text-3)!important; font-size:12.5px!important; }

/* Light-surface contract. These surfaces intentionally remain document/light
   surfaces; therefore text is explicitly dark. */
body.midops-native-page :is(.image-placeholder-box,.mission-image-box,.foto-box,.img-preview-box) {
  color:var(--mx-on-light-1)!important;
}
body.midops-native-page :is(.image-placeholder-box,.mission-image-box,.foto-box,.img-preview-box) :is(h1,h2,h3,h4,h5,h6,p,span,strong,b,label,small,li) {
  color:var(--mx-on-light-2)!important;
}
body.midops-native-page :is(.image-placeholder-box,.mission-image-box,.foto-box,.img-preview-box) :is(.image-caption,.muted,small) {
  color:var(--mx-on-light-3)!important;
}

/* Legacy white application surfaces are normalized to dark command surfaces
   so they cannot inherit light text on white backgrounds. */
body.midops-native-page :is(
  .modal-box,.search-box,.member-card,.action-box,.history-card,.table-container,
  .tab-content,.sikap-section,.renang-card,.mission-card,.history-card,.feed-header-v2
) {
  background:linear-gradient(150deg,rgba(24,39,33,.98),rgba(11,21,17,.99))!important;
  border-color:var(--mx-line)!important;
  color:var(--mx-text-1)!important;
}
body.midops-native-page :is(
  .modal-box,.search-box,.member-card,.action-box,.history-card,.table-container,
  .tab-content,.sikap-section,.renang-card,.mission-card,.history-card,.feed-header-v2
) :is(h1,h2,h3,h4,h5,h6,strong,b) { color:var(--mx-text-1)!important; }
body.midops-native-page :is(
  .modal-box,.search-box,.member-card,.action-box,.history-card,.table-container,
  .tab-content,.sikap-section,.renang-card,.mission-card,.history-card,.feed-header-v2
) :is(p,span,label,li,small) { color:var(--mx-text-2)!important; }

/* Tables keep a controlled dark surface. If a legacy row declares a light
   alternating background, the row is darkened rather than allowing white-on-white. */
body.midops-native-page .midops-v3-table-shell table {
  color:var(--mx-text-2)!important;
  background:#0e1815!important;
}
body.midops-native-page .midops-v3-table-shell :is(th,td) {
  color:var(--mx-text-2)!important;
  border-color:rgba(211,235,223,.10)!important;
}
body.midops-native-page .midops-v3-table-shell th {
  color:var(--mx-text-1)!important;
  background:#17251f!important;
}
body.midops-native-page .midops-v3-table-shell tbody tr,
body.midops-native-page .midops-v3-table-shell tbody tr:nth-child(even),
body.midops-native-page .midops-v3-table-shell tbody tr:hover {
  background:#0f1a16!important;
}
body.midops-native-page .midops-v3-table-shell tbody tr:nth-child(even) { background:#13211c!important; }

/* Active light tabs are one of the few deliberately light controls: enforce
   dark foreground explicitly. */
body.midops-native-page .tab-btn.active {
  background:#effaf5!important;
  color:#0b3b2b!important;
}
body.midops-native-page .tab-btn.active :is(span,i) { color:#0b3b2b!important; }

/* Input contract: dark input => light text; light/disabled input => dark text. */
body.midops-native-page :is(input,select,textarea) {
  color:var(--mx-text-1)!important;
}
body.midops-native-page :is(input,select,textarea):disabled {
  background:#dfe8e3!important;
  color:#43574e!important;
  -webkit-text-fill-color:#43574e!important;
  opacity:1!important;
}

/* HIRBAK user-reported area — title and support copy are now always readable. */
body.midops-page-hirbak .hirbak-item .info h4 {
  color:var(--mx-text-1)!important;
  font-size:clamp(12px,3.1vw,13px)!important;
  line-height:1.35!important;
}
body.midops-page-hirbak .hirbak-item .info span {
  color:var(--mx-text-3)!important;
  font-size:clamp(10.5px,2.7vw,11.5px)!important;
}
body.midops-page-hirbak .score-badge {
  background:#eafff6!important;
  color:#07543d!important;
}

/* Logo/reference pages: dark narrative + light document surfaces. */
body.midops-page-arti-logo .section-card p,
body.midops-page-arti-logo .tactical-list li {
  color:var(--mx-text-2)!important;
}
body.midops-page-arti-logo .image-placeholder-box {
  background:#f2f7f5!important;
}
body.midops-page-arti-logo .image-placeholder-box :is(p,span,strong,b,h1,h2,h3,h4,h5,h6) {
  color:var(--mx-on-light-2)!important;
}
body.midops-page-arti-logo .image-caption { color:#42574e!important; }

/* Phone width breakpoints. No fixed device width is assumed. */
@media (max-width:389px) {
  :root { --mx-page-x:13px; }
  body.midops-page-dashboard .midops-module-grid { gap:8px!important; }
  body.midops-page-dashboard .midops-module-grid .grid-item {
    min-height:101px!important;
    padding:12px 30px 12px 12px!important;
  }
  body.midops-page-dashboard .midops-module-grid .icon-wrapper {
    width:38px!important; height:38px!important; top:12px!important; left:12px!important;
  }
  body.midops-page-dashboard .midops-module-grid .grid-item span {
    margin-top:45px!important;
    font-size:10.75px!important;
  }
}
@media (max-width:339px) {
  body.midops-page-dashboard .midops-module-grid { grid-template-columns:1fr!important; }
  body.midops-page-dashboard .midops-module-grid .grid-item {
    min-height:82px!important;
    justify-content:center!important;
  }
  body.midops-page-dashboard .midops-module-grid .grid-item span {
    min-height:0!important;
    margin-top:42px!important;
    font-size:12px!important;
  }
}
@media (min-width:430px) and (max-width:699px) {
  body.midops-page-dashboard .midops-module-grid .grid-item { min-height:110px!important; }
}

/* Generic mobile text layout: prevent clipped labels and keep card copy readable. */
body.midops-native-page :is(
  .section-header,.section-title,.info-item,.program-card,.prestasi-card,.commander-card,
  .member-card,.history-card,.action-box,.activity-item,.feed-card-v2,.lb-card,.rekap-card,
  .dislokasi-card,.ota-card,.sys-card,.faq-header,.data-row,.form-group
) { min-width:0; }
body.midops-native-page :is(
  h1,h2,h3,h4,h5,h6,p,.list-text,.prestasi-label,.feed-name-v2,.lb-name,.c-name,
  .data-value,.data-label,.bd-info,.sub-title,.deskripsi-kompi
) {
  overflow-wrap:anywhere;
  word-break:normal;
}

/* MIDOPS 3.1.1 — dashboard module title placement refinement */
body.midops-page-dashboard .midops-module-grid .grid-item {
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  align-content:center!important;
  row-gap:0!important;
  column-gap:12px!important;
  min-height:92px!important;
  padding:14px 38px 14px 14px!important;
  justify-content:initial!important;
}
body.midops-page-dashboard .midops-module-grid .icon-wrapper {
  position:relative!important;
  top:auto!important;
  left:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  width:42px!important;
  height:42px!important;
  align-self:center!important;
  justify-self:start!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item span {
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  align-self:center!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 4px 0 0!important;
  color:var(--mx-text-1)!important;
  font-size:clamp(12px,2.95vw,13px)!important;
  line-height:1.28!important;
  font-weight:780!important;
  letter-spacing:-.01em!important;
  text-align:left!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
body.midops-page-dashboard .midops-module-grid .grid-item::after {
  top:50%!important;
  right:14px!important;
  transform:translateY(-50%)!important;
  color:var(--mx-text-3)!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] {
  min-height:104px!important;
  padding-top:14px!important;
  padding-bottom:14px!important;
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] span {
  padding-top:0!important;
  align-self:center!important;
  font-size:clamp(12.5px,3.1vw,14px)!important;

  transform: translateY(-20px);
}
body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"]::before {
  left:70px!important;
  top:30px!important;
}
@media (max-width:389px) {
  body.midops-page-dashboard .midops-module-grid .grid-item {
    min-height:88px!important;
    padding:12px 34px 12px 12px!important;
    column-gap:10px!important;
  }
  body.midops-page-dashboard .midops-module-grid .icon-wrapper {
    width:40px!important;
    height:40px!important;
  }
  body.midops-page-dashboard .midops-module-grid .grid-item span {
    font-size:11.5px!important;
    line-height:1.24!important;
  }
  body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] {
    min-height:98px!important;
  }
  body.midops-page-dashboard .midops-module-grid .grid-item[href="radar-pasukan.html"] span {
    font-size:12px!important;
  }
}
@media (max-width:339px) {
  body.midops-page-dashboard .midops-module-grid { grid-template-columns:1fr!important; }
  body.midops-page-dashboard .midops-module-grid .grid-item {
    min-height:82px!important;
    padding-right:32px!important;
  }
}