/* Shared layer for staff / operations pages (admin-*, gog-*-admin, care, kyc, news console ...). Opt-in: jio_chrome_header($wo, array('skin' => 'staff')).
   The pages keep their own dark palettes; this only makes controls, tables, spacing and tap targets consistent. Design migration, Wave 5, 2026-10-07. */
body.jio-staff { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body.jio-staff :where(h1) { line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
body.jio-staff :where(h1, h2, h3) { scroll-margin-top: 72px; }
body.jio-staff :where(main, .shell, .wrap, .page, .container) { max-width: 100%; }
/* controls: readable on phones (16px stops iOS zoom-on-focus) and easy to hit */
body.jio-staff input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), body.jio-staff select, body.jio-staff textarea { min-height: 44px; font-size: 16px; max-width: 100%; box-sizing: border-box; }
body.jio-staff textarea { min-height: 96px; }
body.jio-staff button, body.jio-staff .btn, body.jio-staff a.button, body.jio-staff input[type=submit], body.jio-staff input[type=button] { min-height: 44px; touch-action: manipulation; }
body.jio-staff input[type=checkbox], body.jio-staff input[type=radio] { width: 20px; height: 20px; accent-color: #0038a8; }
body.jio-staff label:has(> input[type=checkbox]), body.jio-staff label:has(> input[type=radio]) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
body.jio-staff :where(a, button, input, select, textarea):focus-visible { outline: 3px solid #7ab8ff; outline-offset: 2px; }
body.jio-staff a.muted, body.jio-staff a[href*="Back"], body.jio-staff .back { display: inline-flex; align-items: center; min-height: 44px; }
/* tables: scroll inside their box instead of pushing the page sideways */
body.jio-staff table { max-width: 100%; }
@media (max-width: 760px) {
  body.jio-staff table:not(.stack) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  body.jio-staff table:not(.stack) td, body.jio-staff table:not(.stack) th { white-space: normal; min-width: 96px; vertical-align: top; }
  body.jio-staff form .row, body.jio-staff .row { gap: 10px; }
  body.jio-staff .row > input, body.jio-staff .row > select { flex: 1 1 100%; }
}
/* long ids, URLs and JSON never break the layout */
body.jio-staff :where(td, th, p, li, code, pre, .muted) { overflow-wrap: anywhere; }
body.jio-staff pre { max-width: 100%; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { body.jio-staff *, body.jio-staff *::before, body.jio-staff *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }