From 5e78072b0a543617af1864919f3d75edd0ae1ad4 Mon Sep 17 00:00:00 2001
From: Ali <010109ali@gmail.com>
Date: Mon, 20 Apr 2026 11:39:53 +0000
Subject: [PATCH] report view: themed compact checkboxes + filter row flex

The global toggle-switch styling for input[type=checkbox] doesn't fit
the 32px select column or 37px index column in frappe-datatable, so
content was clipped and checkboxes sat flush to the cell baseline.

- Compact 14x14 themed square checkbox (same paint as grid .row-check)
  inside .datatable, with ::after pseudo disabled.
- Flex-center the cell when the only child is a checkbox.
- Let the filter input shrink instead of crushing its help-icon sibling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 jey_theme/public/css/shared.css | 72 +++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

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
    ========================================================================== */