/* ═══════════════════════════════════════════════════════════════
   ГОЛИБАС — общий слой оформления

   ЕДИНСТВЕННЫЙ ИСТОЧНИК. Править только здесь:
       /root/golibas-ui/ui.css
   и разнести по всем программам:
       bash /root/golibas-ui/sync.sh

   Подключается ПОСЛЕДНИМ, после собственных стилей программы.
   Иначе его правила наведения проигрывают цветным вариантам карточек
   (.stat-card.green и подобным): вес селекторов одинаковый, и решает
   порядок. Программа при необходимости перекрывает общий слой более
   весомым селектором, а не порядком.

   За образец взят AI-Auth. Здесь лежит то, что одинаково везде:
   цвета и ОТКЛИК на действия — наведение, нажатие, фокус. Внешний
   вид кнопок (форма, заливка, градиент) остаётся за программой:
   у Финансов своя система имён классов, и сведение её к общей —
   отдельная работа.
   ═══════════════════════════════════════════════════════════════ */

/* ── Цвета ──────────────────────────────────────────────────────
   Значения по умолчанию. Если программа объявляет своё, её
   объявление идёт позже и побеждает. */
:root {
  --hover: #14b8a6;                    /* отклик на курсор */
  --hover-rgb: 20, 184, 166;
  --hover-bg: rgba(20, 184, 166, .12);
  --hover-bg2: rgba(20, 184, 166, .20);
  --red: #ef4444;                      /* ошибка, удаление */
  --red-rgb: 239, 68, 68;
  --green: #10b981;                    /* успех, «в порядке» */
}

/* ── Плавность ──────────────────────────────────────────────────
   Без перехода подсветка возникает рывком и читается как подёргивание. */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-icon, .btn-link, .btn-login,
.stat-card, .hoverable, .app-tile, input, select, textarea {
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* ── Кнопки: отклик формой ──────────────────────────────────────
   Цвет подсветки задаёт сама программа (у всех он уже бирюзовый).
   Здесь только то, что одинаково при любой заливке: приподнятость
   под курсором и нажатие. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-icon:hover, .btn-link:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-icon:active, .btn-link:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ── Карточки со сводкой ────────────────────────────────────────
   «Продажи», «Закупки» и прочие плитки дашборда никак не отзывались
   и выглядели картинкой, а не частью интерфейса. Отклик тот же, что
   у часов на главной AI-Auth: спокойный фон и бирюзовая рамка. */
.stat-card:hover {
  border-color: var(--hover);
  background: var(--hover-bg);
}
/* Нажимаемая карточка ведёт себя как кнопка. */
.stat-card[onclick]:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.stat-card[onclick]:active { transform: translateY(1px); box-shadow: none; }

/* ── Прочие отзывчивые области ──────────────────────────────────
   Прозрачная рамка в покое — чтобы при наведении ничего не прыгало
   на пиксель, когда рамка появляется. */
.hoverable {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 10px;
}
.hoverable:hover { background: var(--hover-bg); border-color: var(--hover); }

/* ── Поля ввода и списки ────────────────────────────────────────
   Раньше они не отзывались нигде: понять, куда попал, можно было
   только по курсору. Цвет тот же, что у кнопок, — отклик читается
   одинаково по всей системе. */
input:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover,
textarea:not(:disabled):not([readonly]):hover {
  border-color: var(--hover);
}
input:not(:disabled):not([readonly]):focus,
select:not(:disabled):focus,
textarea:not(:disabled):not([readonly]):focus {
  outline: none;
  border-color: var(--hover);
  box-shadow: 0 0 0 3px rgba(var(--hover-rgb), .18);
}
/* Заблокированное поле честно показывает, что его не тронуть. */
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .8; }


/* ── ЕДИНЫЙ ВИД КНОПОК (образец — AI-Auth) ──────────────────────
   До этого слой задавал только отклик, а форму и заливку каждая
   программа рисовала сама: у Финансов кнопки были синие 13px/600,
   у остальных — сине-серый градиент. Здесь — один вид на всех.

   Роли:
     .btn-primary   — главное действие: серый градиент, белый текст
     .btn-secondary — обычное действие: спокойная плашка (как .btn без
                      уточнения)
     .btn-danger    — опасное действие: всегда красное, и под курсором
     .btn-success   — подтверждение: зелёное
   Специальные кнопки программ (.btn-logout, .btn.act-add, .row-actions
   .btn и т. п.) заданы более весомыми селекторами и остаются как были. */

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent; border-radius: 9px;
  font-family: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer;
}
/* Без уточнения кнопка — обычная. */
.btn, .btn-secondary {
  background: var(--card2, var(--blue-light, #202020));
  border-color: var(--border, #333333);
  color: var(--text, #E8E8E8);
}
/* Главное действие. Цвета прописаны литералами намеренно: это и есть
   один вид на все программы (в Auth и восьми программах --accent те же
   #777/#999, а у Финансов свой — литерал снимает расхождение). */
.btn-primary {
  background: linear-gradient(135deg, #777777, #999999);
  border-color: transparent;
  color: #fff;
}
.btn-danger {
  background: rgba(var(--red-rgb), .12);
  border-color: rgba(var(--red-rgb), .3);
  color: var(--red);
}
.btn-success {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .3);
  color: var(--green);
}
.btn-sm { padding: 6px 12px; font-size: .78rem; }
.btn-icon {
  padding: 8px; border-radius: 8px;
  background: var(--card2, var(--blue-light, #202020));
  border: 1px solid var(--border, #333333);
  color: var(--muted, #888888);
  cursor: pointer;
}

/* Наведение: бирюза, как во всей системе. У главной кнопки гасим
   градиент — под ним подсветки не видно. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-icon:hover {
  background-image: none;
  background-color: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
}
.btn:active, .btn-primary:active, .btn-secondary:active { background-color: var(--hover-bg2); }
/* Опасное и подтверждающее остаются в своём цвете и под курсором:
   удаление не должно выглядеть безобидной кнопкой. */
.btn-danger:hover {
  background: rgba(var(--red-rgb), .22);
  border-color: rgba(var(--red-rgb), .5);
  color: var(--red);
}
.btn-danger:active { background: rgba(var(--red-rgb), .3); }
.btn-success:hover {
  background: rgba(16, 185, 129, .22);
  border-color: var(--green);
  color: var(--green);
}


/* ── СПЕЦ-КНОПКИ И СТРАНИЦА ВХОДА ───────────────────────────────
   Кнопка входа — та же главная кнопка, только во всю ширину; ширину
   и поля ей оставляет страница, здесь — вид и отклик. */
.btn-login {
  background: linear-gradient(135deg, #777777, #999999);
  color: #fff;
  border: 1px solid transparent;
}
.btn-login:hover {
  background-image: none;
  background-color: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
  opacity: 1;               /* у страниц входа был свой ховер прозрачностью */
}
.btn-login:active { background-color: var(--hover-bg2); }

/* Кнопки в строках таблиц носили серую плашку с белым ховером —
   единственное место, выбивавшееся из системы. Теперь как у всех. */
.row-actions .btn {
  background: var(--card2, var(--blue-light, #202020));
  border-color: var(--border, #333333);
  color: var(--text, #E8E8E8);
}
.row-actions .btn:hover {
  background: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
}

/* «Выйти» — опасное действие, при наведении оно везде краснеет
   одинаково. Основной цвет кнопки задаёт программа: в шапке Auth она
   красная всегда, в боковых меню программ — приглушённая до наведения. */
.btn-logout:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(var(--red-rgb), .08);
}
.btn-logout:active { background: rgba(var(--red-rgb), .16); }


/* Заголовок панели-превью — кнопка: ведёт в свой раздел. Отрицательные
   поля возвращают текст на прежнее место, чтобы заголовки-кнопки и
   заголовки-надписи стояли по одной линии. */
.panel-title-btn {
  display: inline-block;
  padding: 3px 9px; margin: -3px -9px;
  border-radius: 8px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.panel-title-btn:hover { background: var(--hover-bg); color: var(--hover); }

/* ── Значок состояния подключения ───────────────────────────────
   Один вид на все программы: зелёный «Подключён», красный «Не подключён»
   (или «Ошибка», когда доступ есть, а сервис не отвечает).
   Использование: <span class="st-badge st-on">✅ Подключён</span> */
.st-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700;
  padding: 2px 10px; border-radius: 99px;
  white-space: nowrap; vertical-align: middle;
}
.st-on  { background: rgba(16,185,129,.15); border: 1px solid var(--green, #10b981); color: var(--green, #10b981); }
.st-off { background: rgba(239,68,68,.12);  border: 1px solid var(--red, #ef4444);   color: var(--red, #ef4444); }

/* ── Работа с клавиатуры ────────────────────────────────────────
   :focus-visible не появляется от щелчка мышью, поэтому обычную
   работу эта обводка не загромождает. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .btn-icon:focus-visible, .btn-link:focus-visible, .btn-login:focus-visible,
.stat-card[onclick]:focus-visible, .app-tile:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 2px;
}


/* ── Роль в сайдбаре — бейджем, как «Роль компании» в AI-Auth (29.08.2026).
   Цвета те же: Владелец янтарный, Администратор зелёный, Директор сиреневый. */
.user-role-badge { display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.68rem; font-weight:700; border:1px solid var(--border); margin-top:3px; }
.user-role-badge.role-owner    { background:rgba(245,158,11,.18); border-color:#f59e0b; color:#f59e0b; }
.user-role-badge.role-admin    { background:rgba(16,185,129,.18); border-color:#10b981; color:#10b981; }
.user-role-badge.role-director { background:rgba(176,124,199,.18); border-color:#b07cc7; color:#b07cc7; }

/* ── Название программы в сайдбаре — кнопкой в стиле кнопок AI-Auth. */
.app-home-btn { display:block; width:100%; padding:10px 12px; background:var(--card);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-weight:700; font-size:.95rem; cursor:pointer; text-align:center;
  font-family:inherit; transition:background-color .15s, border-color .15s; }
.app-home-btn:hover { background:rgba(20,184,166,.12); border-color:#14b8a6; }


/* ── Единая гамма кнопок-действий (29.08.2026). Одно правило на все
   программы: зелёный — получение/создание, красный — удаление и всё
   необратимое. Цвета утверждённые: #10b981 и #ef4444. !important нужен —
   этот файл грузится последним и обязан перебить точечные inline-стили. */
.btn-green { background:#10b981 !important; color:#fff !important; border:none !important; text-decoration:none !important; }
.btn-red   { background:#ef4444 !important; color:#fff !important; border:none !important; }
.btn-green:hover, .btn-red:hover { filter:brightness(1.12); }