Update app.py

app.py

@@ -74,7 +74,9 @@ st.markdown("""
         border-right: 3px solid var(--primary) !important;
     }
 
-        /* باکس‌های ورودی */
+
+    /* ========== استایل‌های ورودی یکپارچه ========== */
+    /* استایل پایه برای تمام عناصر ورودی */
     .stTextInput input, 
     .stNumberInput input, 
     .stSelectbox select,
@@ -82,137 +84,91 @@ st.markdown("""
     .stDateInput input,
     .stTimeInput input,
     .stMultiSelect div[role="combobox"],
-    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > div > div > input,
-    /* لیست dropdown */
-    .st-bq, .st-br, .st-bs, .st-bt, .st-bu, .st-bv, .st-bw, .st-bx, .st-by, .st-bz {
+    div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div > div > div > div > input {
         color: var(--text) !important;
         background-color: var(--input-bg) !important;
-        border: 1px var(--text) !important;
+        border: 1px solid var(--border) !important;
+        border-radius: 4px !important;
+        padding: 8px 12px !important;
+        font-size: 14px !important;
     }
-
-    /* استایل برای متن بالای باکس‌های دموگرافیک */
+    
+    /* استایل لیبل‌ها */
     .stTextInput > label,
     .stNumberInput > label,
     .stSelectbox > label,
     .stRadio > label,
     .stSlider > label {
-        color: black !important;
+        color: var(--text) !important;
         font-weight: bold !important;
+        margin-bottom: 4px !important;
     }
-
-    /* Placeholder */
+    
+    /* استایل placeholder */
     ::placeholder {
-        color: black !important;
+        color: var(--text) !important;
         opacity: 0.7 !important;
     }
-
-    /* استایل دکمه‌های select */
-    .stSelectbox button {
-        color: var(--primary) !important;
-        background-color: transparent !important;
-        border: none !important;
-        width: 30px !important;
-        font-weight: bold !important;
-        font-size: 16px !important;
-    }
-
-    /* استایل برای دکمه‌های سلکت select */
-    .stSelectbox button {
-        color: var(--primary) !important;
-        background-color: transparent !important;
-        border: none !important;
-        width: 30px !important;
-    }
-
-    /*فلش استایل برای hover */
-    .stSelectbox button:hover {
-        background-color: #f0e6ff !important;
-    }
     
-    
-    /* استایل دکمه‌های number input */
-    .stNumberInput button {
-        color: var(--primary) !important;
-        background-color: transparent !important;
-        border: none !important;
-        width: 30px !important;
-        font-weight: bold !important;
-        font-size: 16px !important;
+    /* ========== استایل‌های خاص Selectbox ========== */
+    /* حذف فلش پیشفرض */
+    .stSelectbox select {
+        -webkit-appearance: none !important;
+        -moz-appearance: none !important;
+        appearance: none !important;
+        background-image: none !important;
+        padding-right: 32px !important;
     }
     
-    /* یکسان سازی حاشیه‌ها */
-    .stSelectbox select,
-    .stNumberInput input {
-        border: 1px solid var(--border) !important;
-        border-radius: 4px !important;
+    /* فلش سفارشی */
+    .stSelectbox::after {
+        content: "▼";
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary);
+        pointer-events: none;
     }
-
-    /* استایل برای لیست dropdown */
+    
+    /* لیست dropdown */
     .stSelectbox [role="listbox"] {
-        color: #000000 !important;
         background-color: white !important;
         border: 1px solid var(--primary) !important;
-        border-radius: 4px !important;
         box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
     }
-
-    /* استایل برای آیتم‌های لیست dropdown */
+    
+    /* آیتم‌های dropdown */
     .stSelectbox [role="option"] {
         padding: 8px 12px !important;
-        color: #333333 !important;
+        color: var(--text) !important;
     }
-
-    /* استایل برای آیتم hover در لیست */
+    
     .stSelectbox [role="option"]:hover {
         background-color: #f0e6ff !important;
-        color: #000000 !important;
     }
-
-    /* استایل برای دکمه‌های + و - در number input */
+    
+    /* ========== استایل‌های Number Input ========== */
     .stNumberInput button {
         color: var(--primary) !important;
         background-color: transparent !important;
         border: none !important;
         width: 30px !important;
+        font-weight: bold !important;
     }
-
-    /* استایل برای hover دکمه‌های + و - */
+    
     .stNumberInput button:hover {
         background-color: #f0e6ff !important;
     }
-
-    /* استایل برای حالت focus */
-    .stSelectbox select:focus,
-    .stTextInput input:focus,
-    .stNumberInput input:focus {
-        border-color: var(--primary) !important;
-        box-shadow: 0 0 0 2px rgba(106, 13, 173, 0.2) !important;
-        outline: none !important;
-    }  
-
-    /* حالت فوکوس */
+    
+    /* ========== استایل‌های Focus ========== */
     .stTextInput input:focus, 
     .stNumberInput input:focus, 
     .stSelectbox select:focus,
     .stTextArea textarea:focus {
-        border-color: var(--text) !important;
+        border-color: var(--primary) !important;
         box-shadow: 0 0 0 2px rgba(106, 13, 173, 0.2) !important;
-    }
-
-    /* لیبل‌ها */
-    .stTextInput > label,
-    .stNumberInput > label,
-    .stSelectbox > label,
-    .stRadio > label,
-    .stSlider > label {
-        color: black !important;
-        font-weight: bold !important;
-    }
-
-    /* Placeholder */
-    ::placeholder {
-        color: black !important;
-        opacity: 0.7 !important;
+        outline: none !important;
     }
 
         /* دکمه اصلی (بنفش با متن سفید) */