/**

 * Стили для форм

 */



/* ===== Формы ===== */

.form {

    max-width: 600px;

    margin: 0 auto;

    background-color: var(--bg-color);

    padding: 2rem;

    border-radius: var(--radius);

    border: 1px solid var(--border-color);

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    color: #334155;

    font-weight: 500;

    font-size: 0.875rem;

}



/* Стили для полей ввода в стиле страницы входа */

.input-wrapper {

    position: relative;

}



.input-icon {

    position: absolute;

    left: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

    color: #64748b;

    pointer-events: none;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

}



.input-icon svg {

    width: 100%;

    height: 100%;

    display: block;

}



.input-wrapper input,

.input-wrapper textarea,

.input-wrapper select {

    width: 100%;

    padding: 0.875rem 1rem 0.875rem 3.5rem;

    border: none;

    border-bottom: 2px solid #e2e8f0;

    border-radius: 0;

    background: transparent;

    font-size: 1rem;

    transition: border-bottom-color 0.2s;

    box-sizing: border-box;

    font-family: inherit;

}



.input-wrapper textarea {

    padding-top: 2.5rem;

    padding-bottom: 0.875rem;

    padding-left: 3.5rem;

    resize: vertical;

    min-height: 120px;

}



.input-wrapper textarea + .input-icon,

.input-wrapper.has-textarea .input-icon {

    top: 1.5rem;

    transform: translateY(0);

    align-items: flex-start;

    padding-top: 0.25rem;

}



.input-wrapper select {

    cursor: pointer;

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1rem center;

    padding-right: 3rem;

    padding-left: 3.5rem;

}



/* Поля без иконок (для обратной совместимости) */

.form-group input:not(.input-wrapper input),

.form-group textarea:not(.input-wrapper textarea),

.form-group select:not(.input-wrapper select) {

    padding: 0.875rem 1rem;

    border: none;

    border-bottom: 2px solid #e2e8f0;

    border-radius: 0;

    background: transparent;

    font-size: 1rem;

    transition: border-bottom-color 0.2s;

    box-sizing: border-box;

}



.form-group textarea:not(.input-wrapper textarea) {

    resize: vertical;

    min-height: 120px;

}



/* Пустое поле - серое */

.input-wrapper input:not(.filled):not(:focus):not(.error):not(.warning),

.input-wrapper textarea:not(.filled):not(:focus):not(.error):not(.warning),

.input-wrapper select:not(.filled):not(:focus):not(.error):not(.warning),

.form-group input:not(.filled):not(:focus):not(.error):not(.warning):not(.input-wrapper input),

.form-group textarea:not(.filled):not(:focus):not(.error):not(.warning):not(.input-wrapper textarea),

.form-group select:not(.filled):not(:focus):not(.error):not(.warning):not(.input-wrapper select) {

    border-bottom-color: #e2e8f0;

}



/* Заполненное поле - зеленое */

.input-wrapper input.filled:not(:focus):not(.error):not(.warning),

.input-wrapper textarea.filled:not(:focus):not(.error):not(.warning),

.input-wrapper select.filled:not(:focus):not(.error):not(.warning),

.form-group input.filled:not(:focus):not(.error):not(.warning):not(.input-wrapper input),

.form-group textarea.filled:not(:focus):not(.error):not(.warning):not(.input-wrapper textarea),

.form-group select.filled:not(:focus):not(.error):not(.warning):not(.input-wrapper select) {

    border-bottom-color: #10b981;

}



/* Фокус - синее */

.input-wrapper input:focus,

.input-wrapper textarea:focus,

.input-wrapper select:focus,

.form-group input:focus:not(.input-wrapper input),

.form-group textarea:focus:not(.input-wrapper textarea),

.form-group select:focus:not(.input-wrapper select) {

    outline: none;

    border-bottom-color: #2563eb;

    box-shadow: none;

}



/* Ошибка - красное */

.input-wrapper input.error,

.input-wrapper textarea.error,

.input-wrapper select.error,

.form-group input.error:not(.input-wrapper input),

.form-group textarea.error:not(.input-wrapper textarea),

.form-group select.error:not(.input-wrapper select) {

    border-bottom-color: #ef4444;

}



.input-wrapper input.error:focus,

.input-wrapper textarea.error:focus,

.input-wrapper select.error:focus,

.form-group input.error:focus:not(.input-wrapper input),

.form-group textarea.error:focus:not(.input-wrapper textarea),

.form-group select.error:focus:not(.input-wrapper select) {

    border-bottom-color: #ef4444;

}



/* Предупреждение - желтое */

.input-wrapper input.warning,

.input-wrapper textarea.warning,

.input-wrapper select.warning,

.form-group input.warning:not(.input-wrapper input),

.form-group textarea.warning:not(.input-wrapper textarea),

.form-group select.warning:not(.input-wrapper select) {

    border-bottom-color: #f59e0b;

}



.input-wrapper input.warning:focus,

.input-wrapper textarea.warning:focus,

.input-wrapper select.warning:focus,

.form-group input.warning:focus:not(.input-wrapper input),

.form-group textarea.warning:focus:not(.input-wrapper textarea),

.form-group select.warning:focus:not(.input-wrapper select) {

    border-bottom-color: #f59e0b;

}



/* Автозаполнение */

.input-wrapper input:-webkit-autofill,

.input-wrapper input:-webkit-autofill:hover,

.input-wrapper input:-webkit-autofill:focus,

.input-wrapper input:-webkit-autofill:active,

.form-group input:-webkit-autofill:not(.input-wrapper input),

.form-group input:-webkit-autofill:hover:not(.input-wrapper input),

.form-group input:-webkit-autofill:focus:not(.input-wrapper input),

.form-group input:-webkit-autofill:active:not(.input-wrapper input) {

    -webkit-box-shadow: 0 0 0 30px transparent inset !important;

    -webkit-text-fill-color: inherit !important;

    background-color: transparent !important;

    background: transparent !important;

    transition: background-color 5000s ease-in-out 0s;

}



.form-group small {

    display: block;

    margin-top: 0.25rem;

    color: #64748b;

    font-size: 0.875rem;

}



.password-toggle {

    position: absolute;

    right: 1rem;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}



.password-toggle:hover {

    color: #2563eb;

}



.password-toggle svg {

    width: 20px;

    height: 20px;

}



/* Увеличиваем padding-right для полей с password-toggle */

.input-wrapper input[type="password"] {

    padding-right: 3.5rem;

}



/* Переопределение старых стилей из style.css для полей в input-wrapper */

.input-wrapper input,

.input-wrapper textarea,

.input-wrapper select {

    border: none !important;

    border-bottom: 2px solid #e2e8f0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    padding-left: 3.5rem !important;

}



.input-wrapper textarea {

    padding-left: 3.5rem !important;

}



.input-wrapper input:focus,

.input-wrapper textarea:focus,

.input-wrapper select:focus {

    border-bottom-color: #2563eb !important;

    box-shadow: none !important;

    outline: none !important;

}



/* Стили для file input (аватар) */

.input-wrapper input[type="file"] {

    padding: 0.875rem 1rem;

    border-bottom: 2px solid #e2e8f0;

    cursor: pointer;

}



.input-wrapper input[type="file"]:focus {

    border-bottom-color: #2563eb;

    outline: none;

}



/* Если file input находится не в input-wrapper, оставляем стандартный стиль */

.form-group input[type="file"]:not(.input-wrapper input) {

    padding: 0.875rem 1rem;

    border: 2px dashed #e2e8f0;

    border-radius: 8px;

    background: #f8fafc;

    cursor: pointer;

    transition: border-color 0.2s;

}



.form-group input[type="file"]:not(.input-wrapper input):hover {

    border-color: #2563eb;

}



.form-footer {

    margin-top: 1.5rem;

    text-align: center;

    color: var(--text-light);

}



.form-footer a {

    color: var(--primary-color);

    text-decoration: none;

}



.form-footer a:hover {

    text-decoration: underline;

}



/* ===== Алерты ===== */

.alert {

    padding: 1rem 1.5rem;

    border-radius: var(--radius);

    margin-bottom: 1.5rem;

}



.alert-error {

    background-color: #fee2e2;

    color: #991b1b;

    border: 1px solid #fecaca;

}



.alert-success {

    background-color: #d1fae5;

    color: #065f46;

    border: 1px solid #a7f3d0;

}



.alert-warning {

    background-color: #fef3c7;

    color: #92400e;

    border: 1px solid #fde68a;

}



.alert ul {

    margin-left: 1.5rem;

    margin-top: 0.5rem;

}



.alert ul li {

    margin-bottom: 0.25rem;

}



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

.table-responsive {

    overflow-x: auto;

    margin-top: 1.5rem;

}



.table {

    width: 100%;

    border-collapse: collapse;

    background-color: var(--bg-color);

    border-radius: var(--radius);

    overflow: hidden;

}



.table thead {

    background-color: var(--bg-light);

}



.table th,

.table td {

    padding: 1rem;

    text-align: left;

    border-bottom: 1px solid var(--border-color);

}



.table th {

    font-weight: 600;

    color: var(--text-color);

}



.table tbody tr:hover {

    background-color: var(--bg-light);

}



.table code {

    background-color: var(--bg-light);

    padding: 0.25rem 0.5rem;

    border-radius: 4px;

    font-size: 0.875rem;

    color: var(--primary-color);

}



@media (max-width: 768px) {

    .form {

        padding: 1.5rem;

    }

    

    .table-responsive {

        font-size: 0.875rem;

    }



    .table th,

    .table td {

        padding: 0.75rem 0.5rem;

    }

}