textarea {
  height: 48px; /* Фіксована висота */
  background-color: #6b7280;
}


/* ==================================== */
/* Оновлені змінні (з styles_2.css) */
/* ==================================== */
:root {
    /* Основні кольори */
    --color-primary: #4338ca; /* Глибокий синій */
    --color-text-base: #111827; /* Дуже темний текст */
    --color-text-light: #6b7280; /* Сірий текст/допоміжний */
    --color-white: #ffffff;
    --color-border: #e5e7eb; /* Світла межа */
    --color-bg-card: #ffffff; /* Фон для карточок */

    /* Закруглення */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    
    /* Тіні */
    --box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

    /* Переходи */
    --transition-duration: 0.2s;
}

/* ==================================== */
/* СТИЛІ ФОРМИ ФІЛЬТРАЦІЇ */
/* ==================================== */

/* Контейнер фільтра - стилізація під "карточку" */
.filter-form-container {
    /* Tailwind classes: bg-white border border-gray-200 rounded-xl p-4 shadow-lg */
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 24px; /* Відступ, щоб відділити від основного контенту */
}

/* Група полів (Label + Input/Select) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Невеликий простір між лейблом та полем */
}

/* Стилізація лейблів */
.form-group label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* semi-bold */
    color: var(--color-text-light); /* Сірий, допоміжний текст */
    line-height: 1.5;
}

/* Стилізація полів SELECT (імітуємо сучасний вигляд) */
.filter-form-control {
    display: block;
    width: 100%;
    height: 2.5rem; /* h-10, щоб відповідати висоті кнопки */
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-base);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-duration) ease;
    resize: none;
}

/* Фокусний стан полів */
.form-group select:focus,
.form-group input:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(103, 171, 240, 0.25); /* Фокус-кільце */
}

/* ==================================== */
/* СТИЛІ КНОПОК (як у ваших шаблонах) */
/* ==================================== */

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600; /* semi-bold */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-duration) ease;
    text-decoration: none; /* Для використання на <a> елементах */
}

.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
    background-color: #2417b5; /* Трохи темніший primary */
    border-color: #4338ca;
}

/* ==================================== */
/* Медіа-запити для адаптивності */
/* ==================================== */

/* Стилі для кнопки "Застосувати" на мобільних пристроях */
.projects-filter-form .btn-primary {
    height: 2.5rem; /* h-10 */
    margin-top: 1.75rem; /* mt-7 */
}

@media (min-width: 640px) { /* sm breakpoint */
    /* На більших екранах прибираємо верхній відступ кнопки */
    .projects-filter-form .btn-primary {
        margin-top: 0; /* sm:mt-0 */
    }
}



/* Стилізація полів вводу та пароля (клас "form-control" з вашої форми) */
.form-control {
    width: 100%;
   
    padding: 12px 15px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-base);
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    
}

/* Стилізація плейсхолдерів */
.form-control::placeholder {
    color: var(--color-text-light);
    opacity: 0.7;
}

/* Фокусний стан полів */
.form-control:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(103, 171, 240, 0.25); /* Фокус-кільце */
}


#id_skills{
    height: 100px;
    resize: none;
}

textarea {
  height: 100px; /* Фіксована висота */
  background-color: white;
}

/* CSS для тостов/уведомлений, так как Tailwind их не включает по умолчанию */
#message-container {
    position: fixed; top: 88px; right: 20px; z-index: 1050; max-width: 350px; width: 100%;
}
.message { padding: 1rem; margin-bottom: 0.5rem; border-radius: 0.5rem; color: white; opacity: 0.95; }
.message.success { background-color: #10b981; }
.message.error { background-color: #ef4444; }
.message.info { background-color: #3b82f6; }

/* Спиннер для HTMX загрузок */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }