/* Единые токены и компоненты интерфейса в духе КК (docs/ui-audit.md, разделы 4 и «Сделано»).
   Подключается из style.css (@import), поэтому есть во всех кадрах main/battle/info/logs.
   Классические экраны не меняются, пока в них не использован класс kk-*; исключения (ссылки, красные ошибки,
   мелкие кнопки) описаны в ui-audit.md. */
:root {
  --kk-bg: #DEDEDE; --kk-surface: #E2E0E0; --kk-surface-2: #D5D5D5; --kk-surface-3: #F2F0F0;
  --kk-head: #A5A5A5; --kk-tab: #C8C8C8; --kk-border: #A5A5A5; --kk-border-input: #B0B0B0;
  --kk-text: #222222; --kk-text-muted: #606060; --kk-input-text: #191970;
  --kk-link: #003388; --kk-link-hover: #0066FF; --kk-link-active: #6F0000;
  --kk-title: #8F0000; --kk-title-2: #4F0000; --kk-legend: #770D05;
  --kk-error: #B00000; --kk-success: #007000; --kk-warn: #7A5200; --kk-ekr: #339900;
  --kk-dark: #504F4C; --kk-dark-hover: #393937; --kk-dark-text: #DFDFDF; --kk-dark-border: #9A9996;
  --kk-win: #DDD5BF; --kk-win-title: #B1A993; --kk-win-border: #3B3326;
  --kk-hint: #FFF6DD; --kk-hint-item: #FFFFCC; --kk-hint-panel: #CFCFCF;
  --kk-font: Verdana, Arial, Helvetica, Tahoma, sans-serif;
}

/* --- кнопки: .kk-btn (обычная), .kk-btn-dark (переходы, как .btn КК), .kk-btn-primary (главное действие) --- */
.kk-btn, .kk-btn-primary {display: inline-block; box-sizing: border-box; min-height: 20px; margin: 1px 2px; padding: 2px 10px; vertical-align: middle;
  font: 9pt/1.2 var(--kk-font); color: #222222; background: #F4F4F4; border: 1px solid #B8B8B8; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap;}
.kk-btn:hover, .kk-btn-primary:hover {background: #FFFFFF; border-color: #8F8F8F; color: #000000;}
.kk-btn:active, .kk-btn-primary:active {background: #E6E6E6; box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}
.kk-btn-primary {font-weight: bold; border-color: #8F0000; color: #6F0000;}
.kk-btn-dark {display: inline-block; box-sizing: border-box; min-height: 20px; margin: 1px 2px; padding: 2px 10px; vertical-align: middle;
  font: 12px/1.2 var(--kk-font); color: var(--kk-dark-text); background: var(--kk-dark); border: 1px double var(--kk-dark-border); cursor: pointer; text-decoration: none;}
.kk-btn-dark:hover {background: var(--kk-dark-hover); color: #FFFFFF;}
.kk-btn[disabled], .kk-btn-primary[disabled], .kk-btn-dark[disabled], .kk-btn.off {color: #8A8A8A; background: #ECECEC; border-color: #C8C8C8; box-shadow: none; cursor: default;}
.kk-btn-dark[disabled] {background: #7A7976; color: #C8C8C8;}
.kk-btn.busy, .kk-btn-primary.busy, .kk-btn-dark.busy {cursor: progress; opacity: .7;}
.kk-btn:focus-visible, .kk-btn-primary:focus-visible, .kk-btn-dark:focus-visible, .kk-tabs a:focus-visible, a:focus-visible {outline: 1px dotted var(--kk-link); outline-offset: 1px;}

/* --- вкладки --- */
.kk-tabs {margin: 0 0 6px 0; border-bottom: 1px solid var(--kk-border); line-height: 20px;}
.kk-tabs a, .kk-tabs a:visited {display: inline-block; margin: 0 2px -1px 0; padding: 2px 10px; background: var(--kk-tab); border: 1px solid var(--kk-border);
  color: var(--kk-link); font-weight: bold; text-decoration: none; white-space: nowrap;}
.kk-tabs a:hover {background: #D6D6D6; color: var(--kk-link-hover);}
.kk-tabs a.on, .kk-tabs a.on:hover {background: var(--kk-surface); border-bottom-color: var(--kk-surface); color: #000000; cursor: default;}

/* --- окно (как windowsmf КК) --- */
.kk-shade {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 4999; background: rgba(0,0,0,.15);}
.kk-win {position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 5000; box-sizing: border-box; width: 360px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 20px); overflow: auto; background: var(--kk-win); border: 3px double var(--kk-win-border); box-shadow: 2px 2px 6px #555; text-align: left; font: 10pt var(--kk-font); color: #222222;}
.kk-win-t {padding: 4px 26px 4px 8px; background: var(--kk-win-title); font-weight: bold; font-size: 10pt; position: relative;}
.kk-win-x {position: absolute; right: 6px; top: 2px; color: #990000; font-weight: bold; font-size: 12pt; text-decoration: none; cursor: pointer; line-height: 18px;}
.kk-win-x:hover {color: #FF0000;}
.kk-win-b {padding: 8px 10px;}
.kk-win-b label {display: block; margin: 4px 0 2px;}
.kk-win-b input[type=text], .kk-win-b input[type=number], .kk-win-b input[type=password], .kk-win-b textarea {box-sizing: border-box; width: 100%;}
.kk-win-f {padding: 4px 10px 10px; text-align: center;}
.kk-win-f .kk-btn, .kk-win-f .kk-btn-primary {min-width: 90px; margin: 0 6px;}
.kk-win .kk-msg {margin: 4px 0 0;}

/* --- сообщения: одна строка под заголовком --- */
.kk-msg {display: block; margin: 2px 0 6px; font-weight: bold;}
.kk-msg:empty {display: none;}
.kk-msg.err, font#error {color: var(--kk-error);}
.kk-msg.ok {color: var(--kk-success);}
.kk-msg.note {color: var(--kk-warn);}
/* красный КК (#FF0000, контраст 3:1 на сером) - темнее, тот же оттенок (ui-audit.md P2-08) */
font[color="red" i], font[color="#ff0000" i], font[color="#f00" i] {color: #C00000;}
font[color="green" i] {color: #007000;}

/* --- таблица, пустое состояние, подсказки --- */
.kk-table {border-collapse: collapse; border: 1px solid var(--kk-border);}
.kk-table th {background: var(--kk-head); font-weight: bold; text-align: center; padding: 2px 6px;}
.kk-table td {padding: 2px 6px; background: var(--kk-surface);}
.kk-table tr:nth-child(even) td {background: var(--kk-surface-2);}
.kk-empty {padding: 6px; text-align: center; font-style: italic; color: var(--kk-text-muted);}
.kk-note {font-size: 8pt; color: var(--kk-text-muted); font-weight: normal;}
.kk-hint {position: absolute; z-index: 5001; max-width: 300px; padding: 4px 8px; background: var(--kk-hint); border: 1px solid var(--kk-border); border-radius: 5px; box-shadow: 0 0 1px #888; font-size: 8pt;}

/* ---------- кнопки удобного размера везде (отзыв владельца 29.09: «мелкие кнопки наверху», docs/ui-audit.md раздел 9) ----------
   Было: правило КК «input {10px MS Sans Serif}» - кнопки 15px высотой. Стало: 12px Verdana, от 26px, заметные hover/active/disabled.
   Тёмные .btn/.btn2 и синеватая «Подсказка» (.help) - того же размера, свой цвет. Телефон (mobile.css, html.mb-*) - свои размеры. */
input[type=button], input[type=submit], input[type=reset], button {
  box-sizing: border-box; min-height: 26px; margin: 1px 1px 2px; padding: 4px 12px; vertical-align: middle;
  font: 12px/1.2 Verdana, Tahoma, Arial, sans-serif; color: #222222; background: #F4F4F4; border: 1px solid #A5A5A5; border-radius: 3px; cursor: pointer;}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover {background: #FFFFFF; border-color: #7F7F7F; color: #000000;}
input[type=button]:active, input[type=submit]:active, button:active {background: #E2E0E0; box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}
input[type=button][disabled], input[type=submit][disabled], button[disabled],
input[type=button][disabled]:hover, input[type=submit][disabled]:hover, button[disabled]:hover {background: #ECECEC; color: #8A8A8A; border-color: #C8C8C8; box-shadow: none; cursor: default;}
input.btn, input.btn2, button.btn, button.btn2 {background: #504F4C; color: #DFDFDF; border: 1px double #9A9996; border-radius: 0;}
input.btn:hover, input.btn2:hover, button.btn:hover, button.btn2:hover {background: #393937; color: #FFFFFF; border-color: #9A9996;}
input.btn[disabled], input.btn2[disabled], button.btn[disabled] {background: #7A7976; color: #C8C8C8;}
input.help {background: #A9AFC0; border-color: #8A93AF;}
input.help:hover {background: #8A93AF; color: #000000;}
input.nonactive {opacity: .45;}
select {font: 12px Verdana, Tahoma, Arial, sans-serif; min-height: 22px;}
input[type=text], input[type=password], input[type=number], input[type=date], textarea {font: 12px Verdana, Tahoma, Arial, sans-serif;}
.kk-btn, .kk-btn-primary, .kk-btn-dark, .ks-btn, .wm-btn {min-height: 26px; padding: 4px 12px; font-size: 12px;}

/* ---------- инвентарь: ряд кнопок, вкладки в одну строку, шапка рюкзака ---------- */
.inv-top {padding: 2px 0 4px;}
.inv-top input {margin: 1px 0 2px 2px;}
table.inv-tabs {table-layout: auto;}
table.inv-tabs td {white-space: nowrap; padding: 5px 4px; border-right: 1px solid #C0BEBE;}
table.inv-tabs td:last-child {border-right: 0;}
table.inv-tabs td a {font-size: 10pt;}
table.inv-tabs td[bgcolor="#a5a5a5" i] a {color: #000000;}
table.inv-tabs td:not([bgcolor="#a5a5a5" i]):hover {background: #C8C8C8;}
.inv-packh {display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; padding: 3px 6px;}
.inv-packh #inv_group_link {font-size: 9pt; white-space: nowrap;}

/* ---------- карточка вещи: левая колонка одной ширины, действия столбиком, «выбросить» - в углу (отзыв «а это как назвать?») ---------- */
td.it-cell {position: relative; vertical-align: middle; padding: 8px 4px;}
td.it-cell.it-inv {width: 150px; min-width: 150px; max-width: 150px;}
.it-acts {display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 6px;}
.it-acts > a.nick {display: block; box-sizing: border-box; min-width: 110px; padding: 2px 8px; font-size: 9pt; line-height: 16px; text-align: center;
  background: #E2E0E0; border: 1px solid #A5A5A5; border-radius: 3px;}
.it-acts > a.nick:hover {background: #F4F4F4; border-color: #7F7F7F;}
.it-acts > a.it-drop {position: absolute; top: 4px; right: 4px; padding: 2px; line-height: 0;}
.it-acts > a.it-drop:hover {background: #F4F4F4; border-radius: 3px;}
/* улицы: строка переходов под картой не шире кадра, переносится (при узком кадре карта уменьшается - scripts/kk.js kkFitRooms) */
html:not(.mb) .cp_links {width: auto; max-width: 780px; margin-left: auto;}