/* ARKANA brand layer (14.10): токены, шапка сайдбара, полоса приложения, основная кнопка, вход. Подключается ПОСЛЕДНИМ в index.html.
   Зелёный акцент (--accent-primary) остаётся вторичным — активные пункты, значки, статусы; синий — главный цвет бренда и основных кнопок. */

:root {
  --arkan-blue-900: #0A1F44;   /* тёмно-синий лого */
  --arkan-blue-700: #152B5C;
  --arkan-blue-500: #2E4EA8;   /* акцент */
  --arkan-gold:     #D4A017;   /* золотой */
  --arkan-silver:   #B8C5D6;   /* серебристый оттенок */
  --arkan-glow-gold: 0 0 0 1px rgba(212, 160, 23, .55), 0 4px 18px rgba(212, 160, 23, .30);
}

/* ── Шапка приложения: тонкая синяя полоса ──────────────────────────────────────────────────────────────────────────── */
#app-header { position: relative; }
#app-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--arkan-blue-700); z-index: 5; pointer-events: none; }
body.login-mode #app-header::before { display: none; }

/* ── Основная кнопка: синий градиент, золотое свечение при наведении ────────────────────────────────────────────────── */
.btn--primary, .btn-primary {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%);
  color: #fff; border-color: transparent;
}
.btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, #3A5FC0 100%);
  box-shadow: var(--arkan-glow-gold), 0 1px 3px rgba(0, 0, 0, .3);
}
.btn--primary:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--arkan-gold); outline-offset: 2px; }
.btn--primary:disabled, .btn-primary:disabled { background: linear-gradient(135deg, var(--arkan-blue-700), var(--arkan-blue-500)); opacity: .5; }

/* ── Шапка бокового меню: чистый логотип на прозрачном фоне, СТАТИКА. Решение владельца 17.10: никакого свечения, блика и градиентов-оверлеев ("дешёвая казиношная анимация").
   Единственное движение — функциональный пульс: когда число дел и непрочитанных уведомлений выросло (components/brand-ping.js), логотип один раз коротко вспыхивает
   ореолом (как иконка в Dock, когда приложение зовёт внимание). При наведении — лёгкое увеличение, и всё. ───────────────────────────────────────────────────────────── */
.ak-brand--logo { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 0 12px; }
.ak-brand--logo .ak-brand__plate { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 10px 14px; background: transparent; border: 0; box-shadow: none; transition: transform 200ms ease-out; }
.ak-brand--logo:hover .ak-brand__plate { transform: scale(1.03); }
.ak-brand__metal { display: block; width: 100%; max-width: 180px; margin: 0 auto; border-radius: 14px; line-height: 0; }
.ak-brand__logo { width: 100%; max-width: 180px; height: auto; margin: 0 auto; display: block; user-select: none; }
.ak-brand--logo .ak-brand__sub { padding: 0 2px; }
/* пульс внимания: один раз, 400 мс, ореол 24 px → 0 */
.ak-brand__metal.is-ping { animation: arkan-ping 400ms ease-out 1; }
@keyframes arkan-ping { from { box-shadow: 0 0 24px rgba(79, 172, 254, .6); } to { box-shadow: 0 0 0 rgba(79, 172, 254, 0); } }
/* знак «A» для свёрнутого меню (64 px): целый логотип там нечитаем, поэтому вместо него — знак без надписи */
.ak-brand__mark-only { display: none; width: 36px; height: 36px; margin: 0 auto; object-fit: contain; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand--logo .ak-brand__plate { padding: 4px 0; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand--logo .ak-brand__metal { display: none; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand--logo .ak-brand__mark-only { display: block; }
.ak-logo-mob__mark { width: 30px; height: 30px; display: block; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .ak-brand__metal.is-ping { animation: none; }
  .ak-brand--logo .ak-brand__plate { transition: none; }
  .ak-brand--logo:hover .ak-brand__plate { transform: none; }
}

/* ── Вход ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
body.login-mode { background: var(--arkan-blue-900); }
body.login-mode .auth-root { background: linear-gradient(160deg, var(--arkan-blue-900) 0%, var(--arkan-blue-700) 100%); }
body.login-mode .auth-visual { background: transparent; border-right: 1px solid rgba(184, 197, 214, .10); }
body.login-mode .auth-panel { background: transparent; border-left: 0; flex-direction: column; gap: 22px; }
body.login-mode .auth-panel::before { display: none; }
.auth-panel__logo { display: block; width: auto; height: 104px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 8px 28px rgba(46, 78, 168, .55)); user-select: none; }
body.login-mode .auth-brand__logo { width: 44px; height: 44px; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 12px rgba(46, 78, 168, .6)); }

/* белая карточка формы (кроме экрана приветствия после входа — он остаётся тёмным): все состояния (вход, пароль, код, настройка) на светлой поверхности */
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) {
  background: #fff; border: 1px solid rgba(10, 31, 68, .08); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(2, 8, 23, .45), 0 2px 8px rgba(2, 8, 23, .18);
}
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-eyebrow { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-title { color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-desc { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-desc strong { color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label { color: #3b4a63; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label-link, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-link { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label-link:hover, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-link:hover { color: var(--arkan-blue-700); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input { background: #f5f7fb; border: 1px solid #cdd6e4; color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input::placeholder { color: #8a97ad; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input:hover { background: #fff; border-color: #9fb0cf; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input:focus { background: #fff; border-color: var(--arkan-blue-500); box-shadow: 0 0 0 3px rgba(46, 78, 168, .18); outline: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-icon, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-toggle { color: #7a889f; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-wrap:focus-within .auth-input-icon { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-toggle:hover { color: var(--arkan-blue-700); background: rgba(46, 78, 168, .08); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox span { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox input[type="checkbox"] { accent-color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-error { background: #fdecec; border-color: #f3b9b9; color: #a12a2a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn, body.login-mode .auth-btn--sso {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%); color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(21, 43, 92, .35);
}
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn:hover:not(:disabled) { box-shadow: var(--arkan-glow-gold), 0 4px 14px rgba(21, 43, 92, .35); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn--ghost { background: transparent; color: var(--arkan-blue-700); border: 1px solid #cdd6e4; box-shadow: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn--ghost:hover { background: #f0f3fa; border-color: var(--arkan-blue-500); box-shadow: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-back { color: #52617a; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-back:hover { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step { background: #d5ddeb; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step--active { background: var(--arkan-blue-500); } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step--done { background: rgba(46, 78, 168, .4); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit { background: #f5f7fb; border: 1px solid #cdd6e4; color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit:focus, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit--filled { border-color: var(--arkan-blue-500); background: #fff; box-shadow: 0 0 0 3px rgba(46, 78, 168, .15); color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-mfa-timer { color: #52617a; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-mfa-icon { background: #eaf0fb; color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) p, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) small { color: #52617a; }
body.login-mode .auth-panel__inner :focus-visible { outline: 2px solid var(--arkan-gold); outline-offset: 2px; }

/* чекбокс «Запомнить меня» на светлой карточке */
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox-label { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox-custom { background: #fff; border-color: #9fb0cf; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox:checked + .auth-checkbox-custom { background: var(--arkan-blue-500); border-color: var(--arkan-blue-500); }
/* основная кнопка входа — фирменная и в приветствии */
body.login-mode .auth-btn { background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%); color: #fff; }
body.login-mode .auth-btn:hover:not(:disabled) { box-shadow: var(--arkan-glow-gold), 0 4px 14px rgba(21, 43, 92, .35); }

body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-divider { color: #7a889f; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-divider::before, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-divider::after { background: #d5ddeb; }

@media (max-width: 900px) { .auth-panel__logo { height: 84px; } }