/* =====================================
   Основные настройки
===================================== */


* {

    box-sizing:border-box;

}



body {

    margin:0;

    padding:20px;

    background:#f5f7f9;

    font-family:Arial,sans-serif;

    color:#333;

}



.container {

    max-width:1200px;

    margin:auto;

}







/* =====================================
   Карточки
===================================== */


.card,
.deal-card,
.budget-card {


    background:#fff;

    border-radius:10px;

    padding:20px;

    margin-bottom:20px;


    box-shadow:

    0 2px 8px rgba(0,0,0,.08);


}








/* =====================================
   Сделка
===================================== */


#dealInfo h3 {


    margin:0;

    font-size:22px;

}



#dealInfo p {


    margin-top:10px;

    font-size:16px;


}







/* =====================================
   Фактическое / Текущее
===================================== */


.budget-wrapper {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:20px;


}




.budget-card h3 {


    margin-top:0;

    border-bottom:

    1px solid #eee;

    padding-bottom:10px;


}




.budget-row {


    display:flex;

    justify-content:space-between;

    padding:10px 0;


    border-bottom:

    1px dashed #ddd;


}




.budget-name {


    color:#555;


}



.budget-value {


    font-weight:bold;


}








/* =====================================
   Форма
===================================== */


.form {


    display:flex;

    flex-direction:column;

    width:360px;


}



.form label {


    margin-top:12px;

    margin-bottom:5px;


    font-size:14px;


}



.form input,
.form select {


    height:40px;


    border:

    1px solid #d5dbe0;


    border-radius:6px;


    padding:0 10px;


    font-size:14px;


}



.form input:focus,
.form select:focus {


    outline:none;

    border-color:#2fc6f6;


}







button {


    height:40px;


    border:none;


    border-radius:6px;


    margin-top:15px;


    background:#2fc6f6;


    color:white;


    cursor:pointer;


    padding:0 20px;


}




button:hover {


    opacity:.9;


}







#cancelEdit {


    background:#777;


}








/* =====================================
   Верхняя панель таблицы
===================================== */


.table-header {


    display:flex;


    justify-content:space-between;


    align-items:center;


}




.table-header div {


    display:flex;


    gap:10px;


}








/* =====================================
   Кнопки
===================================== */


.edit-btn {


    background:#18a689;


}



.delete-btn {


    background:#ff5757;


}



.edit-btn,
.delete-btn {


    width:auto;


}








/* =====================================
   Фильтр
===================================== */


.filter {


    display:flex;


    align-items:center;


    gap:15px;


    margin-bottom:15px;


}



.filter select {


    height:35px;


    border:

    1px solid #ccc;


    border-radius:5px;


    padding:0 10px;


}








/* =====================================
   Таблица
===================================== */


table {


    width:100%;


    border-collapse:collapse;


}



thead {


    background:#f3f5f7;


}



th {


    padding:12px;

    text-align:left;


}



td {


    padding:12px;


    border-bottom:

    1px solid #eee;


}




tbody tr {


    cursor:pointer;


}




tbody tr:hover {


    background:#f7fbff;


}




/* выбранная строка */


tbody tr.selected {


    background:#dff3ff;


}








/* =====================================
   Итоги
===================================== */


.summary p {


    display:flex;


    justify-content:space-between;


    padding:10px 0;


    margin:0;


    border-bottom:

    1px solid #eee;


}








/* =====================================
   Подтверждение
===================================== */


#confirmBox {


    display:none;


    position:fixed;


    right:25px;


    top:25px;


    z-index:1000;


}




.confirm-content {


    background:white;


    padding:20px;


    border-radius:10px;


    box-shadow:

    0 5px 25px rgba(0,0,0,.25);


}



.confirm-content button {


    width:auto;


    margin-right:10px;


}








/* =====================================
   Адаптивность
===================================== */


@media(max-width:800px){



    .budget-wrapper {


        grid-template-columns:1fr;


    }




    .form {


        width:100%;


    }



    table {


        font-size:12px;


    }


}