:root {
	--blue-100:#cfe2ff; --blue-200:#9ec5fe; --blue-300:#6ea8fe; --blue-400:#3d8bfd; --blue-500:#0d6efd; --blue-600:#0a58ca; --blue-700:#084298; --blue-800:#052c65; --blue-900:#031633;
	--indigo-100:#e0cffc; --indigo-200:#c29ffa; --indigo-300:#a370f7; --indigo-400:#8540f5; --indigo-500:#6610f2; --indigo-600:#520dc2; --indigo-700:#3d0a91; --indigo-800:#290661; --indigo-900:#140330;
	--purple-100:#e2d9f3; --purple-200:#c5b3e6; --purple-300:#a98eda; --purple-400:#8c68cd; --purple-500:#6f42c1; --purple-600:#59359a; --purple-700:#432874; --purple-800:#2c1a4d; --purple-900:#160d27;
	--pink-100:#f7d6e6; --pink-200:#efadce; --pink-300:#e685b5; --pink-400:#de5c9d; --pink-500:#d63384; --pink-600:#ab296a; --pink-700:#801f4f; --pink-800:#561435; --pink-900:#2b0a1a;
	--red-100:#f8d7da; --red-200:#f1aeb5; --red-300:#ea868f; --red-400:#e35d6a; --red-500:#dc3545; --red-600:#b02a37; --red-700:#842029; --red-800:#58151c; --red-900:#2c0b0e;
	--orange-100:#ffe5d0; --orange-200:#fecba1; --orange-300:#feb272; --orange-400:#fd9843; --orange-500:#fd7e14; --orange-600:#ca6510; --orange-700:#984c0c; --orange-800:#653208; --orange-900:#331904;
	--yellow-100:#fff3cd; --yellow-200:#ffe69c; --yellow-300:#ffda6a; --yellow-400:#ffcd39; --yellow-500:#ffc107; --yellow-600:#cc9a06; --yellow-700:#997404; --yellow-800:#664d03; --yellow-900:#332701;
	--green-100:#d1e7dd; --green-200:#a3cfbb; --green-300:#75b798; --green-400:#479f76; --green-500:#198754; --green-600:#146c43; --green-700:#0f5132; --green-800:#0a3622; --green-900:#051b11;
	--teal-100:#d2f4ea; --teal-200:#a6e9d5; --teal-300:#79dfc1; --teal-400:#4dd4ac; --teal-500:#20c997; --teal-600:#1aa179; --teal-700:#13795b; --teal-800:#0d503c; --teal-900:#06281e;
	--cyan-100:#cff4fc; --cyan-200:#9eeaf9; --cyan-300:#6edff6; --cyan-400:#3dd5f3; --cyan-500:#0dcaf0; --cyan-600:#0aa2c0; --cyan-700:#087990; --cyan-800:#055160; --cyan-900:#032830;
	--gray-100:#f8f9fa; --gray-200:#e9ecef; --gray-300:#dee2e6; --gray-400:#ced4da; --gray-500:#adb5bd; --gray-600:#6c757d; --gray-700:#495057; --gray-800:#343a40; --gray-900:#212529;
}

/* Анімації для карток */
    
    .card {
        margin-bottom: 20px;
        overflow: hidden;
        cursor: pointer;
    }

    /* Стилі для заголовків карток */
    .card-header {
        padding: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Кольори для різних типів користувачів */
    .usr-type-1 .card-header {
        background: linear-gradient(to right, #dc3545, #ff4d5a);
    }
    
    .usr-type-2 .card-header {
        background: linear-gradient(to right, #0d6efd, #4d92ff);
    }
    
    .usr-type-3 .card-header {
        background: linear-gradient(to right, #198754, #21b36f);
    }
    
    .usr-type-4 .card-header {
        background: linear-gradient(to right, #6c757d, #868e96);
    }
    
    .card-new .card-header {
        background: linear-gradient(135deg, #0d6efd, #4d92ff);
    }

	.sip-status-success  .card-header{
		background: linear-gradient(90deg,var(--teal-700),#21b36f);
	}
	.sip-status-secondary  .card-header{
		background: linear-gradient(90deg,var(--gray-700),var(--gray-600));
	}
	.sip-status-danger  .card-header{
		background: linear-gradient(90deg,var(--orange-700),var(--orange-600));
	}

    /* Статус-бейдж у заголовку */
    .status-badge {
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }



    /* Кнопка для додавання */
    .add-button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color:#0d6efd;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 4px 6px -1px rgba(13, 110, 253, 0.3);
        transition: all 0.3s ease;
    }

    .add-button:hover {
        transform: scale(1.1);
        box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.3);
    }
    
    /* Стилі для відображення списком */
    .list-view tr {
        transition: all 0.2s ease;
    }
    
    .list-view tr:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    /* Кастомна іконка */
    .card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background-color:#f8f9fa;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    /* Футер картки */
    .card-footer-usr {
        background-color:#f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.125);
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: flex-end;
    }
    
    /* Стилі для модального вікна з другої сторінки */
    #modalForm {
        transition: opacity 0.3s ease;
    }
    
    #modalForm .modal-dialog {
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: scale(0.95);
        opacity: 0;
    }
    
    #modalForm.show .modal-dialog {
        transform: scale(1);
        opacity: 1;
    }
    
    /* Покращені стилі для анімації модального вікна */
    .modal-backdrop {
        backdrop-filter: blur(3px);
    }
    
    /* Прихований елемент */
    .hidden {
        display: none;
    }
    
    .p-icon{
        padding: 0.25rem 0.5rem;
    }
    
    .p-new-usr{
        margin: 10px;
    }