/* MyKonter V182 — final security, comfort, accessibility and professional UI layer. */
:root{
  --mk182-focus:rgba(14,165,233,.28);
  --mk182-safe-bottom:env(safe-area-inset-bottom,0px);
  --mk182-safe-top:env(safe-area-inset-top,0px);
}
html{scroll-padding-top:88px;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
.mk-skip-link{
  position:fixed;left:14px;top:calc(10px + var(--mk182-safe-top));z-index:3000;
  transform:translateY(-160%);padding:10px 14px;border-radius:12px;background:#0f172a;color:#fff;
  font-weight:800;text-decoration:none;box-shadow:0 12px 30px rgba(15,23,42,.25)
}
.mk-skip-link:focus{transform:translateY(0);color:#fff}
#main-content:focus{outline:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--mk182-focus)!important;outline-offset:2px!important
}
button,.btn,[role="button"]{touch-action:manipulation}
.table-responsive,.payroll-table-wrap{
  scrollbar-gutter:stable both-edges;overscroll-behavior-inline:contain;position:relative
}
.table-responsive:focus-visible,.payroll-table-wrap:focus-visible{box-shadow:0 0 0 3px var(--mk182-focus)!important}
.table-responsive.has-horizontal-overflow::after,.payroll-table-wrap.has-horizontal-overflow::after{
  content:'Geser tabel ke kanan untuk melihat kolom lain';position:sticky;left:12px;bottom:8px;display:inline-flex;
  margin:8px 0 8px 8px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.84);color:#fff;
  font-size:.72rem;font-weight:700;pointer-events:none;box-shadow:0 6px 18px rgba(15,23,42,.18)
}
.table-responsive.is-scrolled-x::after,.payroll-table-wrap.is-scrolled-x::after{display:none}
.modal-dialog{margin-top:max(.75rem,var(--mk182-safe-top));margin-bottom:max(.75rem,var(--mk182-safe-bottom))}
.modal-content{max-height:calc(100dvh - 1.5rem);overflow:hidden}
.modal-header,.modal-footer{flex:0 0 auto;background:#fff;z-index:2}
.modal-body{overflow:auto;-webkit-overflow-scrolling:touch}
.mk-connectivity-banner{
  position:fixed;left:50%;bottom:calc(16px + var(--mk182-safe-bottom));transform:translate(-50%,140%);
  z-index:2500;max-width:min(92vw,560px);padding:10px 15px;border-radius:14px;background:#7f1d1d;color:#fff;
  font-size:.84rem;font-weight:750;box-shadow:0 14px 34px rgba(127,29,29,.28);transition:transform .22s ease
}
.mk-connectivity-banner.show{transform:translate(-50%,0)}
.mk-connectivity-banner.is-online{background:#166534;box-shadow:0 14px 34px rgba(22,101,52,.24)}
.mk-update-banner{
  position:fixed;right:16px;bottom:calc(16px + var(--mk182-safe-bottom));z-index:2500;max-width:min(92vw,360px);
  border:1px solid #bae6fd;border-radius:16px;background:#fff;padding:12px 14px;box-shadow:0 16px 40px rgba(15,23,42,.16)
}
.mk-update-banner button{min-height:38px}
[aria-busy="true"]{cursor:progress!important}
[data-mk-truncated="1"]{cursor:help}
@media(max-width:991px){
  .content{padding-bottom:calc(86px + var(--mk182-safe-bottom))!important}
  .mk-fab{bottom:calc(18px + var(--mk182-safe-bottom))!important}
  .btn,.form-control,.form-select,.sidebar-menu,.submenu-item{min-height:44px}
  input,select,textarea{font-size:16px!important}
}
@media(max-width:575px){
  .topbar{gap:8px!important;padding:11px 12px!important}
  .page-header{border-radius:15px!important}
  .card,.table-card,.owner-panel{border-radius:16px!important}
  .modal-dialog{margin:.5rem}
  .modal-content{max-height:calc(100dvh - 1rem);border-radius:18px!important}
  .app-actions .btn{min-width:44px}
  .table-responsive.has-horizontal-overflow::after,.payroll-table-wrap.has-horizontal-overflow::after{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .mk-skip-link,.mk-connectivity-banner,.mk-update-banner,.mk-fab,.sidebar,.topbar{display:none!important}
  .content{margin:0!important;padding:0!important}
}