diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css
index c0c80a9..a5bf11c 100644
--- a/jey_theme/public/css/shared.css
+++ b/jey_theme/public/css/shared.css
@@ -134,6 +134,78 @@ input[type="checkbox"].disabled-selected {
         transform: none !important;
 }
 
+/* ==========================================================================
+   Report View (frappe-datatable) — compact themed checkboxes
+   The global toggle-switch styling (28×16) doesn't fit the 32px select
+   column or the 37px row-number column, so content gets clipped. Use the
+   same compact square style as child-table grids (.row-check) — themed,
+   not native.
+   ========================================================================== */
+
+.datatable input[type="checkbox"] {
+        -webkit-appearance: none !important;
+        -moz-appearance: none !important;
+        appearance: none !important;
+        width: var(--checkbox-size, 14px) !important;
+        min-width: var(--checkbox-size, 14px) !important;
+        height: var(--checkbox-size, 14px) !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border: 1px solid var(--gray-500) !important;
+        border-radius: 4px !important;
+        background-color: transparent !important;
+        background-image: none !important;
+        box-shadow: none !important;
+        cursor: pointer !important;
+        vertical-align: middle !important;
+        transition: none !important;
+}
+
+.datatable input[type="checkbox"]::after {
+        content: none !important;
+        display: none !important;
+}
+
+.datatable input[type="checkbox"]:checked {
+        background-color: var(--primary) !important;
+        background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
+        background-size: 57% !important;
+        background-repeat: no-repeat !important;
+        background-position: center !important;
+        border: none !important;
+}
+
+.datatable input[type="checkbox"]:disabled {
+        opacity: 0.5 !important;
+        cursor: not-allowed !important;
+}
+
+/* Centre the checkbox vertically in its cell — vertical-align:middle on the
+   input alone isn't enough because datatable cells have their own line-box
+   rules that anchor the box to the baseline. */
+.datatable .dt-cell__content:has(> input[type="checkbox"]:only-child) {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: flex-start !important;
+}
+
+/* Filter row: input + help-icon squash each other in narrow columns. Let
+   the input flex-shrink instead of overflowing its siblings. */
+.datatable .dt-row-filter .dt-cell__content {
+        display: flex !important;
+        align-items: center !important;
+        gap: 2px;
+}
+
+.datatable .dt-row-filter .dt-filter.dt-input {
+        flex: 1 1 0 !important;
+        min-width: 0 !important;
+}
+
+.datatable .dt-row-filter .comparison-help-icon {
+        flex: 0 0 auto;
+}
+
 /* ==========================================================================
    List View — restore toggle knob
    ========================================================================== */