fix(tapops): perlebar field tanggal dan tambah kembali tombol kalender dengan picker tersembunyi

groups/Tapops/css/documents.css

@@ -365,6 +365,7 @@
 
 /* Custom dd/mm/yyyy date input */
 .custom-date-input {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 1px;
@@ -376,7 +377,8 @@
     font-weight: 700;
     color: #94a3b8;
     user-select: none;
-    padding: 0 1px;
+    padding: 0 2px;
+    flex-shrink: 0;
 }
 
 .date-part {
@@ -387,14 +389,14 @@
     font-weight: 700;
     color: var(--primary-blue);
     text-align: center;
-    padding: 2px 3px;
+    padding: 2px 4px;
     border-radius: 3px;
     transition: background 0.15s ease;
     min-width: 0;
 }
 
-.date-dd, .date-mm { width: 2.2ch; }
-.date-yyyy         { width: 4.2ch; }
+.date-dd, .date-mm { width: 34px; }
+.date-yyyy         { width: 56px; }
 
 .date-part::placeholder {
     color: #94a3b8;
@@ -406,6 +408,35 @@
     background: rgba(0, 49, 80, 0.07);
 }
 
+.date-calendar-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #94a3b8;
+    padding: 4px 2px 4px 6px;
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+    transition: color 0.2s ease;
+}
+
+.date-calendar-btn:hover {
+    color: var(--primary-blue);
+}
+
+.date-hidden-picker {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    border: none;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
 .range-divider {
     font-size: 0.7rem;
     font-weight: 800;