Aug 18 - Fix customer roles's notification radio buttons issue

app/static/css/ipad_responsive.css

@@ -13,15 +13,31 @@
   /* Minimum 44px touch targets on interactive elements */
   .btn,
   .nav-link,
-  .dropdown-item,
-  input[type="checkbox"],
-  input[type="radio"],
-  .form-check-input {
+  .dropdown-item {
     min-height: 44px;
     display: inline-flex;
     align-items: center;
   }
 
+  /* Checkboxes and radios are deliberately NOT in the rule above.
+     `display: inline-flex` on a native <input type="radio"> replaces its
+     intrinsic box with a flex container: the control keeps painting its glyph
+     at its natural ~16px size while the element claims a 44px-tall box, so the
+     visible dot and the actual hit area stop coinciding. Taps land next to the
+     control and nothing happens — which is exactly how the per-account
+     notification matrix (Inherit / On / Off) came to look unclickable.
+
+     Grow the target without touching `display`: keep the native box, scale the
+     glyph up, and give it margin so neighbouring options stay separable. Any
+     control that needs a genuinely large tap area should wrap the input in a
+     <label> that fills the cell (see customers/manage.html). */
+  input[type="checkbox"],
+  input[type="radio"],
+  .form-check-input {
+    transform: scale(1.35);
+    margin: 6px;
+  }
+
   /* Slightly larger form controls for finger input */
   .form-control,
   .form-select {