Refine project modal and search interactions

templates/projects.html

@@ -168,7 +168,7 @@
         gap: 12px;
         align-items: start;
         position: relative;
-        z-index: 120;
+        z-index: 5200;
     }
 
     .analysis-main {
@@ -188,7 +188,7 @@
         padding: 14px;
         position: relative;
         overflow: visible;
-        z-index: 2;
+        z-index: 5300;
     }
 
     .toolbar-head {
@@ -299,7 +299,7 @@
         position: relative;
         display: grid;
         gap: 8px;
-        z-index: 180;
+        z-index: 5400;
     }
 
     .project-search-dropdown {
@@ -308,7 +308,7 @@
         top: calc(100% + 8px);
         left: 0;
         right: 0;
-        z-index: 4000;
+        z-index: 9999;
         border: 1px solid var(--line);
         border-radius: 14px;
         background: rgba(255, 255, 255, 0.98);
@@ -581,11 +581,14 @@
     .related-modal-head--singleline {
         flex-wrap: nowrap;
         align-items: center;
+        justify-content: space-between;
     }
 
     .related-modal-title {
         font-size: 16px;
         font-weight: 800;
+        line-height: 1.2;
+        margin: 0;
     }
 
     .related-modal-body {
@@ -914,7 +917,7 @@
         border-radius: 10px;
         background: #fff;
         font: inherit;
-        color: var(--ink);
+        color: #111827;
         resize: vertical;
     }
 
@@ -1295,6 +1298,7 @@
         flex: 1 1 auto;
         min-width: 0;
         width: auto;
+        align-items: center;
     }
 
     .modal-title-with-total--compact .related-modal-title {
@@ -1319,6 +1323,7 @@
         margin-left: auto;
         flex-wrap: nowrap;
         flex: 0 0 auto;
+        min-width: 0;
     }
 
     .vendor-period-toolbar.is-hidden {
@@ -1329,14 +1334,15 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        font-size: 13px;
+        font-size: 12px;
         color: #4b5563;
         white-space: nowrap;
+        flex: 0 0 auto;
     }
 
     .vendor-period-toolbar input[type="date"] {
-        width: 126px;
-        min-width: 126px;
+        width: 112px;
+        min-width: 112px;
         height: 36px;
         padding: 0 8px;
         border: 1px solid #d7dfe7;
@@ -1348,6 +1354,7 @@
 
     .related-modal-head--singleline > .button-icon {
         flex: 0 0 auto;
+        margin-left: 4px;
     }
 
     .vendor-period-toolbar input[type="date"]:disabled {
@@ -1356,6 +1363,11 @@
         cursor: not-allowed;
     }
 
+    .related-modal-head--singleline .mini-button {
+        flex: 0 0 auto;
+        white-space: nowrap;
+    }
+
     .transaction-partner-link {
         display: inline-flex;
         align-items: center;