non native dropdown

styles.css

@@ -390,6 +390,107 @@ body {
     pointer-events: none;
 }
 
+/* Custom Select Dropdown */
+.custom-select {
+    position: relative;
+    width: 100%;
+}
+
+.custom-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-medium);
+    background-color: var(--md-sys-color-surface-container);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    font: var(--md-sys-typescale-body-large);
+}
+
+.custom-select-trigger:hover {
+    border-color: var(--md-sys-color-outline);
+}
+
+.custom-select.open .custom-select-trigger {
+    border-color: var(--md-sys-color-primary);
+    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
+}
+
+.custom-select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.custom-select-value.placeholder {
+    color: var(--md-sys-color-outline);
+}
+
+.custom-select-icon {
+    color: var(--md-sys-color-outline);
+    transition: transform 0.2s;
+}
+
+.custom-select.open .custom-select-icon {
+    transform: rotate(180deg);
+}
+
+.custom-select-options {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background-color: var(--md-sys-color-surface);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-medium);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    max-height: 240px;
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+}
+
+.custom-select.open .custom-select-options {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.custom-select-option {
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    font: var(--md-sys-typescale-body-large);
+}
+
+.custom-select-option:hover {
+    background-color: var(--md-sys-color-surface-variant);
+}
+
+.custom-select-option.selected {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.custom-select-option:first-child {
+    border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
+}
+
+.custom-select-option:last-child {
+    border-radius: 0 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
+}
+
+.custom-select-option:only-child {
+    border-radius: var(--md-sys-shape-corner-medium);
+}
+
 /* Form Row */
 .form-row {
     display: grid;