/* =========================================================
   RUANG MASLAHAT ACCESSIBILITY & MOBILE — STAGE 5.44.52
   Keyboard clarity, 200% reflow, touch comfort, and safe dialogs.
   ========================================================= */

:root {
  --rm52-focus-color: #087f75;
  --rm52-focus-ring: 0 0 0 4px rgba(8, 127, 117, .24);
  --rm52-touch-target: 44px;
  --rm52-mobile-gutter: 12px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-wrap: anywhere;
}

:where(main, [role="main"], section, article, aside, [role="dialog"], [role="tabpanel"]) {
  min-inline-size: 0;
}

:where(img, video, canvas) {
  max-inline-size: 100%;
}

:where(button, input, select, textarea) {
  font-family: inherit;
}

:where(button, a[href], input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--rm52-focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: var(--rm52-focus-ring) !important;
}

:where(input, select, textarea)[aria-invalid="true"]:focus-visible {
  outline-color: #b42318 !important;
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .2) !important;
}

/* Text entry uses a quiet border; actions and forced-color mode retain their focus rings. */
@media (forced-colors: none) {
  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, [contenteditable=true], [role=textbox]):is(:focus, :focus-visible),
  html body :is(#adminModuleContainer, #rm527AccountModal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, [contenteditable=true], [role=textbox]):is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--rm-input-focus-color, #87979e) !important;
  }
  :is(input, textarea)[aria-invalid=true] { --rm-input-focus-color: #b42318; }
}
@media (forced-colors: active) {
  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, [contenteditable=true], [role=textbox]):is(:focus, :focus-visible),
  html body :is(#adminModuleContainer, #rm527AccountModal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, [contenteditable=true], [role=textbox]):is(:focus, :focus-visible) {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}
/* Leaflet canvases deliberately exceed the viewport for pan padding. */
.leaflet-pane > canvas, .leaflet-pane > svg { max-inline-size: none; max-block-size: none; }

:where(button, a[href], [role="button"], [role="tab"]) {
  touch-action: manipulation;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  min-block-size: var(--rm52-touch-target);
}

.rm5452-skip-link {
  position: fixed;
  z-index: 2147483647;
  inset-block-start: max(8px, env(safe-area-inset-top));
  inset-inline-start: max(8px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  min-block-size: var(--rm52-touch-target);
  padding: 0 16px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #0b2f43;
  color: #fff;
  font-size: .9375rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(5, 27, 40, .28);
  transform: translateY(calc(-100% - 24px));
  transition: transform .16s ease;
}

.rm5452-skip-link:focus {
  transform: translateY(0);
}

.rm5452-sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Full-screen backdrops and non-modal map drawers own their viewport bounds. */
[role="dialog"]:not(.rm-disclaimer-v37):not([aria-modal="false"]) {
  max-inline-size: calc(100vw - 32px) !important;
  max-block-size: calc(100dvh - 32px) !important;
  overscroll-behavior: contain;
}

[role="dialog"]:focus {
  outline: none;
}

.rm5452-table-region {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.rm5452-table-region:focus-visible {
  border-radius: 10px;
}

.rm5452-table-region > table {
  min-inline-size: max-content;
}

:where(.shell, .main, .content, .workspace, .workspace-frame-shell, .modern-dashboard-main,
  .rm5449-triage-workspace, .rm5449-work-panel, .pegawai-main-panel,
  .analysis-panel-content, .webgis-adddata-body, .webgis-print-panel-body,
  .rm57-modal-body, .laporan-saya-panel, .login-page, .login-card) {
  min-inline-size: 0;
}

:where(.rm-admin-card, .pegawai-followup-item, .laporan-saya-item, .rm-report-monitor-item,
  .analysis-choice, .webgis-adddata-dataset-card) :where(strong, span, small, p) {
  overflow-wrap: anywhere;
}

/* The internal command center used very small legacy text. Keep operational copy readable. */
html[data-page="dashboard-admin"] :where(.nav a, .panel-head h2, .list-copy strong, .quick strong, .row strong, .error) {
  font-size: .875rem !important;
  line-height: 1.4 !important;
}

html[data-page="dashboard-admin"] :where(.brand small, .caption, .nav-section, .sidefoot,
  .hero p, .workarea, .panel-head p, .panel-head a, .list-copy small, .status,
  .empty, .workspace-head span, .workspace-head p, .workspace-loading, .quick small, .row small) {
  font-size: .75rem !important;
  line-height: 1.45 !important;
}

html[data-page="dashboard-admin"] .nav a,
html[data-page="dashboard-admin"] .user-trigger {
  min-block-size: var(--rm52-touch-target) !important;
}

:where(.webgis-map, .leaflet-container, .laporan-saya-map-canvas)[tabindex="0"]:focus-visible {
  outline-offset: -4px !important;
}

@media (pointer: coarse) {
  :where(button, [role="button"], [role="tab"], .leaflet-control a) {
    min-block-size: var(--rm52-touch-target);
  }

  :where(button, [role="button"], .leaflet-control a):not(.btn-primary):not(.pegawai-followup-save-btn) {
    min-inline-size: var(--rm52-touch-target);
  }
}

@media (max-width: 760px) {
  body {
    max-inline-size: 100vw;
  }

  :where(.webgis-overlay-header, .webgis-overlay-left, .webgis-overlay-right,
    .webgis-search-card, .webgis-search-box, .modern-header-left, .modern-header-right) {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  :where(.webgis-measure-modal, .webgis-print-panel, .webgis-intersect-panel,
    .webgis-adddata-panel, .analysis-component-modal-card, .rm57-modal-card,
    .laporan-saya-modal, .laporan-saya-map-modal, .photo-crop-dialog, .otp-modal-content,
    .rm-report-menu-card, .rm-admin-logout-card) {
    inline-size: calc(100vw - (2 * var(--rm52-mobile-gutter))) !important;
    max-inline-size: calc(100vw - (2 * var(--rm52-mobile-gutter))) !important;
    max-block-size: calc(100dvh - (2 * var(--rm52-mobile-gutter))) !important;
    margin: var(--rm52-mobile-gutter) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
  }

  :where(.webgis-layer-panel, .analysis-side-panel, .rm-tr-panel, .v419-analysis-panel,
    .rm57-reports-panel, .rm58-report-panel, .rm-report-monitor-panel-right) {
    inline-size: min(100%, calc(100vw - (2 * var(--rm52-mobile-gutter)))) !important;
    max-inline-size: calc(100vw - (2 * var(--rm52-mobile-gutter))) !important;
  }

  :where(.webgis-print-grid, .webgis-adddata-grid, .webgis-intersect-grid,
    .rm-report-monitor-filter-grid, .laporan-saya-filter-row, .pegawai-followup-filter-row,
    .rm-admin-grid, .rm-admin-form-grid, .form-grid, .profile-form-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.webgis-print-actions, .webgis-adddata-actions, .webgis-measure-actions,
    .webgis-intersect-actions, .laporan-saya-modal-footer, .rm-report-monitor-actions,
    .pegawai-followup-actions, .rm-admin-actions) {
    flex-wrap: wrap !important;
  }

  :where(.webgis-print-actions, .webgis-adddata-actions, .webgis-measure-actions,
    .webgis-intersect-actions, .laporan-saya-modal-footer, .rm-report-monitor-actions,
    .pegawai-followup-actions, .rm-admin-actions) > :where(button, a) {
    flex: 1 1 150px;
  }

  .workspace-frame {
    min-block-size: 560px !important;
  }

  .rm5452-table-region {
    inline-size: 100%;
    padding-block-end: 4px;
  }
}

@media (max-width: 520px) {
  :root { --rm52-mobile-gutter: 8px; }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }

  .webgis-home-text small,
  .modern-user-meta,
  .webgis-user-meta-mini {
    display: none !important;
  }

  :where(.rm5449-command-head, .workspace-head, .pegawai-panel-head, .panel-head) {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  :where(.rm5449-command-status, .workspace-head > *, .pegawai-panel-head > *) {
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :where(button, input, select, textarea, [role="button"], [role="tab"], .panel, article) {
    border-color: currentColor !important;
  }
}

@media (forced-colors: active) {
  .rm5452-skip-link,
  :where(button, a[href], input, select, textarea, [role="button"], [role="tab"]):focus-visible {
    border: 2px solid CanvasText !important;
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  :where([class*="status"], [class*="badge"], [class*="banner"]) {
    border: 1px solid CanvasText !important;
  }
}

@media print {
  .rm5452-skip-link,
  .rm5452-sr-only { display: none !important; }
}