/*
 * PingWin — тема панели в стиле нового лендинга.
 *
 * Подключается ПОСЛЕ bootstrap.css, bootstrap-icons.css и site.css на всех страницах, кроме лендинга:
 *   <link href="/css/pingwin-panel.css" rel="stylesheet">
 * Меняет только внешний вид: разметка, классы Bootstrap 5.1 и поведение остаются прежними.
 * Токены и кривые — из landing.css (--pw-*), чтобы панель и лендинг читались как один продукт.
 *
 * Ритм — шаг 8: 8 внутри элемента · 16 между пунктами · 24 связанные блоки · 40–56 группы.
 * Скругления: 6 (теги) · 10 (пункты меню) · 12 (поля, мелкие кнопки) · 16 (меню, алерты) · 20 (карточки) · 24 (окна) · 100 (кнопки).
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/InterVariable.woff2') format('woff2');
}

/* ===================== ТОКЕНЫ ===================== */

:root {
    /* как в landing.css */
    --pw-text: #2B2B2B;
    --pw-accent: #3C7AFB;
    --pw-accent-press: #346BDC;
    --pw-accent-soft: #EAF1FF;
    --pw-muted: #8A8A8A;
    --pw-disabled: #D9D9D9;
    --pw-surface: #FFFFFF;
    --pw-soft: #F0F5FB;
    --pw-line: #E6EBF3;
    --pw-free: #0CA32A;
    --pw-free-soft: #E3F6E7;
    --pw-orange: #FF7439;
    --pw-g-btn: linear-gradient(140deg, #3C7AFB 0%, #346BDC 100%);
    --pw-g-soft: linear-gradient(-40deg, #F4F7FE 10%, #F2F5FD 96%);
    --pw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    /* панель: поля ввода и статусы */
    --pw-field: #DCE3EE;
    --pw-ring: 0 0 0 4px rgba(60, 122, 251, .16);
    --pw-ok: #0CA32A;          /* текст «работает» */
    --pw-ok-bar: #3FC46B;      /* полосы доступности */
    --pw-ok-soft: #E3F6E7;
    --pw-bad: #E5484D;
    --pw-bad-bar: #FF5F57;
    --pw-bad-soft: #FDECEC;
    --pw-warn: #B86E00;
    --pw-warn-bar: #FFB224;
    --pw-warn-soft: #FFF4DC;
    --pw-pause-soft: #F1F3F6;
    --pw-shadow-pop: 0 0 0 1px var(--pw-line), 0 12px 32px rgba(43, 43, 43, .10);

    /* Bootstrap 5.1 читает часть переменных напрямую */
    --bs-font-sans-serif: var(--pw-font);
    --bs-body-font-family: var(--pw-font);
    --bs-body-color: var(--pw-text);
    --bs-primary: #3C7AFB;
    --bs-primary-rgb: 60, 122, 251;
    --bs-secondary: #8A8A8A;
    --bs-secondary-rgb: 138, 138, 138;
    --bs-success: #0CA32A;
    --bs-success-rgb: 12, 163, 42;
    --bs-danger: #E5484D;
    --bs-danger-rgb: 229, 72, 77;
    --bs-warning: #FFB224;
    --bs-warning-rgb: 255, 178, 36;
    --bs-info: #3C7AFB;
    --bs-info-rgb: 60, 122, 251;
    --bs-light: #F0F5FB;
    --bs-light-rgb: 240, 245, 251;
    --bs-dark: #2B2B2B;
    --bs-dark-rgb: 43, 43, 43;
    --bs-body-color-rgb: 43, 43, 43;
    --bs-gradient: none;
}

/* ===================== БАЗА ===================== */

body {
    font-family: var(--pw-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--pw-text);
    background: var(--pw-surface);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--pw-text);
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; margin-bottom: 24px; }
h2, .h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; margin-bottom: 16px; }
h3, .h3 { font-size: 22px; line-height: 1.2; }
h4, .h4 { font-size: 20px; line-height: 1.25; }
h5, .h5 { font-size: 18px; line-height: 1.3; font-weight: 500; }
h6, .h6 { font-size: 16px; line-height: 1.3; font-weight: 500; }

.fs-2 { font-size: clamp(24px, 2.1vw, 30px) !important; }
.fs-5 { font-size: 18px !important; }
.small, small { font-size: 0.875em; }
.lead { font-size: 20px; font-weight: 400; }
.fw-bolder { font-weight: 600 !important; }
.fw-bold { font-weight: 600 !important; }
b, strong { font-weight: 600; }

a {
    color: var(--pw-accent);
    text-decoration: none;
    transition: color 150ms ease;
}

a:hover { color: var(--pw-accent-press); }

hr { color: var(--pw-line); opacity: 1; }

::selection { background: rgba(60, 122, 251, .18); }

/* Фокус с клавиатуры — единый для всего: кольцо акцента */
:focus-visible {
    outline: 2px solid var(--pw-accent);
    outline-offset: 2px;
}

.text-muted, .text-secondary, .text-black-50 { color: var(--pw-muted) !important; }
.text-body { color: var(--pw-text) !important; }
.text-primary, .text-info { color: var(--pw-accent) !important; }
.text-success { color: var(--pw-ok) !important; }
.text-danger { color: var(--pw-bad) !important; }
.text-warning { color: var(--pw-warn) !important; }
.link-secondary { color: var(--pw-muted) !important; }
.link-secondary:hover { color: var(--pw-text) !important; }

.bg-light { background-color: var(--pw-soft) !important; }
.bg-white { background-color: var(--pw-surface) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pw-line) !important; }
.border-success { border-color: var(--pw-ok-bar) !important; }
.border-danger { border-color: var(--pw-bad-bar) !important; }
.border-primary { border-color: var(--pw-accent) !important; }
.rounded { border-radius: 12px !important; }
.rounded-1 { border-radius: 6px !important; }
.rounded-3 { border-radius: 16px !important; }

/* ===================== КАРКАС: ШАПКА, КОНТЕНТ, ФУТЕР ===================== */

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1360px; }
}

.container {
    padding-left: clamp(16px, 2.2vw, 24px);
    padding-right: clamp(16px, 2.2vw, 24px);
}

main > .container {
    padding-bottom: 56px;
}

/* ===================== ШАПКА — как на лендинге =====================
   Логотип-слово «PingWin», текстовые пункты без подложек, активный раздел — цветом акцента,
   справа язык и профиль тихими иконками. Шапка закреплена, поэтому белая, с тонкой линией снизу. */

.navbar.fixed-top {
    min-height: 80px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 1px 0 #F0F2F6;
}

/* Логотип: слово «PingWin», как на лендинге */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-right: 32px;
    color: var(--pw-text) !important;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
}


.navbar-light .navbar-nav .nav-link {
    position: relative;
    display: block;
    padding: 10px 0;
    margin-right: 22px;
    border-radius: 0;
    background: none;
    color: var(--pw-text);
    font-size: 16px;
    line-height: 20px;
    transition: color 150ms ease;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--pw-accent);
    background: none;
}

.navbar-nav .nav-link sup { top: -0.6em; vertical-align: baseline; }

/* «Обновить до PRO» — тёплая пилюля, по размеру как «Начать бесплатно» в шапке лендинга */
.navbar-nav > li.bg-warning {
    margin: 0 22px 0 0 !important;
    border-radius: 100px !important;
    background: linear-gradient(140deg, #FF8A4C 0%, #FF6A2B 100%) !important;
}

.navbar-light .navbar-nav > li.bg-warning > .nav-link,
.navbar-light .navbar-nav > li.bg-warning > .nav-link:hover {
    margin: 0;
    padding: 10px 18px;
    color: #fff;
    font-weight: 500;
}

/* счётчики: маленькая цифра над пунктом, срочное — красной пилюлей */
.navbar-nav .nav-link .badge {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    margin-left: 3px !important;
    border-radius: 100px;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.navbar-nav .nav-link .badge.bg-secondary { background: none !important; color: var(--pw-muted) !important; }
/* круг 18 px при одной цифре, при двух и больше — тянется по горизонтали */
.navbar-nav .nav-link .badge.bg-danger {
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    line-height: 18px;
    background: var(--pw-bad) !important;
    color: #fff !important;
}

/* справа: язык и профиль — тихие иконки с шевроном, как «RU ⌄» на лендинге */
.navbar-nav:not(.nav) .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 0;
    margin-left: 16px;
    color: var(--pw-muted);
}

.navbar-nav:not(.nav) .nav-link .bi { font-size: 22px; line-height: 1; }

.navbar-nav .dropdown-toggle::after {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border: 0;
    vertical-align: 0;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round' d='M6 9l6 6 6-6'/%3e%3c/svg%3e") center / 16px no-repeat;
    transition: transform 200ms var(--ease-out);
}

.navbar-nav .show > .dropdown-toggle::after { transform: rotate(180deg); }

.navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 1400px) { .navbar-nav.nav { flex-wrap: nowrap; } }

.navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
}

.navbar-toggler:focus { box-shadow: var(--pw-ring); }

@media (hover: hover) and (pointer: fine) {
    .navbar-light .navbar-nav .nav-link:hover { color: var(--pw-accent); }
    .navbar-light .navbar-nav > li.bg-warning > .nav-link:hover { color: #fff; }
    .navbar-nav > li.bg-warning:hover { filter: brightness(1.04); }
    .navbar-nav:not(.nav) .nav-link:hover { color: var(--pw-text); }
}

/* Меню свёрнуто в бургер до xl (navbar-expand-xl): иначе пункты переносятся на вторую строку */
@media (max-width: 1199.98px) {
    .navbar-collapse { padding: 8px 0 12px; }
    .navbar-light .navbar-nav .nav-link { padding: 12px 0; margin: 0; font-size: 18px; }
    .navbar-nav > li.bg-warning { align-self: flex-start; margin: 8px 0 !important; }
    .navbar-nav:not(.nav) { flex-direction: row; gap: 20px; }
    .navbar-nav:not(.nav) .nav-link { margin-left: 0; }
}

@media (max-width: 767.98px) {
    .navbar.fixed-top { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
    .navbar-brand { margin-right: 0; font-size: 24px; }
}

.footer {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    background: var(--pw-surface) !important;
    border-top: 1px solid var(--pw-line);
    color: var(--pw-muted);
    font-size: 14px;
}

.footer a { color: var(--pw-muted); text-decoration: none; }
.footer a:hover { color: var(--pw-text); }
.footer .text-muted { color: var(--pw-muted) !important; }

/* ===================== ЗАГОЛОВОК СТРАНИЦЫ И КНОПКИ =====================
   Кнопки действий стоят справа от h1 (div.float-end перед заголовком). Центрируем их по строке заголовка:
   у блока кнопок убираем верхний отступ, а у заголовка выравниваем высоту строки под кнопку 44 px. */
.float-end:not(.text-end):has(~ h1) { margin-top: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.float-end:not(.text-end):has(~ h1) > * { margin: 0 !important; }
.float-end:not(.text-end) ~ h1 { padding-block: max(0px, calc((44px - 1.1em) / 2)); }

/* ===================== КРОШКИ ===================== */

.breadcrumb {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
}

/* ссылки — цветом акцента, как остальные ссылки панели; текущая страница — приглушённым текстом */
.breadcrumb-item { color: var(--pw-muted); }
.breadcrumb-item a { color: var(--pw-accent); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--pw-accent-press); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-item.active { color: var(--pw-muted); }
.breadcrumb-item + .breadcrumb-item { padding-left: 8px; }
.breadcrumb-item + .breadcrumb-item::before { padding-right: 8px; color: var(--pw-disabled); content: "/"; }

/* ===================== КНОПКИ ===================== */

.btn {
    position: relative;
    isolation: isolate;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    vertical-align: middle;
    transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn .bi { font-size: 1.05em; line-height: 1; vertical-align: -0.1em; }

.btn:active, .btn.active { transform: scale(0.97); }
.btn:focus, .btn:active:focus { box-shadow: none; }
/* Bootstrap даёт кнопке с открытым меню серое кольцо селектором .dropdown-toggle.show:focus — гасим той же специфичностью */
.btn.dropdown-toggle.show:focus, .btn.active:focus { box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: .45; }

.btn-sm {
    padding: 6px 14px;
    font-size: 14px;
    line-height: 18px;
}

.btn-sm .bi { font-size: 15px; }

.btn-lg {
    padding: 16px 28px;
    font-size: 18px;
}

/* главная — градиент как на лендинге, подсветка слоем */
.btn-primary {
    color: #fff;
    border: 0;
    background: var(--pw-g-btn);
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #0B2E8A;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-check:checked + .btn-primary, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background: var(--pw-g-btn);
    border: 0;
}

.btn-primary:active::before { opacity: .22; }
.btn-primary:disabled, .btn-primary.disabled { color: #fff; background: var(--pw-g-btn); }

/* обводка — «призрачная» кнопка лендинга */
.btn-outline-primary {
    color: var(--pw-accent);
    border: 1px solid var(--pw-accent);
    background: transparent;
}

.btn-outline-primary:active, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--pw-accent);
    border-color: var(--pw-accent);
    background: var(--pw-accent-soft);
}

/* второстепенные — мягкая заливка без рамки */
.btn-secondary, .btn-light {
    color: var(--pw-text);
    border: 1px solid transparent;
    background: var(--pw-soft);
}

.btn-secondary:active, .btn-light:active, .btn-secondary.active, .btn-light.active,
.btn-check:checked + .btn-secondary, .btn-check:checked + .btn-light,
.show > .btn-light.dropdown-toggle, .show > .btn-secondary.dropdown-toggle {
    color: var(--pw-text);
    border-color: transparent;
    background: #E4ECF7;
}

.btn-outline-secondary, .btn-outline-dark {
    color: var(--pw-text);
    border: 1px solid var(--pw-field);
    background: var(--pw-surface);
}

.btn-outline-secondary:active, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.dropdown-toggle.show {
    color: var(--pw-text);
    border-color: var(--pw-field);
    background: var(--pw-soft);
}

.btn-outline-danger {
    color: var(--pw-bad);
    border: 1px solid #F4C2C3;
    background: var(--pw-surface);
}

.btn-outline-danger:active, .btn-outline-danger.active {
    color: var(--pw-bad);
    border-color: var(--pw-bad);
    background: var(--pw-bad-soft);
}

.btn-danger {
    color: #fff;
    border: 0;
    background: var(--pw-bad);
}

.btn-danger:active { color: #fff; background: #CF3B40; }

.btn-success {
    color: #fff;
    border: 0;
    background: var(--pw-ok);
}

.btn-outline-success {
    color: var(--pw-ok);
    border: 1px solid #B5E3C1;
    background: var(--pw-surface);
}

/* «Обновить до PRO» — тёплый акцент лендинга */
.btn-warning {
    color: #fff;
    border: 0;
    background: linear-gradient(140deg, #FF8A4C 0%, #FF6A2B 100%);
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active { color: #fff; background: linear-gradient(140deg, #FF8A4C 0%, #FF6A2B 100%); }

.btn-outline-warning {
    color: #E0601F;
    border: 1px solid #FFC7A8;
    background: var(--pw-surface);
}

.btn-link {
    padding: 0;
    border: 0;
    color: var(--pw-accent);
    text-decoration: none;
    font-weight: 400;
}

.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 100px;
    opacity: .5;
    background-size: 12px;
    transition: opacity 150ms ease, background-color 150ms ease;
}

.btn-close:focus { box-shadow: none; }
.btn-close:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; opacity: 1; }

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 100px; border-bottom-left-radius: 100px; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle { border-top-right-radius: 100px; border-bottom-right-radius: 100px; }

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover::before { opacity: .14; }
    .btn-outline-primary:hover { color: var(--pw-accent); border-color: var(--pw-accent); background: rgba(60, 122, 251, .06); }
    .btn-secondary:hover, .btn-light:hover { color: var(--pw-text); border-color: transparent; background: #E4ECF7; }
    .btn-outline-secondary:hover, .btn-outline-dark:hover { color: var(--pw-text); border-color: #C7D2E3; background: var(--pw-soft); }
    .btn-outline-danger:hover { color: var(--pw-bad); border-color: var(--pw-bad); background: var(--pw-bad-soft); }
    .btn-danger:hover { color: #fff; background: #D63E43; }
    .btn-success:hover { color: #fff; background: #0A9025; }
    .btn-outline-success:hover { color: var(--pw-ok); border-color: var(--pw-ok); background: var(--pw-ok-soft); }
    .btn-warning:hover { filter: brightness(1.04); }
    .btn-outline-warning:hover { color: #E0601F; border-color: #FF8A4C; background: #FFF1E9; }
    .btn-close:hover { opacity: .9; background-color: var(--pw-soft); }
}

/* ===================== ПОЛЯ ВВОДА ===================== */

.form-label, .control-label {
    margin-bottom: 8px;
    color: var(--pw-text);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.form-control, .form-select {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--pw-field);
    border-radius: 12px;
    background-color: var(--pw-surface);
    color: var(--pw-text);
    font-size: 16px;
    line-height: 22px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A8A8A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 14px center;
    background-size: 16px 16px;
}

textarea.form-control { min-height: 96px; }

.form-control::placeholder { color: #A9B0BC; }

.form-control:focus, .form-select:focus, .form-select.show {
    border-color: var(--pw-accent);
    box-shadow: var(--pw-ring);
    color: var(--pw-text);
    background-color: var(--pw-surface);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    border-color: var(--pw-line);
    background-color: var(--pw-soft);
    color: var(--pw-muted);
}

.form-control-sm, .form-select-sm { min-height: 32px; padding: 5px 10px; border-radius: 10px; font-size: 14px; }
.form-select-sm { padding-right: 32px; background-position: right 10px center; }

.input-group > .form-control, .input-group > .form-select { border-radius: 12px; }
.input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.input-group-text {
    padding: 10px 14px;
    border: 1px solid var(--pw-field);
    border-radius: 12px;
    background: var(--pw-soft);
    color: var(--pw-muted);
    font-size: 16px;
}

.form-text, .hint-block {
    margin-top: 6px;
    color: var(--pw-muted);
    font-size: 13px;
    line-height: 18px;
}

/* обязательные поля Yii помечают классом required на обёртке */
.required > .form-label::after, .required > label::after { content: none; }

.is-invalid.form-control, .is-invalid.form-select, .has-error .form-control {
    border-color: var(--pw-bad);
}

.is-invalid.form-control:focus, .is-invalid.form-select:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.form-control.is-invalid, .form-select.is-invalid { background-image: none; padding-right: 14px; }
.form-select.is-invalid { padding-right: 40px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A8A8A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e"); }
.is-valid.form-control, .is-valid.form-select { border-color: var(--pw-field); background-image: none; }
.is-valid.form-control:focus, .is-valid.form-select:focus { border-color: var(--pw-accent); box-shadow: var(--pw-ring); }

.invalid-feedback { margin-top: 6px; color: var(--pw-bad); font-size: 13px; line-height: 18px; }
.valid-feedback { margin-top: 6px; color: var(--pw-ok); font-size: 13px; line-height: 18px; }

/* Галочки после проверки формы — зелёный и красный темы, а не #198754 / #dc3545 из Bootstrap */
.form-check-input.is-valid, .was-validated .form-check-input:valid { border-color: var(--pw-ok); }
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked { border-color: var(--pw-ok); background-color: var(--pw-ok); }
.form-check-input.is-valid:focus, .was-validated .form-check-input:valid:focus { box-shadow: 0 0 0 4px rgba(12, 163, 42, .14); }
.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: var(--pw-ok); }
.form-check-input.is-invalid, .was-validated .form-check-input:invalid { border-color: var(--pw-bad); }
.form-check-input.is-invalid:checked, .was-validated .form-check-input:invalid:checked { border-color: var(--pw-bad); background-color: var(--pw-bad); }
.form-check-input.is-invalid:focus, .was-validated .form-check-input:invalid:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: var(--pw-bad); }

.error-summary {
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 0;
    border-radius: 16px;
    background: var(--pw-bad-soft);
    color: #A3262B;
}

/* выбор файла (логотип, иконка страницы состояния): пунктирное поле-«площадка»,
   кнопка внутри — мягкая пилюля акцента, подпись «файл не выбран» приглушённая */
input[type=file].form-control {
    padding: 6px 16px 6px 6px;
    border-style: dashed;
    border-color: #C9D6EE;
    background-color: #FAFBFE;
    color: var(--pw-muted);
    font-size: 15px;
    line-height: 30px;
    cursor: pointer;
}
input[type=file].form-control::file-selector-button {
    height: 30px;
    margin: 0 12px 0 0;
    padding: 0 16px;
    border: 0;
    border-radius: 100px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font: 500 14px/30px var(--pw-font);
    cursor: pointer;
    transition: background-color 150ms ease;
}
/* отдельным правилом: в общем списке селекторов Firefox отбросил бы правило целиком */
input[type=file].form-control::-webkit-file-upload-button {
    height: 30px;
    margin: 0 12px 0 0;
    padding: 0 16px;
    border: 0;
    border-radius: 100px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font: 500 14px/30px var(--pw-font);
    cursor: pointer;
    transition: background-color 150ms ease;
}
input[type=file].form-control:focus { border-style: solid; }
@media (hover: hover) and (pointer: fine) {
    input[type=file].form-control:hover { border-color: var(--pw-accent); background-color: var(--pw-surface); }
    input[type=file].form-control:hover::file-selector-button,
    input[type=file].form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: #DCE6FD; color: var(--pw-accent); }
    input[type=file].form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background: #DCE6FD; color: var(--pw-accent); }
}
input[type=file].form-control:disabled { cursor: not-allowed; }
input[type=file].form-control:disabled::file-selector-button { background: var(--pw-pause-soft); color: var(--pw-muted); }

/* чекбоксы, радио, переключатели */
.form-check { min-height: 24px; padding-left: 28px; margin-bottom: 8px; }
.form-check .form-check-input { margin-left: -28px; }

.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1.5px solid #C3CCDA;
    background-color: var(--pw-surface);
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.form-check-input[type=checkbox] { border-radius: 6px; }

.form-check-input:checked {
    border-color: var(--pw-accent);
    background-color: var(--pw-accent);
}

.form-check-input:focus { border-color: var(--pw-accent); box-shadow: var(--pw-ring); }
.form-check-label { color: var(--pw-text); line-height: 24px; }
.form-check-input:disabled ~ .form-check-label { color: var(--pw-muted); opacity: 1; }

.form-switch { padding-left: 52px; }
.form-switch .form-check-input { width: 40px; height: 24px; margin-top: 0; margin-left: -52px; border-radius: 100px; }
.form-switch .form-check-input:checked { background-color: var(--pw-accent); }

/* чекбоксы в таблицах без обёртки form-check */
input[type=checkbox]:not(.form-check-input) {
    width: 18px;
    height: 18px;
    accent-color: var(--pw-accent);
    vertical-align: -3px;
}

/* ===================== ТАБЛИЦЫ ===================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #F7F9FD;
    margin-bottom: 24px;
    color: var(--pw-text);
    border-color: var(--pw-line);
    font-size: 15px;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 12px 12px;
    border-bottom-color: var(--pw-line);
}

.table-sm > :not(caption) > * > * { padding: 10px 10px; }

.table > thead > tr > th, .table > thead th {
    color: var(--pw-muted);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid var(--pw-line);
}

.table > thead a { color: var(--pw-muted); }
.table > thead a:hover { color: var(--pw-text); }

.table > :not(:first-child) { border-top: 0; }

.table td a:not(.btn), .grid-view td a:not(.btn) { text-decoration: none; }

/* строки-состояния: мягкая заливка + цветная метка слева вместо сплошного цвета строки */
.table > tbody > tr.table-danger > *,
.table-danger { --bs-table-bg: var(--pw-bad-soft); --bs-table-striped-bg: var(--pw-bad-soft); --bs-table-hover-bg: #FBE2E2; color: var(--pw-text); border-color: var(--pw-line); }
.table > tbody > tr.table-warning > *,
.table-warning { --bs-table-bg: var(--pw-warn-soft); --bs-table-hover-bg: #FFEDC7; color: var(--pw-text); border-color: var(--pw-line); }
.table > tbody > tr.table-secondary > *,
.table-secondary { --bs-table-bg: var(--pw-pause-soft); --bs-table-hover-bg: #E9ECF1; color: var(--pw-muted); border-color: var(--pw-line); }
.table > tbody > tr.table-success > *,
.table-success { --bs-table-bg: var(--pw-ok-soft); color: var(--pw-text); border-color: var(--pw-line); }

.table > tbody > tr.table-danger > :first-child { box-shadow: inset 3px 0 0 var(--pw-bad-bar); }
.table > tbody > tr.table-warning > :first-child { box-shadow: inset 3px 0 0 var(--pw-warn-bar); }

.table-bordered > :not(caption) > * > * { border-color: var(--pw-line); }

.grid-view .summary {
    margin-bottom: 8px;
    color: var(--pw-muted);
    font-size: 14px;
}

.grid-view .summary b { color: var(--pw-text); font-weight: 500; }
.grid-view .filters td { padding-top: 12px; padding-bottom: 12px; }
.grid-view .empty { display: block; padding: 40px 16px; color: var(--pw-muted); text-align: center; }

/* иконки-действия в последней колонке */
.action-column a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--pw-muted);
    transition: color 150ms ease, background-color 150ms ease;
}

.action-column .bi { font-size: 16px; }

/* текстовые действия («Счёт», «Акт», «Оплачен») — по ширине текста и цветом ссылки: квадрат 32 px — только для иконок */
.action-column a:not(:has(.bi)) {
    width: auto;
    padding: 0 8px;
    color: var(--pw-accent);
}

@media (hover: hover) and (pointer: fine) {
    .action-column a:hover { color: var(--pw-accent); background: var(--pw-accent-soft); }
    .action-column a[data-method="post"]:hover { color: var(--pw-bad); background: var(--pw-bad-soft); }
    .action-column a:not(:has(.bi)):hover { color: var(--pw-accent); background: var(--pw-accent-soft); }
}

/* ===================== РАЗВОРАЧИВАЕМЫЕ СОБЫТИЯ =====================
   Карточка задачи: клик по строке события раскрывает ответы агентов (tbody.task-event-selected).
   Строка показывает, что она раскрывается (шеврон справа), раскрытая — подсвечена,
   ответы агентов — ветка от события, группа закрыта линией цвета статуса. */
/* только там, где у события есть ответы агентов: на части экранов строки не раскрываются */
tbody:has(.task-event-agents) > .task-event-item { cursor: pointer; }
tbody:has(.task-event-agents) > .task-event-item > td:last-child::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round' d='M6 9l6 6 6-6'/%3e%3c/svg%3e") center / 16px no-repeat;
    transition: transform 200ms var(--ease-out);
}
.table tbody.task-event-selected { outline: 0; }
.table tbody.task-event-selected tr.task-event-item > td:last-child::after { transform: rotate(180deg); }

/* свёрнутая строка с агентами не рисует второй линии */
.table > tbody > tr > td.task-event-agents { border-bottom-width: 0; }
.table tbody.task-event-selected > tr > td.task-event-agents { border-bottom-width: 1px; }

/* раскрытая строка: мягкая подсветка; у упавших — более густой розовый */
.table tbody.task-event-selected tr.task-event-item {
    --bs-table-bg: #EEF3FC;
    --bs-table-hover-bg: #EEF3FC;
    --bs-table-color: var(--pw-text);
    --bs-table-border-color: var(--pw-line);
    color: var(--pw-text);
    border-color: var(--pw-line);
}
.table tbody.task-event-selected tr.task-event-item.table-danger { --bs-table-bg: #FADADA; --bs-table-hover-bg: #FADADA; }
/* ответы агентов — ветка: вертикальная линия от события с узлом к каждому агенту,
   группа закрывается линией цвета статуса снизу (синий — Up, красный — Down) */
.task-event-agents { --pw-branch: #9DBBFB; }
tbody:has(> tr.table-danger) .task-event-agents { --pw-branch: #F5A3A0; }
.task-event-agents .table { --bs-table-bg: var(--pw-surface); margin: 0 !important; font-size: 14px; }
.task-event-agents .table > :not(caption) > * > * { padding: 9px 12px; border-bottom-color: #EEF2F8; }
.task-event-agents .table tr:last-child > td { border-bottom-width: 0; }
.task-event-agents .table tr.text-danger td { color: var(--pw-bad) !important; }
.task-event-agents .table tr.text-danger td:first-child { color: var(--pw-text) !important; }
.task-event-agents .table td:first-child,
.task-event-agents .p-2 { position: relative; padding-left: 56px !important; color: var(--pw-text); }
.task-event-agents .p-2 { padding-top: 10px !important; padding-bottom: 10px !important; color: var(--pw-muted); font-size: 14px; }
.task-event-agents .table td:first-child::before,
.task-event-agents .p-2::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--pw-branch); }
.task-event-agents .table tr:last-child td:first-child::before,
.task-event-agents .p-2::before { bottom: 50%; }
.task-event-agents .table td:first-child::after,
.task-event-agents .p-2::after { content: ""; position: absolute; left: 35px; top: 50%; width: 12px; height: 2px; background: var(--pw-branch); }
.table tbody.task-event-selected > tr > td.task-event-agents { border-bottom: 2px solid var(--pw-branch); }

@media (hover: hover) and (pointer: fine) {
    tbody:has(.task-event-agents) > .task-event-item:hover > td:last-child::after { filter: brightness(.6); }
}
@media (prefers-reduced-motion: reduce) {
    tbody:has(.task-event-agents) > .task-event-item > td:last-child::after { transition: none; }
}

/* сортировка Yii */
a.asc:after { border-bottom-color: var(--pw-muted); }
a.desc:after { border-top-color: var(--pw-muted); }

/* ===================== ТЕГИ И СТАТУСЫ ===================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
}

.badge.rounded-pill { border-radius: 100px; }

/* мягкие теги: цвет текста = смысл, фон = тон того же цвета */
.badge.bg-success { background: var(--pw-ok-soft) !important; color: var(--pw-ok) !important; }
.badge.bg-danger { background: var(--pw-bad-soft) !important; color: var(--pw-bad) !important; }
.badge.bg-warning { background: var(--pw-warn-soft) !important; color: var(--pw-warn) !important; }
.badge.bg-secondary { background: var(--pw-pause-soft) !important; color: var(--pw-muted) !important; }
.badge.bg-info, .badge.bg-primary { background: var(--pw-accent-soft) !important; color: var(--pw-accent) !important; }
.badge.bg-light { background: var(--pw-soft) !important; color: var(--pw-text) !important; }
.badge.bg-dark { background: var(--pw-text) !important; color: #fff !important; }
.badge.text-dark { color: var(--pw-text) !important; }

/* в подсвеченных строках мягкий тег сливается с фоном строки — там он на белой подложке,
   а цвет текста тот же: одинаковый статус выглядит одинаково во всех строках */
.table-danger .badge.bg-danger, tr.table-danger .badge.bg-danger { background: var(--pw-surface) !important; color: var(--pw-bad) !important; }
.table-warning .badge.bg-warning, tr.table-warning .badge.bg-warning { background: var(--pw-surface) !important; color: var(--pw-warn) !important; }
.table-success .badge.bg-success, tr.table-success .badge.bg-success { background: var(--pw-surface) !important; color: var(--pw-ok) !important; }

/* сплошные фоны вне тегов — полосы, точки, плашки */
.bg-success:not(.badge) { background-color: var(--pw-ok-bar) !important; }
.bg-danger:not(.badge) { background-color: var(--pw-bad-bar) !important; }
.bg-warning:not(.badge) { background-color: var(--pw-warn-bar) !important; }
.bg-secondary:not(.badge) { background-color: #C9CFD9 !important; }
.bg-info:not(.badge), .bg-primary:not(.badge) { background-color: var(--pw-accent) !important; }

/* полосы доступности */
.progress {
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pw-pause-soft);
    font-size: 12px;
}

.progress-bar {
    color: #fff;
    background-color: var(--pw-accent);
    transition: width 600ms var(--ease-out);
}

.progress-bar.bg-transparent { background: transparent !important; }

/* квадратики доступности (дашборд, отчёты) */
.uptime-block { border-radius: 3px; }

/* ===================== КАРТОЧКИ И БЛОКИ ===================== */

.card {
    border: 1px solid var(--pw-line);
    border-radius: 20px;
    background: var(--pw-surface);
    overflow: hidden;
}

/* overflow: hidden держит содержимое в скруглённых углах, но обрезает выпадающие меню внутри карточки
   (выбор повтора уведомлений и т.п.) — пока меню открыто, обрезку снимаем */
.card:has(.dropdown-menu.show) { overflow: visible; }

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pw-line);
    background: transparent;
    color: var(--pw-text);
    font-weight: 500;
}

.card-header:first-child { border-radius: 20px 20px 0 0; }
.card-body { padding: 20px; }
.card-footer { padding: 16px 20px; border-top: 1px solid var(--pw-line); background: transparent; }
.card-title { font-weight: 500; }

/* таблицы внутри скруглённой карточки: крайние колонки отодвинуты от края на 24 px,
   иначе текст прижимается к углу радиусом 20 («Данные последней проверки», пакеты в подписке) */
.card .table > :not(caption) > * > *:first-child { padding-left: 24px; }
.card .table > :not(caption) > * > *:last-child { padding-right: 24px; }
.card.p-0 > .row.p-2 { padding: 14px 24px !important; }
.card.p-0 > .p-2 { padding: 12px 24px 14px !important; }  /* текстовый результат проверки без таблицы агентов */

/* шкала часов над полосой доступности (рамка со скруглением): первая подпись не прижата к углу */
.text-nowrap.border.rounded.overflow-hidden { border-radius: 8px !important; }
.text-nowrap.border.rounded.overflow-hidden > small > small:first-child { padding-left: 8px !important; }

/* мягкая подложка, как блоки лендинга */
.card.bg-light, .bg-light.rounded, .bg-light.border {
    border-color: transparent !important;
    background: var(--pw-g-soft) !important;
}

.list-group { border-radius: 16px; }
.list-group-item { padding: 14px 20px; border-color: var(--pw-line); color: var(--pw-text); }
.list-group-item.active { border-color: var(--pw-accent); background: var(--pw-accent); }
.list-group-item-action:hover { background: var(--pw-soft); }

/* плитки выбора типа контакта/задачи */
.contact-type-tile {
    border-radius: 16px !important;
    border-color: var(--pw-line) !important;
    transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out);
}

.contact-type-tile:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
    .contact-type-tile:hover { border-color: var(--pw-accent) !important; background: var(--pw-accent-soft); }
}

/* ===================== АЛЕРТЫ ===================== */

.alert {
    padding: 16px 20px;
    border: 0;
    border-radius: 16px;
    font-size: 15px;
    line-height: 22px;
}

.alert-success { background: var(--pw-ok-soft); color: #0A6E1F; }
.alert-danger { background: var(--pw-bad-soft); color: #A3262B; }
.alert-warning { background: var(--pw-warn-soft); color: #7A4A00; }
.alert-info, .alert-primary { background: var(--pw-accent-soft); color: #234C9E; }
.alert-secondary, .alert-light { background: var(--pw-soft); color: var(--pw-text); }
.alert a:not(.btn), .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert .btn-close { padding: 0; top: 12px; right: 12px; position: absolute; }
.alert-dismissible { padding-right: 56px; }

/* Плашка предпросмотра страницы состояния («Это демонстрационная страница доступна только вам»):
   мягкая розовая карточка; вместо линии под текстом — отступ 16 px, кнопки строкой: «Вернуться» слева, остальные справа. */
.alert.border-danger:not([class*="alert-"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 8px;
    padding: 20px 24px;
    border: 0;
    border-radius: 20px;
    background: var(--pw-bad-soft);
}
.alert.border-danger:not([class*="alert-"]) > .fs-4 { flex: 1 0 100%; font-size: 20px !important; line-height: 1.3; color: #B4292E !important; }
.alert.border-danger:not([class*="alert-"]) > hr { display: none; }
.alert.border-danger:not([class*="alert-"]) > .float-end { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.alert.border-danger:not([class*="alert-"]) .btn-outline-secondary { background: var(--pw-surface); border-color: transparent; }
.alert.border-danger:not([class*="alert-"]) .btn-outline-primary { background: var(--pw-surface); }

/* ===================== МЕНЮ, ОКНА, ВКЛАДКИ ===================== */

.dropdown-menu {
    min-width: 200px;
    padding: 8px;
    margin-top: 8px !important;
    border: 0;
    border-radius: 16px;
    background: var(--pw-surface);
    box-shadow: var(--pw-shadow-pop);
    font-size: 15px;
}

.dropdown-menu.show { animation: pw-pop 180ms var(--ease-out); }
.dropdown-menu-end { transform-origin: top right; }

/* Отдельные scale и translate, а не transform: transform задаёт Popper, ставя меню под кнопку, —
   анимация transform перекрывала его, и меню сначала появлялось поверх кнопки */
@keyframes pw-pop {
    from { opacity: 0; scale: .96; translate: 0 -4px; }
    to { opacity: 1; scale: 1; translate: 0 0; }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--pw-text);
    transition: background-color 150ms ease, color 150ms ease;
}

.dropdown-item:active, .dropdown-item.active {
    color: var(--pw-accent);
    background: var(--pw-accent-soft);
}

.dropdown-item-text { padding: 8px 12px; }
.dropdown-divider { margin: 6px 4px; border-top-color: var(--pw-line); opacity: 1; }
.dropdown-header { padding: 8px 12px 4px; color: var(--pw-muted); font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
    .dropdown-item:hover { color: var(--pw-text); background: var(--pw-soft); }
    .dropdown-item.active:hover { color: var(--pw-accent); background: var(--pw-accent-soft); }
}

.modal-content {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(43, 43, 43, .18);
}

.modal-header { padding: 24px 24px 8px; border-bottom: 0; }
.modal-title { font-size: 22px; line-height: 1.2; font-weight: 400; }
.modal-body { padding: 16px 24px 24px; }
.modal-footer { padding: 16px 24px 24px; border-top: 0; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .32; }
.modal.fade .modal-dialog { transform: scale(.96); transition: transform 200ms var(--ease-out); }
.modal.show .modal-dialog { transform: none; }

/* вкладки — сегментированный переключатель, как «Месяц / Год» */
.nav-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    border: 0;
    border-radius: 100px;
    background: var(--pw-soft);
}

.nav-tabs .nav-link {
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 100px;
    color: var(--pw-text);
    font-size: 15px;
    line-height: 20px;
    transition: color 150ms ease, background-color 150ms ease;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--pw-text);
    background: var(--pw-surface);
    box-shadow: 0 1px 2px rgba(43, 43, 43, .08);
}

.nav-pills .nav-link { border-radius: 100px; color: var(--pw-text); }
.nav-pills .nav-link.active { color: var(--pw-accent); background: var(--pw-accent-soft); }

@media (hover: hover) and (pointer: fine) {
    .nav-tabs .nav-link:not(.active):hover { color: var(--pw-accent); }
}

/* ===================== ПАГИНАЦИЯ ===================== */

.pagination { gap: 4px; }
.page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px !important;
    color: var(--pw-text);
    line-height: 36px;
    text-align: center;
}
.page-item.active .page-link { color: #fff; background: var(--pw-accent); }
.page-item.disabled .page-link { color: var(--pw-disabled); background: transparent; }
.page-link:focus { box-shadow: var(--pw-ring); }
@media (hover: hover) and (pointer: fine) {
    .page-link:hover { color: var(--pw-accent); background: var(--pw-soft); }
}

/* ===================== МЕЛОЧИ ===================== */

code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--pw-soft);
    color: #C2410C;
    font-size: .875em;
}

pre {
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--pw-soft);
    color: var(--pw-text);
}

pre code { padding: 0; background: none; color: inherit; }

.tooltip-inner { padding: 6px 10px; border-radius: 10px; background: var(--pw-text); font-size: 13px; }

.not-set { color: var(--pw-muted); font-style: normal; }

/* флаги стран в таблицах — аккуратные скругления */
.flag-icon { border-radius: 2px; box-shadow: 0 0 0 1px rgba(43, 43, 43, .06); }

/* страница состояния: «сердцебиение» таймера мягче */
.js-timer-heartbeat { animation-duration: 1.6s; }

/* ===================== ДВИЖЕНИЕ ===================== */

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:active, .contact-type-tile:active { transform: none !important; }
    .dropdown-menu.show { animation: none; }
    .modal.fade .modal-dialog { transform: none; transition: none; }
    .progress-bar { transition: none; }
}

/* ===================== ПЛИТКИ-КНОПКИ =====================
   Кнопки-карточки с заголовком и описанием (окно «Добавить задачу», выбор типа):
   не пилюля, а плитка 16 px, текст слева, подсветка рамкой. */
.btn.w-100.text-start,
.btn.d-block.text-start {
    display: block;
    min-height: 0;
    padding: 14px 16px !important;
    border: 1px solid var(--pw-line) !important;
    border-radius: 16px;
    background: var(--pw-surface);
    line-height: 1.3 !important;
    text-align: left;
    white-space: normal;
}

.btn.w-100.text-start h5,
.btn.d-block.text-start h5 { margin-bottom: 4px !important; font-size: 16px; line-height: 22px; font-weight: 500; }
.btn.w-100.text-start small,
.btn.d-block.text-start small { display: block; font-size: 13px; line-height: 18px; }
.btn.w-100.text-start:active,
.btn.d-block.text-start:active { transform: scale(0.98); background: var(--pw-accent-soft); }

@media (hover: hover) and (pointer: fine) {
    .btn.w-100.text-start:hover,
    .btn.d-block.text-start:hover { border-color: var(--pw-accent) !important; background: var(--pw-accent-soft); }
}

/* ===================== АККОРДЕОН (инструкции Linux / Windows) ===================== */

.accordion { border-radius: 16px; }
.accordion-item { border-color: var(--pw-line); background: var(--pw-surface); }
.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

.accordion-button {
    padding: 14px 20px;
    color: var(--pw-text);
    font-size: 16px;
    background: var(--pw-surface);
}

.accordion-button:not(.collapsed) {
    color: var(--pw-text);
    background: var(--pw-soft);
    box-shadow: inset 0 -1px 0 var(--pw-line);
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232B2B2B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    transition: transform 200ms var(--ease-out);
}

.accordion-button:focus { border-color: transparent; box-shadow: none; }
.accordion-button:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: -2px; }
.accordion-body { padding: 16px 20px 20px; }

/* ===================== ТЕЛЕФОН ===================== */

@media (max-width: 575.98px) {
    h1, .h1 { margin-bottom: 16px; }
    .btn { padding: 10px 16px; }
    .card-body { padding: 16px; }
    .modal-dialog { margin: 8px; }
    .modal-header { padding: 20px 20px 4px; }
    .modal-body { padding: 12px 20px 20px; }
    .table > :not(caption) > * > * { padding: 10px 8px; }
}

/* ===================== ПЛИТКИ ДОСТУПНОСТИ =====================
   «Последние 24 часа / неделя / месяц / квартал»: мягкая карточка лендинга,
   подпись приглушённая, значение крупно — без внутренней белой полосы. */
.border.rounded.bg-light {
    padding: 12px 12px 14px;
    border-radius: 16px !important;
}

.border.rounded.bg-light > small {
    display: block;
    color: var(--pw-muted);
    font-size: 13px;
    line-height: 18px;
}

.border.rounded.bg-light > .border-top.rounded.bg-white {
    margin-top: 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pw-text);
    font-size: 22px;
    line-height: 28px;
    font-variant-numeric: tabular-nums;
}

.border.rounded.bg-light .uptime-block { width: 10px; height: 10px; vertical-align: 2px; margin-right: 2px; border-radius: 50% !important; }

/* ===================== ДОРАБОТКИ ПО АУДИТУ ЭКРАНОВ ===================== */

/* Края шапки, контента и подвала совпадают: site.css даёт контенту и подвалу 15 px, а шапке тема — 24 px */
main > .container, .footer .container { padding-left: clamp(16px, 2.2vw, 24px); padding-right: clamp(16px, 2.2vw, 24px); }

/* Счётчики в меню — пилюли одной формы: срочные красные, остальные серые */
.navbar-nav .nav-link .badge.bg-secondary {
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    line-height: 18px;
    background: var(--pw-pause-soft) !important;
    color: var(--pw-muted) !important;
}

/* Окно выбора типа задачи: бейджи NEW/PRO не упираются в длинный заголовок */
.btn > .float-end { margin-left: 8px; }

/* Карточки-ссылки в одном ряду (разделы помощи) — одной высоты */
.row > [class*="col-"] > a.btn.w-100.text-start { height: 100%; }

/* Соседние кнопки («Сохранить» / «Отмена» и т. п.) не слипаются: к пробелу в разметке добавляем 4 px — итого 8 px,
   как между кнопками в заголовке. Группы и кнопки внутри полей остаются вплотную */
.btn + .btn:not(.btn-group > .btn):not(.input-group > .btn) { margin-left: 4px; }

/* Кнопки подвала страницы состояния видны и на пользовательском фоне (свой CSS) */
.js-fullscreen.btn-light, .js-fullscreen-exit.btn-light, .js-alert-on.btn-light, .js-alert-off.btn-light,
.d-flex.justify-content-end > .dropdown > .btn-light.dropdown-toggle {
    background: var(--pw-surface);
    box-shadow: inset 0 0 0 1px var(--pw-line);
}

/* История событий задачи: место под стрелку раскрытия есть во всех строках, включая Start/Pause без класса
   task-event-item, — колонка «Продолжительность» ровная. Вложенные строки с ответами агентов не трогаем */
table:has(.task-event-item) > tbody > tr > td:last-child:not(.task-event-agents)::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    vertical-align: -3px;
}

/* Плитки доступности без данных: приглушённый текст обычного размера вместо крупного «значения» */
.uptime-empty, .uptime-empty .not-set { font-size: 15px; font-weight: 400; color: var(--pw-muted); }

/* Неактивная кнопка массовых действий различима: тема гасит disabled до 45%, для этой кнопки этого мало */
.mass-action-btn:disabled, .mass-action-btn.disabled { opacity: .6; color: var(--pw-text); border-color: #C7D2E3; }

/* Таблицы в статьях помощи — как таблицы панели: без сетки и тёмной линии над шапкой, светлые разделители строк */
.help-page .table > :not(:first-child) { border-top: 0; }
.help-page .table-bordered > :not(caption) > * { border-width: 0; }
.help-page .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; border-color: var(--pw-line); }
.help-page .table > thead > tr > * { color: var(--pw-muted); font-weight: 500; font-size: 13px; }

/* Значок «включено / выключено» у строки списка — переключатель, заметнее мелкого чекбокса */
.bi-toggle2-on, .bi-toggle2-off { font-size: 18px; line-height: 1; vertical-align: -3px; }