.save-btns-wrapper{
    display: flex;
    gap: 6px;
    padding: 0.5rem 0px;
}

.save-btns-wrapper button{
    min-width: 180px;
    text-align: center !important;
}

#add-param-btn{
    margin-bottom: 1.5rem;
}





/* ---------------------------------------------------------- */

.param-card {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(77, 7, 7, 0.12);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    margin: 1rem 0;
}

.param-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

/* هدر کارت: نام و نام نمایشی */
.param-card .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.4rem;
    margin-bottom: 0.2rem;
}

.param-card .p-name {
    font-size: 1.02rem;
    font-weight: 600;
    color: #f7eeaf;                      
    display: block;
    margin-bottom: 0.15rem;
}

.param-card .p-display {
    font-size: 0.85rem;
    color: #a0aec0;                             /* خاکستری روشن */
}

/* بخش جزئیات (حوزه، نوع، واحد، محدوده) */
.p-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    font-size: 0.86rem;
}

/* ردیف‌های جزئیات */
.p-detail-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

/* محدوده (min–max) عرض کامل بگیرد */
.p-detail-range {
    grid-column: 1 / -1;    /* از ستون ۱ تا آخر */
}

/* لیبل‌ها (مثلاً "حوزه:") */
.p-label {
    color: #94a3b8;         /* خاکستری-آبی برای عنوان */
    font-size: 0.78rem;
}

/* مقادیر (حوزه/نوع/واحد/محدوده) */
.p-domain,
.p-type,
.p-unit,
.p-range {
    color: #e5f4ff;
    font-weight: 600;
}

/* بخش دکمه‌ها پایین کارت */
.param-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* استایل پایه دکمه‌ها */
.param-card-actions button {
    text-align: center !important;
    flex: 1 1 auto;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;

}



/* در صفحات خیلی کوچک، دکمه‌ها زیر هم بیایند بهتر است */
@media (max-width: 480px) {
    .param-card-actions {
        flex-direction: column;
    }
    .param-card-actions .delete-btn {
        max-width: none;
        flex: 1 1 auto;
    }
}

.param-card-actions .edit-btn:hover { background: #434c5d; color: #fff; }
.param-card-actions .edit-btn { background: #3c4555; color: #cbd5e0;  }

.param-card-actions .delete-btn { background: #742a2a; color: #fecaca;   }
.param-card-actions .delete-btn:hover { background: #9b2c2c; color: #fff; }




/* ---------------------------------------------------------------------- */
.param-form-wrapper {
    background: transparent; 
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.3);
    max-width: 720px;
    margin: 2rem auto;

    
}

.param-form-scroll {
    max-height: 450px;

    padding: 2rem; 
    overflow-y: auto;
    direction: ltr !important; 
    
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10px,
        black calc(100% - 10px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10px,
        black calc(100% - 10px),
        transparent 100%
    );
}

.param-form-scroll::-webkit-scrollbar {
    width: 6px;
}

.param-form-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.param-form-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.param-form-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}


/* ----------------------------------------------------------- */

.param-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* فاصله بین فیلدها */
}

/* استایل عمومی برای اینپوت‌ها و سلکت‌ها */
.param-form input,
.param-form select,
.param-form textarea {
    background: rgba(50, 62, 74, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.8rem;
    border-radius: 8px;
    font-family: inherit;
    transition: all 0.3s;

}

.param-form input::placeholder {
    color: #718096;
}

.param-form input:focus,
.param-form select:focus,
.param-form textarea:focus {
    outline: none;
    border-color: #3182ce;
    background: rgba(255, 255, 255, 0.1);
}

/* استایل دکمه‌ها در فرم */
.param-form button {
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}




/* ---------------------------------- */
.form-actions{
    display: flex;
    gap: 10px;

}

.form-actions button{
    flex: 1;
    border-radius: 10000px;
    min-width: 100px;
    text-align: center !important;
    padding: 5px;
}

.form-actions .cancel-btn{
    background: #ffffff0f;
    color: #fff;
}