@visns-studio/visns-components 6.17.2 → 6.20.1

package/src/components/styles/GenericFormBuilder.module.scss

@@ -39,7 +39,7 @@
         padding: 8px;
         margin: 8px 8px 8px 0;
         height: auto;
-        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.05);
+        box-shadow: 0 5px 15px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 
         > ul {
             width: 100%;
@@ -59,7 +59,7 @@
                     box-sizing: border-box;
                     display: block;
                     text-decoration: none;
-                    background: rgba(var(--primary-rgb), 0.05);
+                    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
                     color: var(--primary-color);
                     border-radius: 5px;
                     transition: background 0.25s
@@ -234,7 +234,7 @@
             &:not(:last-child) {
                 margin-bottom: 0.5em;
                 padding-bottom: 0.5em;
-                border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+                border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
             }
         }
     }
@@ -277,11 +277,11 @@
     background: white;
     border-radius: 8px;
     overflow: hidden;
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
 }
 
 .optionsTable thead {
-    background: rgba(var(--primary-rgb), 0.06);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.06);
     color: var(--paragraph-color);
 }
 
@@ -289,7 +289,7 @@
 .optionsTable td {
     padding: 0.5rem 0.75rem;
     text-align: left;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     vertical-align: middle;
 }
 
@@ -312,7 +312,7 @@
 }
 
 .optionsTable tbody tr:hover {
-    background-color: rgba(var(--primary-rgb), 0.02);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.02);
 }
 
 .optionsTable tbody tr:last-child td {
@@ -323,7 +323,7 @@
 .optionsTable input {
     width: 100%;
     padding: 0.4rem 0.6rem !important;
-    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2) !important;
     border-radius: 4px !important;
     font-size: 0.85rem !important;
     background: white !important;
@@ -331,7 +331,7 @@
 
 .optionsTable input:focus {
     border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.1) !important;
 }
 
 // Action buttons in tables
@@ -353,9 +353,9 @@
 }
 
 .tableActionBtn.add {
-    background: rgba(var(--primary-rgb), 0.08);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     color: var(--primary-color);
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     font-size: 0.75rem;
     padding: 4px 10px;
     min-height: 28px;
@@ -408,7 +408,7 @@
 // Section headers inside modal should be subtle, not the builder preview style
 .modal .gridtxt__header,
 .modalFieldForm .gridtxt__header {
-    background: rgba(var(--primary-rgb), 0.05) !important;
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05) !important;
     color: var(--paragraph-color) !important;
     border-left: 3px solid var(--primary-color);
     border-radius: 0 6px 6px 0 !important;
@@ -449,7 +449,7 @@
     ) {
     background: rgba(white, 0.5);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15);
     padding: 1rem;
     outline: none;
     width: 100%;
@@ -466,7 +466,7 @@
     ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):hover {
-    border: 1px solid rgba(var(--primary-rgb), 0.85);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.85);
     transition: border 0.15s linear;
 }
 
@@ -478,12 +478,12 @@
     ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):focus {
-    border: 1px solid rgba(var(--primary-rgb), 0.85);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.85);
 }
 
 input[type='file'] {
     background: var(--item-color) !important;
-    border-radius: var (--br) !important;
+    border-radius: var(--br, 6px) !important;
     border: 1px solid transparent !important;
     padding: 0.8rem !important;
     outline: none !important;
@@ -645,7 +645,7 @@ select:not(:placeholder-shown) + .fi__span {
     z-index: 100;
     box-shadow:
         0 20px 60px rgba(0, 0, 0, 0.15),
-        0 0 0 1px rgba(var(--primary-rgb), 0.06);
+        0 0 0 1px rgba(var(--primary-rgb, 27, 57, 51), 0.06);
 }
 
 /* Modal backdrop to prevent background interactions */
@@ -706,14 +706,14 @@ select:not(:placeholder-shown) + .fi__span {
     .formItem textarea:hover,
     .formItem select:hover,
     .formItem input[type]:hover {
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15) !important;
+        border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15) !important;
         transition: none !important;
     }
 
     // Disable hover effects on buttons when modal is open
     .btn:hover {
         background: var(--primary-color) !important;
-        border: 1px solid rgba(var(--primary-rgb), 1.1) !important;
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 1) !important;
         color: var(--tertiary-color) !important;
     }
 }
@@ -790,7 +790,7 @@ select:not(:placeholder-shown) + .fi__span {
 
 .modal__content .btn {
     background: var(--primary-color);
-    border: 1px solid rgb(var(--primary-rgb), 1.05);
+    border: 1px solid rgb(var(--primary-rgb, 27, 57, 51), 1);
 }
 
 .modal__content .btn:hover {
@@ -814,7 +814,7 @@ select:not(:placeholder-shown) + .fi__span {
     border-radius: 12px;
     box-shadow:
         0 4px 20px rgba(0, 0, 0, 0.12),
-        0 0 0 1px rgba(var(--primary-rgb), 0.08);
+        0 0 0 1px rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     backdrop-filter: blur(8px);
     align-items: center;
 
@@ -870,7 +870,7 @@ select:not(:placeholder-shown) + .fi__span {
 
 /* The save that actually writes, weighted so it reads as the end of the job. */
 .btnPrimary {
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.35);
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.35);
 }
 
 /* Nothing to save: present and findable, but not competing for attention. */
@@ -957,7 +957,7 @@ select:not(:placeholder-shown) + .fi__span {
     display: flex;
     justify-content: flex-end;
     padding-top: 0.5rem;
-    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
+    border-top: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     margin-top: 0.25rem;
 }
 
@@ -1000,7 +1000,7 @@ select:not(:placeholder-shown) + .fi__span {
     background-color: white;
     padding: 0;
     margin: 0;
-    border: 1px solid rgba(var(--primary-color), 0.25);
+    border: 1px solid color-mix(in srgb, var(--primary-color, #1b3933) 25%, transparent);
     border-radius: var(--br);
     overflow: hidden;
     z-index: 999;
@@ -1008,13 +1008,13 @@ select:not(:placeholder-shown) + .fi__span {
 
 .AutocompletePlace-items {
     list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     cursor: pointer;
     padding: 10px 10px;
 }
 
 .AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
+    background-color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.065);
 }
 
 .react-datepicker-wrapper {
@@ -1024,22 +1024,22 @@ select:not(:placeholder-shown) + .fi__span {
 // DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
-    background-color: rgba(var(--primary-rgb), 0.45) !important;
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.45) !important;
     font-size: 13px !important;
 }
 
 .react-datepicker__close-icon:hover:after {
-    background-color: rgba(var(--primary-rgb), 1) !important;
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 1) !important;
 }
 
 .formbreak {
     display: block;
     width: 100%;
     padding: 1em;
-    background: rgba(var(--primary-rgb), 0.95);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.95);
     border-radius: 3px;
     box-sizing: border-box;
-    border: 2px solid rgba(var(--primary-rgb), 1.1);
+    border: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 1);
 }
 
 .formbreak span {
@@ -1079,7 +1079,7 @@ select:not(:placeholder-shown) + .fi__span {
 .dropzone__files li {
     width: 100%;
     display: block;
-    background: rgba(var(--tertiary-color-rgb), 1.05);
+    background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 1);
     color: var(--primary-color);
     border-radius: 3px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -1093,14 +1093,14 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .dropzone__files li:hover {
-    background: rgba(var(--secondary-color-rgb), 0.65);
+    background: rgba(var(--secondary-color-rgb, 60, 191, 125), 0.65);
 }
 
 .dropzone__files li i {
     position: relative;
     top: 0;
     right: 5px;
-    color: rgba(var(--secondary-color-rgb), 1.15);
+    color: rgba(var(--secondary-color-rgb, 60, 191, 125), 1);
 }
 
 .dropzone__files li button {
@@ -1214,7 +1214,7 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .contentTable tbody tr:nth-of-type(even) {
-    background: rgba(var(--item-color-rgb), 1.02);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
 }
 
 .gridHeaders th {
@@ -1222,7 +1222,7 @@ select:not(:placeholder-shown) + .fi__span {
     color: var(--secondary-color);
     font-weight: 700;
     font-size: 0.95em;
-    border-right: 2px solid rgba(var(--primary-rgb), 0.9);
+    border-right: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.9);
     position: relative;
     background-clip: padding-box;
 }
@@ -1245,7 +1245,7 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .gridHeaders th button > svg {
-    color: rgba(var(--highlight-color-rgb), 0.8);
+    color: rgba(var(--highlight-color-rgb, 60, 191, 125), 0.8);
 }
 
 .pagination {
@@ -1325,7 +1325,7 @@ select:not(:placeholder-shown) + .fi__span {
     margin: 0;
     background: white;
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     position: relative;
     display: flex;
     align-items: center;
@@ -1345,7 +1345,7 @@ select:not(:placeholder-shown) + .fi__span {
         }
 
         svg {
-            color: rgba(var(--primary-rgb), 0.5);
+            color: rgba(var(--primary-rgb, 27, 57, 51), 0.5);
             position: relative;
             top: 2px;
             margin: 0 0.25rem;
@@ -1358,7 +1358,7 @@ select:not(:placeholder-shown) + .fi__span {
 
     .titleInfo span {
         font-size: 0.875em;
-        color: rgba(var(--paragraph-color-rgb), 0.65);
+        color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
     }
 }
 
@@ -1367,13 +1367,13 @@ select:not(:placeholder-shown) + .fi__span {
     overflow-y: auto;
     padding: 0.75rem;
     border-radius: var(--br);
-    background-color: rgba(var(--primary-rgb), 0.02);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.02);
 }
 
 /* Interactive Field Styles */
 .interactiveField {
     position: relative;
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     border-radius: var(--br);
     transition: all 0.2s ease;
     display: flex;
@@ -1392,8 +1392,8 @@ select:not(:placeholder-shown) + .fi__span {
     }
 
     &:hover:not(.sortableHelper) {
-        border-color: rgba(var(--primary-rgb), 0.25);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
+        border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.25);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.08);
         transform: translateY(-1px);
 
         .dragHandle {
@@ -1435,7 +1435,7 @@ select:not(:placeholder-shown) + .fi__span {
     position: absolute;
     top: 7px;
     right: 8px;
-    background: rgba(var(--primary-rgb), 0.08);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     color: var(--primary-color);
     padding: 2px 8px;
     border-radius: 4px;
@@ -1482,7 +1482,7 @@ select:not(:placeholder-shown) + .fi__span {
     border-radius: 6px;
     background: white;
     border: 2px solid var(--primary-color);
-    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     transition: all 0.2s ease;
     font-weight: bold;
     opacity: 0.55;
@@ -1511,7 +1511,7 @@ select:not(:placeholder-shown) + .fi__span {
         color: white;
         border-color: var(--primary-color);
         transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.3);
         opacity: 1;
     }
 
@@ -1566,7 +1566,7 @@ select:not(:placeholder-shown) + .fi__span {
         color: white !important;
         border-color: var(--primary-color);
         transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.3);
     }
 }
 
@@ -1586,12 +1586,12 @@ select:not(:placeholder-shown) + .fi__span {
 /* Preview Field Styling */
 .previewField {
     background: white;
-    border-left: 3px solid rgba(var(--primary-rgb), 0.2);
+    border-left: 3px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     position: relative;
 
     &:hover {
         border-left-color: var(--primary-color);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     }
 
     // Override section styling when in preview mode
@@ -1692,7 +1692,7 @@ select:not(:placeholder-shown) + .fi__span {
     }
 
     // Add a subtle border to make the drag preview more defined
-    border: 2px solid rgba(var(--primary-rgb), 0.3) !important;
+    border: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.3) !important;
     border-radius: var(--br) !important;
     background: white !important;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
@@ -1732,8 +1732,8 @@ select:not(:placeholder-shown) + .fi__span {
     margin: 3rem auto;
     padding: 2.5rem 2rem;
     text-align: center;
-    background: rgba(var(--primary-rgb), 0.03);
-    border: 1px dashed rgba(var(--primary-rgb), 0.2);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.03);
+    border: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     border-radius: 12px;
 
     &__icon {
@@ -1743,7 +1743,7 @@ select:not(:placeholder-shown) + .fi__span {
         width: 52px;
         height: 52px;
         border-radius: 50%;
-        background: rgba(var(--primary-rgb), 0.1);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         color: var(--primary-color);
         margin-bottom: 1rem;
     }
@@ -1760,7 +1760,7 @@ select:not(:placeholder-shown) + .fi__span {
         max-width: 320px;
         font-size: 13px;
         line-height: 1.55;
-        color: rgba(var(--paragraph-rgb), 0.6);
+        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.6);
     }
 }
 
@@ -1894,8 +1894,8 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: center;
     flex-wrap: wrap;
     border-radius: 6px;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 15px rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+    box-shadow: 0px 0px 15px rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     padding: 0.8rem 5rem 0.8rem 2rem;
     box-sizing: border-box;
     cursor: grab;
@@ -2003,7 +2003,7 @@ select:not(:placeholder-shown) + .fi__span {
     position: absolute;
     top: 9px;
     left: 38px;
-    background: rgba(var(--primary-rgb), 0.1);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     color: var(--primary-color);
     padding: 2px 5px;
     border-radius: 4px;
@@ -2017,11 +2017,11 @@ select:not(:placeholder-shown) + .fi__span {
 
 // Drag placeholder (shown where the original item was during drag)
 .dragPlaceholder {
-    border: 2px dashed rgba(var(--primary-rgb), 0.3) !important;
-    background: rgba(var(--primary-rgb), 0.05) !important;
+    border: 2px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.3) !important;
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05) !important;
     border-radius: var(--br);
     min-height: 64.2px;
-    box-shadow: inset 0 2px 8px rgba(var(--primary-rgb), 0.06) !important;
+    box-shadow: inset 0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.06) !important;
 }
 
 // Drag overlay item (the floating preview during drag)
@@ -2051,7 +2051,7 @@ select:not(:placeholder-shown) + .fi__span {
     border-radius: 6px;
     background: white;
     border: 2px solid var(--primary-color);
-    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex !important;
@@ -2074,7 +2074,7 @@ select:not(:placeholder-shown) + .fi__span {
         color: white;
         border-color: var(--primary-color);
         transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.3);
     }
 }
 
@@ -2084,7 +2084,7 @@ select:not(:placeholder-shown) + .fi__span {
     border-radius: 6px;
     background: white;
     border: 2px solid var(--primary-color);
-    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex !important;
@@ -2107,7 +2107,7 @@ select:not(:placeholder-shown) + .fi__span {
         color: white !important;
         border-color: var(--primary-color);
         transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.3);
     }
 }
 
@@ -2118,18 +2118,18 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 10px 16px;
     margin: 0;
     background: white;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     gap: 10px;
 }
 
 .searchIcon {
-    color: rgba(var(--paragraph-color-rgb), 0.5);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.5);
     flex-shrink: 0;
 }
 
 .searchInput {
     flex: 1;
-    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15) !important;
     border-radius: var(--br) !important;
     padding: 6px 10px !important;
     font-size: 0.85rem !important;
@@ -2139,7 +2139,7 @@ select:not(:placeholder-shown) + .fi__span {
 
     &:focus {
         border-color: var(--primary-color) !important;
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.1) !important;
     }
 }
 
@@ -2149,7 +2149,7 @@ select:not(:placeholder-shown) + .fi__span {
     color: var(--primary-color);
     white-space: nowrap;
     padding: 3px 10px;
-    background: rgba(var(--primary-rgb), 0.1);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     border-radius: 10px;
 }
 
@@ -2158,7 +2158,7 @@ select:not(:placeholder-shown) + .fi__span {
     border: none;
     cursor: pointer;
     padding: 4px;
-    color: rgba(var(--paragraph-color-rgb), 0.5);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.5);
     display: flex;
     align-items: center;
     transition: color 0.2s ease;
@@ -2190,7 +2190,7 @@ select:not(:placeholder-shown) + .fi__span {
     width: 280px;
     box-shadow:
         0 16px 48px rgba(0, 0, 0, 0.18),
-        0 0 0 1px rgba(var(--primary-rgb), 0.08);
+        0 0 0 1px rgba(var(--primary-rgb, 27, 57, 51), 0.08);
 
     h3 {
         margin: 0 0 0.25rem;
@@ -2202,7 +2202,7 @@ select:not(:placeholder-shown) + .fi__span {
     p {
         margin: 0 0 0.75rem;
         font-size: 0.8rem;
-        color: rgba(var(--paragraph-color-rgb), 0.55);
+        color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.55);
     }
 }
 
@@ -2218,7 +2218,7 @@ select:not(:placeholder-shown) + .fi__span {
         max-width: 60px !important;
         flex: 0 0 60px !important;
         padding: 6px 8px !important;
-        border: 2px solid rgba(var(--primary-rgb), 0.25) !important;
+        border: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.25) !important;
         border-radius: 6px !important;
         font-size: 0.95rem !important;
         font-weight: 600 !important;
@@ -2236,13 +2236,13 @@ select:not(:placeholder-shown) + .fi__span {
 
         &:focus {
             border-color: var(--primary-color) !important;
-            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
+            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 27, 57, 51), 0.12) !important;
         }
     }
 
     span {
         font-size: 0.85rem;
-        color: rgba(var(--paragraph-color-rgb), 0.55);
+        color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.55);
         white-space: nowrap;
     }
 }
@@ -2313,7 +2313,7 @@ select:not(:placeholder-shown) + .fi__span {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(var(--primary-rgb), 0.08);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
     color: var(--primary-color);
     border-radius: 50%;
     font-size: 0.7rem;
@@ -2323,7 +2323,7 @@ select:not(:placeholder-shown) + .fi__span {
 .optionInput {
     flex: 1;
     padding: 6px 10px !important;
-    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15) !important;
     border-radius: 6px !important;
     font-size: 0.85rem !important;
     background: white !important;
@@ -2333,7 +2333,7 @@ select:not(:placeholder-shown) + .fi__span {
 
     &:focus {
         border-color: var(--primary-color) !important;
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08) !important;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.08) !important;
     }
 }
 
@@ -2343,7 +2343,7 @@ select:not(:placeholder-shown) + .fi__span {
     border: none;
     cursor: pointer;
     padding: 4px;
-    color: rgba(var(--paragraph-color-rgb), 0.3);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.3);
     opacity: 0.5;
     transition: all 0.2s ease;
     display: flex;
@@ -2360,9 +2360,9 @@ select:not(:placeholder-shown) + .fi__span {
 .optionsEmpty {
     padding: 1.5rem;
     text-align: center;
-    color: rgba(var(--paragraph-color-rgb), 0.4);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.4);
     font-size: 0.85rem;
-    border: 1px dashed rgba(var(--primary-rgb), 0.12);
+    border: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.12);
     border-radius: 6px;
     margin: 4px 0;
 }
@@ -2373,13 +2373,13 @@ select:not(:placeholder-shown) + .fi__span {
     gap: 8px;
     margin-top: 8px;
     padding-top: 8px;
-    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
+    border-top: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
 }
 
 .optionSelect {
     flex: 0 0 130px;
     padding: 6px 8px !important;
-    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15) !important;
     border-radius: 6px !important;
     font-size: 0.8rem !important;
     background: white !important;
@@ -2390,17 +2390,17 @@ select:not(:placeholder-shown) + .fi__span {
 
     &:focus {
         border-color: var(--primary-color) !important;
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08) !important;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.08) !important;
     }
 }
 
 .optionAddInput {
     flex: 1;
     padding: 6px 10px !important;
-    border: 1px dashed rgba(var(--primary-rgb), 0.2) !important;
+    border: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.2) !important;
     border-radius: 6px !important;
     font-size: 0.85rem !important;
-    background: rgba(var(--primary-rgb), 0.02) !important;
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.02) !important;
     min-height: auto !important;
     height: auto !important;
     transition: all 0.2s ease !important;
@@ -2409,11 +2409,11 @@ select:not(:placeholder-shown) + .fi__span {
         border-style: solid !important;
         border-color: var(--primary-color) !important;
         background: white !important;
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08) !important;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.08) !important;
     }
 
     &::placeholder {
-        color: rgba(var(--paragraph-color-rgb), 0.35);
+        color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.35);
         font-style: italic;
     }
 }
@@ -2424,7 +2424,7 @@ select:not(:placeholder-shown) + .fi__span {
 .outstandingHint {
     font-size: 0.78rem;
     line-height: 1.45;
-    color: rgba(var(--paragraph-color-rgb), 0.65);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
     padding: 0 0 6px;
 }
 
@@ -2445,14 +2445,14 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: center;
     gap: 5px;
     padding: 4px 9px;
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     border-radius: 6px;
     background: white;
     font-size: 0.72rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: rgba(var(--paragraph-color-rgb), 0.45);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.45);
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
@@ -2479,12 +2479,12 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .btnCancel {
-    background: rgba(var(--paragraph-color-rgb), 0.08) !important;
+    background: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.08) !important;
     color: var(--paragraph-color) !important;
-    border-color: rgba(var(--paragraph-color-rgb), 0.15) !important;
+    border-color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15) !important;
 
     &:hover {
-        background: rgba(var(--paragraph-color-rgb), 0.15) !important;
+        background: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15) !important;
     }
 }
 
@@ -2519,7 +2519,7 @@ select:not(:placeholder-shown) + .fi__span {
 
 .fieldCount {
     font-size: 11.5px;
-    color: rgba(var(--paragraph-rgb), 0.65);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.65);
     white-space: nowrap;
 }
 
@@ -2529,7 +2529,7 @@ select:not(:placeholder-shown) + .fi__span {
     gap: 0.35rem;
     height: 28px;
     padding: 0 0.6rem;
-    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.25);
     border-radius: 6px;
     background: #fff;
     color: var(--primary-color);
@@ -2549,7 +2549,7 @@ select:not(:placeholder-shown) + .fi__span {
    thing you opt into, not the thing you scroll past. */
 .modeSwitch {
     display: inline-flex;
-    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.25);
     border-radius: 6px;
     overflow: hidden;
 
@@ -2643,7 +2643,7 @@ select:not(:placeholder-shown) + .fi__span {
     gap: 0.4rem;
     height: 30px;
     padding: 0 0.5rem 0 0.65rem;
-    border: 1px solid rgba(var(--primary-rgb), 0.22);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.22);
     /* Matches the buttons and rows around it. */
     border-radius: 7px;
     background: #fff;
@@ -2655,7 +2655,7 @@ select:not(:placeholder-shown) + .fi__span {
 
     &:hover {
         border-color: var(--primary-color);
-        background: rgba(var(--primary-rgb), 0.06);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.06);
     }
 
     &__label {
@@ -2668,8 +2668,8 @@ select:not(:placeholder-shown) + .fi__span {
         font-size: 10.5px;
         font-variant-numeric: tabular-nums;
         font-weight: 700;
-        color: rgba(var(--paragraph-rgb), 0.5);
-        background: rgba(var(--paragraph-rgb), 0.08);
+        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.5);
+        background: rgba(var(--paragraph-rgb, 43, 43, 43), 0.08);
         border-radius: 4px;
         padding: 1px 5px;
     }
@@ -2718,7 +2718,7 @@ select:not(:placeholder-shown) + .fi__span {
         transform: translateY(-50%);
         z-index: 1;
         pointer-events: none;
-        color: rgba(var(--paragraph-rgb), 0.45);
+        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.45);
     }
 
     .searchInput {
@@ -2727,16 +2727,16 @@ select:not(:placeholder-shown) + .fi__span {
         height: 28px !important;
         min-height: 28px !important;
         border-radius: 6px !important;
-        border-color: rgba(var(--primary-rgb), 0.25) !important;
+        border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.25) !important;
         font-size: 12px !important;
 
         &::placeholder {
-            color: rgba(var(--paragraph-rgb), 0.45);
+            color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.45);
         }
 
         &:focus {
             border-color: var(--primary-color) !important;
-            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
+            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 27, 57, 51), 0.12) !important;
         }
     }
 
@@ -2749,7 +2749,7 @@ select:not(:placeholder-shown) + .fi__span {
         padding: 0;
         font-size: 10.5px;
         font-weight: 600;
-        color: rgba(var(--paragraph-rgb), 0.5);
+        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.5);
     }
 
     .searchClear {
@@ -2769,7 +2769,7 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 2px;
     border: none;
     background: none;
-    color: rgba(var(--paragraph-rgb), 0.55);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.55);
     cursor: pointer;
 
     &:hover {
@@ -2805,8 +2805,8 @@ select:not(:placeholder-shown) + .fi__span {
     font-size: 13px;
 
     &:hover {
-        border-color: rgba(var(--primary-rgb), 0.45);
-        background: rgba(var(--primary-rgb), 0.03);
+        border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.45);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.03);
     }
 }
 
@@ -2818,7 +2818,7 @@ select:not(:placeholder-shown) + .fi__span {
 /* Sections read as headings, not as another entry in the list. */
 .cRowSection {
     margin-top: 0.75rem;
-    background: rgba(var(--primary-rgb), 0.09);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.09);
     border: none;
     border-left: 3px solid var(--primary-color);
     border-radius: 4px;
@@ -2833,7 +2833,7 @@ select:not(:placeholder-shown) + .fi__span {
     }
 
     &:hover {
-        background: rgba(var(--primary-rgb), 0.14);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.14);
     }
 }
 
@@ -2841,7 +2841,7 @@ select:not(:placeholder-shown) + .fi__span {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    color: rgba(var(--paragraph-rgb), 0.4);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.4);
     cursor: grab;
     /* dnd-kit's PointerSensor cannot start a drag from an element the browser
        has already claimed for scrolling. Without this the grip does nothing at
@@ -2860,7 +2860,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 24px;
     text-align: right;
     font-size: 10.5px;
-    color: rgba(var(--paragraph-rgb), 0.45);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.45);
     font-variant-numeric: tabular-nums;
 }
 
@@ -2893,7 +2893,7 @@ select:not(:placeholder-shown) + .fi__span {
 .cMeta {
     flex: 0 0 auto;
     font-size: 10.5px;
-    color: rgba(var(--paragraph-rgb), 0.55);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.55);
     white-space: nowrap;
 }
 
@@ -2913,13 +2913,13 @@ select:not(:placeholder-shown) + .fi__span {
         padding: 4px;
         border: none;
         background: none;
-        color: rgba(var(--paragraph-rgb), 0.55);
+        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.55);
         cursor: pointer;
         border-radius: 4px;
 
         &:hover {
             color: var(--primary-color);
-            background: rgba(var(--primary-rgb), 0.1);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         }
     }
 }
@@ -2931,7 +2931,7 @@ select:not(:placeholder-shown) + .fi__span {
 
 .cDelete:hover {
     color: var(--secondary-color) !important;
-    background: rgba(var(--secondary-rgb), 0.1) !important;
+    background: rgba(var(--secondary-rgb, 60, 191, 125), 0.1) !important;
 }
 
 /* ============================================================
@@ -2985,7 +2985,7 @@ select:not(:placeholder-shown) + .fi__span {
    dashed "something is missing" treatment. */
 .emptyStateDynamic {
     border-style: solid;
-    border-color: rgba(var(--primary-rgb), 0.15);
-    background: rgba(var(--primary-rgb), 0.04);
+    border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.15);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.04);
     max-width: 520px;
 }