/* Сайты и окружения проекта — стили модуля вкладки «Сайты и окружения».
 *
 * Подключается рядом с cabinet-projects.css и только дополняет его: каркас
 * (таблицы, формы, модалки, пустые состояния) остаётся на классах pw-*, здесь
 * всё своё — префикс pws-.
 *
 * Темы: ни одного литерального фона каркаса — только переменные кабинета
 * (--card, --border, --bg, --hover, --text, --muted, --accent, --danger,
 * --radius). Поэтому светлая и тёмная темы получаются сами.
 *
 * Вид: реестр адресов — не «карточка отчёта». Окружения идут плитками внутри
 * приложения; статус сайта и статус агента — две независимые метки, а не одно
 * «ок»; бейдж окружения (DEV/DEMO/STAGING/PROD) — цветом, но не только им.
 */

/* ── Бейдж окружения ──────────────────────────────────────────────────── */
.pws-badge {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.7;
    color: var(--muted);
}
.pws-badge-dev { color: #2f7a4d; border-color: rgba(47, 122, 77, .40); }
.pws-badge-demo { color: #2f5f9e; border-color: rgba(47, 95, 158, .40); }
.pws-badge-staging { color: #9a6b12; border-color: rgba(154, 107, 18, .40); }
.pws-badge-prod { color: #b23b36; border-color: rgba(200, 60, 55, .40); }

/* ── Статусы сайта и агента: словами, цвет — подкрепление ─────────────── */
.pws-state {
    display: inline-block;
    margin: 0 8px 0 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    border: 1px solid var(--border);
}
.pws-state-up { color: #1d7a4b; border-color: rgba(38, 145, 90, .35); }
.pws-state-down { color: #b23b36; border-color: rgba(200, 60, 55, .35); }
.pws-state-unknown { color: var(--muted); }

/* ── Приложение ───────────────────────────────────────────────────────── */
.pws-app { margin-top: 14px; }
.pws-app-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pws-app-name { font-size: 15px; font-weight: 600; }
.pws-app-head > button { margin-left: auto; }
.pws-app-desc { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pws-envs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

/* ── Карточка окружения ───────────────────────────────────────────────── */
.pws-env {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pws-env-head { display: flex; align-items: center; gap: 8px; }
.pws-env-title { font-weight: 600; font-size: 13.5px; }
.pws-star {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    padding: 2px 4px;
}
.pws-star.on { color: #d8a72c; }
.pws-env-url a { font-size: 12.5px; word-break: break-all; }
.pws-env-domains { font-size: 11.5px; color: var(--muted); }
.pws-env-domains a { color: var(--accent); margin-right: 8px; word-break: break-all; }
.pws-env-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 10px;
    font-size: 12px;
}
.pws-env-k { color: var(--muted); }
.pws-env-v { word-break: break-word; }
.pws-env-status { font-size: 12px; }
.pws-env-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ── Открытие адреса и выбор кандидатов ───────────────────────────────── */
.pws-resolve { margin-top: 12px; }
.pws-resolve-row { display: flex; gap: 8px; margin: 8px 0; }
.pws-resolve-row .input { flex: 1 1 auto; }
.pws-cands { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pws-cand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    cursor: pointer;
    font-size: 12.5px;
}
.pws-cand:hover { background: var(--hover); }
.pws-cand.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── Узкие экраны: карточка окружения остаётся читаемой ───────────────── */
@media (max-width: 760px) {
    .pws-envs { grid-template-columns: 1fr; }
    .pws-env-grid { grid-template-columns: 1fr; }
    .pws-resolve-row { flex-direction: column; }
}