/* ============================================================
   SFPD CONTROLS — единый компонент кнопок и полей ввода
   ============================================================
   Подключать в base.html ПОСЛЕ sfpd-modal.css и ДО страничных css:
     <link rel="stylesheet" href="{% static 'css/sfpd-controls.css' %}">

   До этого файла кнопки описывались в 10 файлах и разъезжались:
   скругление 60px / 14px / 12px / без него, фон — то сплошная
   бирюза, то градиент, то синий #2f80ed из старой темы, а текст
   на бирюзовом фоне был то var(--sfpd-on-teal), то #ffffff, то #eaeaea
   (последние два почти не читались).

   Здесь задан один эталон, а существующие классы страниц
   подключены к нему группами — HTML менять не нужно.
   ============================================================ */

/* ============================================================
   1. КНОПКИ — БАЗОВАЯ ГЕОМЕТРИЯ
   ============================================================ */
.sfpd-btn,
.sfpd-btn-solid,
.sfpd-btn-ghost,
.sfpd-btn-danger,
.hero-btn,
.toolbar-btn,
.inv-btn,
.news-btn,
.comment-submit,
.contract-link,
.modal-btn,
.users-reset-btn,
.support-open-btn,
.support-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    height: 52px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease,
    background .2s ease, border-color .2s ease, filter .2s ease;
}

/* ============================================================
   2. ОСНОВНАЯ КНОПКА (бирюзовый градиент, тёмный текст)
   ============================================================ */
.sfpd-btn-solid,
.hero-btn-primary,
.toolbar-btn-apply,
.inv-btn-primary,
.news-btn,
.comment-submit,
.contract-link,
.modal-btn,
.support-submit-btn,
.users-reset-btn {
    background: linear-gradient(135deg, var(--sfpd-primary-dark), var(--sfpd-teal));
    /* тёмный текст — единственный читаемый на бирюзе.
       Раньше здесь встречались #ffffff и #eaeaea: контраст
       белого на var(--sfpd-teal) около 1.7:1, текст почти сливался. */
    color: var(--sfpd-on-teal);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(20, 241, 217, .18);
}

.sfpd-btn-solid:hover,
.hero-btn-primary:hover,
.toolbar-btn-apply:hover,
.inv-btn-primary:hover,
.news-btn:hover,
.comment-submit:hover,
.contract-link:hover,
.modal-btn:hover,
.support-submit-btn:hover,
.users-reset-btn:hover {
    color: var(--sfpd-on-teal-hover);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(20, 241, 217, .28);
    filter: brightness(1.05);
}

/* ============================================================
   3. ВТОРИЧНАЯ КНОПКА (контур, бирюзовый текст)
   ============================================================ */
.sfpd-btn,
.support-open-btn,
.hero-btn-dark,
.inv-btn-ghost {
    background: rgba(20, 241, 217, .07);
    border-color: rgba(20, 241, 217, .30);
    color: var(--sfpd-teal);
    box-shadow: none;
}

.sfpd-btn:hover,
.support-open-btn:hover,
.hero-btn-dark:hover,
.inv-btn-ghost:hover {
    background: linear-gradient(135deg, var(--sfpd-primary-dark), var(--sfpd-teal));
    border-color: transparent;
    color: var(--sfpd-on-teal);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(20, 241, 217, .22);
}

/* ============================================================
   4. НЕЙТРАЛЬНАЯ КНОПКА (стекло)
   ============================================================ */
.sfpd-btn-ghost,
.toolbar-btn-reset,
.inv-btn,
.modal-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    box-shadow: none;
}

.sfpd-btn-ghost:hover,
.toolbar-btn-reset:hover,
.inv-btn:hover,
.modal-btn--ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(20, 241, 217, .30);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ============================================================
   5. ОПАСНАЯ КНОПКА
   ============================================================ */
.sfpd-btn-danger,
.inv-btn-danger,
.modal-btn--danger {
    background: linear-gradient(135deg, #7e1f2b, #c0334a);
    border-color: transparent;
    color: #ffe3e8;
    box-shadow: 0 10px 24px rgba(192, 51, 74, .18);
}

.sfpd-btn-danger:hover,
.inv-btn-danger:hover,
.modal-btn--danger:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(192, 51, 74, .28);
}

/* ============================================================
   6. УСПЕХ
   ============================================================ */
.sfpd-btn-success,
.inv-btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: transparent;
    color: #04160b;
    box-shadow: 0 10px 24px rgba(34, 197, 94, .18);
}

.sfpd-btn-success:hover,
.inv-btn-success:hover {
    color: #04160b;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(34, 197, 94, .28);
}

/* ============================================================
   7. РАЗМЕРЫ И СОСТОЯНИЯ
   ============================================================ */
.sfpd-btn-sm {
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: 12px;
}

.sfpd-btn-lg {
    height: 58px;
    padding: 0 34px;
    font-size: 16px;
    border-radius: 16px;
}

.sfpd-btn-block,
.button-block,
.modal-btn,
.support-submit-btn,
.support-open-btn {
    width: 100%;
}

.sfpd-btn:disabled,
.sfpd-btn-solid:disabled,
.hero-btn:disabled,
.toolbar-btn:disabled,
.inv-btn:disabled,
.inv-btn[disabled],
.modal-btn:disabled,
.comment-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* иконка внутри кнопки слегка уезжает при наведении */
.news-btn i,
.contract-link i {
    transition: transform .2s ease;
}

.news-btn:hover i,
.contract-link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   8. ПОЛЯ ВВОДА — ЕДИНЫЙ ВИД
   ============================================================ */
.sfpd-input,
.form-input,
.modern-control,
.toolbar-input,
.toolbar-select,
.comment-input,
.inv-select,
.sfpd-dark-form .form-control,
.sfpd-dark-form input[type="text"],
.sfpd-dark-form input[type="email"],
.sfpd-dark-form input[type="password"],
.sfpd-dark-form select,
.sfpd-dark-form textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.sfpd-input::placeholder,
.form-input::placeholder,
.modern-control::placeholder,
.toolbar-input::placeholder,
.comment-input::placeholder,
.sfpd-dark-form input::placeholder,
.sfpd-dark-form textarea::placeholder {
    color: rgba(255, 255, 255, .35);
}

.sfpd-input:focus,
.form-input:focus,
.modern-control:focus,
.toolbar-input:focus,
.toolbar-select:focus,
.comment-input:focus,
.inv-select:focus,
.sfpd-dark-form .form-control:focus,
.sfpd-dark-form input:focus,
.sfpd-dark-form select:focus,
.sfpd-dark-form textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(20, 241, 217, .45);
    box-shadow: 0 0 0 3px rgba(20, 241, 217, .12);
}

.sfpd-input:disabled,
.form-input:disabled,
.comment-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* выпадающие списки — тёмные, иначе белый островок на тёмной странице */
.toolbar-select option,
.modern-control option,
.inv-select option,
.sfpd-dark-form select option {
    background-color: var(--sfpd-panel);
    color: rgba(255, 255, 255, .85);
}

/* состояния валидации */
.form-input.is-valid,
.form-input.valid,
.sfpd-input.is-valid {
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .10);
}

.form-input.is-invalid,
.form-input.invalid,
.sfpd-input.is-invalid {
    border-color: rgba(239, 68, 68, .55);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
}

/* подпись поля */
.sfpd-label,
.sfpd-dark-form label,
.sfpd-dark-form .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 700;
}

.sfpd-label i,
.sfpd-dark-form label i {
    color: var(--sfpd-teal);
    width: 14px;
    text-align: center;
}

/* автозаполнение браузера белит поля в обход background */
.sfpd-input:-webkit-autofill,
.form-input:-webkit-autofill,
.modern-control:-webkit-autofill,
.toolbar-input:-webkit-autofill,
.sfpd-dark-form input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .05) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, .05) inset !important;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
   9. ДОСТУПНОСТЬ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sfpd-btn,
    .sfpd-btn-solid,
    .hero-btn,
    .toolbar-btn,
    .inv-btn,
    .news-btn,
    .modal-btn,
    .comment-submit,
    .contract-link,
    .form-input,
    .sfpd-input {
        transition: none;
    }

    .sfpd-btn:hover,
    .sfpd-btn-solid:hover,
    .news-btn:hover,
    .modal-btn:hover {
        transform: none;
    }
}