/*
 * Shared controls of the site: buttons, link, form fields, status, result icon
 * Общие контролы сайта: кнопки, ссылка, поля формы, плашка статуса, значок итога
 *
 * AiInstruction-AccountPages, Р5. Файл подключают и публичный `_Layout`, и
 * кабинет `_LayoutDashboard`: страницы учётной записи живут в обоих, и
 * кнопки с полями у них должны быть одни. Сюда перенесены `.pd-btn*` и
 * `.pd-link` из public-theme.css и поля входа из auth.css (`auth-*` →
 * `pd-*`); в тех файлах их больше нет.
 *
 * Цвета — только токены site-tokens.css. Размеры — в px, а не в rem: в
 * кабинете корневой шрифт 14px, и rem дал бы там другие размеры.
 */

/* ---------- кнопки ---------- */

/* `font: inherit` — для <button>: иначе браузер ставит ему свой шрифт.
   Стоит первым, и размеры ниже его перекрывают. */
.pd-btn {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: var(--pd-font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    /* Ссылка-кнопка не подчёркивается и при наведении: у темы и бутстрапа
       `a:hover` сильнее одного класса. */
    .pd-btn:hover,
    .pd-btn:focus {
        text-decoration: none;
    }

    /* Кабинет не подключает public-theme.css с его общим фокусом. */
    .pd-btn:focus-visible {
        outline: 2px solid var(--pd-accent);
        outline-offset: 2px;
    }

.pd-btn-sm {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
}

/* Во всю ширину: кнопка формы входа, экраны-итоги. */
.pd-btn-block {
    width: 100%;
}

.pd-btn-primary {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
    color: #fff;
}

.pd-btn-primary:hover,
.pd-btn-primary:focus-visible {
    background-color: var(--pd-accent-hover);
    border-color: var(--pd-accent-hover);
    color: #fff;
}

.pd-btn-ghost {
    background-color: var(--pd-surface);
    border-color: var(--pd-ghost-line);
    color: var(--pd-ink);
}

.pd-btn-ghost:hover,
.pd-btn-ghost:focus-visible {
    border-color: var(--pd-ink);
    color: var(--pd-ink);
}

/* Белая кнопка на тёмной плашке. */
.pd-btn-light {
    background-color: var(--pd-surface);
    border-color: var(--pd-surface);
    color: var(--pd-ink);
}

.pd-btn-light:hover,
.pd-btn-light:focus-visible {
    background-color: var(--pd-line-soft);
    border-color: var(--pd-line-soft);
    color: var(--pd-ink);
}

/* Опасное действие на странице подтверждения (Р7). Отдельного токена для
   наведения нет — темнее тем же цветом. */
.pd-btn-danger {
    background-color: var(--pd-warn);
    border-color: var(--pd-warn);
    color: #fff;
}

.pd-btn-danger:hover,
.pd-btn-danger:focus-visible {
    filter: brightness(.9);
    color: #fff;
}

/* Опасное действие в списке (Р7): не кричит, пока его не выбрали. */
.pd-btn-danger-ghost {
    background-color: var(--pd-surface);
    border-color: var(--pd-warn);
    color: var(--pd-warn);
}

.pd-btn-danger-ghost:hover,
.pd-btn-danger-ghost:focus-visible {
    background-color: var(--pd-warn-soft);
    color: var(--pd-warn);
}

@media (max-width: 575.98px) {
    /* Размер касания на телефоне. */
    .pd-btn-sm {
        height: 44px;
    }
}

/* ---------- ссылка со стрелкой ---------- */

.pd-link {
    color: var(--pd-accent);
    font-weight: 600;
    text-decoration: none;
}

.pd-link:hover {
    color: var(--pd-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- форма ---------- */

/* Раскладку формы даёт сам класс, а не место формы в карточке: те же поля
   стоят и в карточке входа, и в карточке настроек. */
.pd-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pd-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pd-field label,
.pd-field-head label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-ink);
}

.pd-field input:not([type=checkbox]):not([type=hidden]),
.pd-field select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pd-ghost-line);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--pd-ink);
    background: var(--pd-surface);
}

    .pd-field input:not([type=checkbox]):not([type=hidden]):focus,
    .pd-field select:focus {
        border-color: var(--pd-accent);
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(30, 79, 216, .2);
    }

    /* Поле только для чтения: логин и текущая почта в настройках. */
    .pd-field input:not([type=checkbox]):not([type=hidden])[disabled],
    .pd-field input:not([type=checkbox]):not([type=hidden])[readonly] {
        background: var(--pd-surface-2);
        color: var(--pd-muted);
    }

    .pd-field input.input-validation-error:not([type=checkbox]):not([type=hidden]) {
        border-color: var(--pd-warn);
    }

.pd-hint,
.pd-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pd-muted);
}

.pd-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pd-text);
}

    .pd-check input {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin: 3px 0 0;
    }

.pd-form .field-validation-error,
.pd-form .validation-summary-errors {
    font-size: 14px;
    color: var(--pd-warn);
}

    .pd-form .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

.pd-form .validation-summary-valid,
.pd-form .field-validation-valid {
    display: none;
}

/* ---------- плашка статуса (Р6) ---------- */

.pd-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

    .pd-status svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pd-status-ok {
    background-color: var(--pd-ok-soft);
    color: var(--pd-ok);
}

.pd-status-warn {
    background-color: var(--pd-warn-soft);
    color: var(--pd-warn);
}

/* Кнопка «Войти через 7docs» под формой входа и регистрации
   (AiInstruction-7docsSso, этап 4) */
.sso-alt {
    margin-top: 20px;
}

    .sso-alt .pd-note {
        margin-top: 10px;
    }

.sso-alt-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--pd-muted);
    font-size: 14px;
}

    .sso-alt-sep::before,
    .sso-alt-sep::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--pd-line);
    }

/* Сообщение «Вы вошли через 7docs» (AiInstruction-7docsSso, Р13) */
.sso-welcome {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ---------- значок экрана-итога (Р2) ---------- */

.pd-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

    .pd-result-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pd-result-icon-ok {
    background-color: var(--pd-ok-soft);
    color: var(--pd-ok);
}

.pd-result-icon-warn {
    background-color: var(--pd-warn-soft);
    color: var(--pd-warn);
}