/* =====================================================================
   Внешний портал клиента — фирменное оформление CALS.

   Источник решений: apl_styles/ (brandbook + правила design-system.md):
   основной #173B8C, акцент #4D9FD8, самый тёмный #0B1F33, золото #D99A1E
   дозированно; IBM Plex Sans в интерфейсе и IBM Plex Mono — только для
   идентификаторов, дат, размеров и прочей компактной метаинформации;
   радиусы 2–6 px, тонкие рамки, сдержанные тени, контейнер 1240 px.

   Никакого «глянца»: без градиентных CTA, крупных скруглений и декоративных
   пятен — так требует бренд-система, и это же снимает замечание коллег про
   «огромные окна» на портале.

   Подключается хуком `web_include_css` (см. hooks.py) — то есть на всех
   website-страницах: кабинет, дистрибутивы, документация, профиль, вход.
   Оформление Helpdesk-SPA живёт отдельно, в оверлее.
   ===================================================================== */

/* ── база ────────────────────────────────────────────────────────── */
body {
  font-family: var(--apl-font);
  color: var(--apl-ink);
  background: var(--apl-bg-soft);
  -webkit-font-smoothing: antialiased;
}
body a { color: var(--apl-accent-700); }
body a:hover { color: var(--apl-primary); }
:focus-visible { outline: 2px solid var(--apl-accent); outline-offset: 2px; }

h1, h2, h3, h4 { color: var(--apl-ink); letter-spacing: -.01em; font-weight: 600; }

/* контейнер страницы — «бумага» на сером фоне */
.page_content > .container,
main > .container { max-width: var(--apl-container); }

/* ── верхняя плашка портала (её рисует head_html) ────────────────── */
#apl-banner {
  /* Плашка ВСЕГДА фирменно-тёмная под белым текстом: на тёмной теме
     `--apl-primary` осветляется (это цвет текста), и белым по светло-синему
     получалось 3:1. */
  background: var(--apl-primary-fill) !important;
  color: #fff !important;
  font-family: var(--apl-font);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ── навбар сайта ────────────────────────────────────────────────── */
.navbar {
  background: var(--c-bg, #fff) !important;
  border-bottom: 1px solid var(--apl-line);
  box-shadow: none;
}
.navbar .navbar-brand img { height: 30px; width: auto; }

/* ── меню кабинета (левый список разделов) ───────────────────────── */
.web-sidebar .sidebar-items a,
.web-sidebar a.list-item,
aside .list-group-item {
  border-radius: var(--apl-r-sm);
  color: var(--apl-ink-2) !important;
  font-size: var(--apl-fs-sm);
}
.web-sidebar .sidebar-items a:hover,
aside .list-group-item:hover { background: var(--apl-bg-tint-2); color: var(--apl-primary) !important; }

/* ── карточки/панели ─────────────────────────────────────────────── */
.card, .web-card, .page-card {
  border: 1px solid var(--apl-line) !important;
  border-radius: var(--apl-r-sm) !important;
  box-shadow: var(--apl-sh-1) !important;
  background: var(--c-bg, #fff);
}
.card-title { font-size: var(--apl-fs-h2); font-weight: 600; }

/* ── кнопки ──────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--apl-r-sm);
  font-family: var(--apl-font);
  font-weight: 600;
  font-size: var(--apl-fs-sm);
  letter-spacing: .01em;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--apl-primary) !important;
  border-color: var(--apl-primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--apl-primary-700) !important; border-color: var(--apl-primary-700) !important; }
.btn-default, .btn-secondary {
  background: var(--c-bg, #fff) !important;
  border: 1px solid var(--apl-line) !important;
  color: var(--apl-primary) !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--apl-bg-tint-2) !important; }

/* ── формы ───────────────────────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  border-radius: var(--apl-r-sm);
  border: 1px solid var(--apl-line);
  font-family: var(--apl-font);
  color: var(--apl-ink);
}
.form-control:focus { border-color: var(--apl-accent); box-shadow: 0 0 0 3px rgba(77,159,216,.16); }
label, .control-label { color: var(--apl-ink-2); font-weight: 600; font-size: var(--apl-fs-sm); }

/* ── сообщения ───────────────────────────────────────────────────── */
.alert { border-radius: var(--apl-r-sm); border-width: 1px; font-size: var(--apl-fs-sm); }
.alert-info { background: var(--apl-bg-tint-2); border-color: var(--apl-line); color: var(--apl-ink-2); }
.alert-warning { background: #FDF8EE; border-color: var(--apl-gold); color: #8A6008; }
.alert-danger { background: #FBEDED; border-color: var(--apl-danger); color: var(--apl-danger); }

/* ── компактная метаинформация — моноширинным, как требует бренд ── */
.apl-dist-size, .apl-dist-code, .apl-mp-table td.name small,
time, code { font-family: var(--apl-mono); }

/* ── экраны входа и смены пароля ─────────────────────────────────── */
.page-card {
  border-radius: var(--apl-r-md) !important;
  box-shadow: var(--apl-sh-2) !important;
}
.page-card .btn-primary { width: 100%; }
/* Логотип со словами внутри: на штатных 32 px надписи не читаются.
   ⚠️ В теме Frappe ограничение задано как `max-height: 32px` (не `height`),
   поэтому один только `height` ничего не менял — картинка всё равно
   упиралась в потолок. Переопределяем ИМЕННО max-height. */
html body .page-card-head img.app-logo,
html body img.app-logo {
  max-height: none !important;
  height: 64px !important; width: auto !important; max-width: 100%;
  margin-bottom: var(--apl-s3);
}
/* ⚠️ кнопка входа в шаблоне Frappe помечена как `btn-default` (а не primary) —
   без этого правила основное действие экрана выглядит второстепенным */
.page-card .btn-login {
  background: var(--apl-primary) !important;
  border-color: var(--apl-primary) !important;
  color: #fff !important;
}
.page-card .btn-login:hover { background: var(--apl-primary-700) !important; }

/* ── подвал ──────────────────────────────────────────────────────── */
.web-footer, footer.web-footer {
  background: var(--apl-primary-deep);
  color: var(--apl-on-dark-muted);
  border-top: 0;
}
.web-footer a { color: var(--apl-on-dark-muted) !important; }
.web-footer a:hover { color: #fff !important; }

/* ── адаптив: таблицы и длинные имена файлов ─────────────────────── */
@media (max-width: 640px) {
  .apl-dist-list li { flex-wrap: wrap; }
  .apl-dist-size { margin-left: 0; }
}

/* режим просмотра сотрудником ТП: он проверяет ссылку, отправленную клиенту */
.apl-dist-note--staff { background: var(--apl-bg-tint-2); color: var(--apl-primary);
  border: 1px solid var(--apl-line); border-left: 3px solid var(--apl-gold);
  border-radius: var(--apl-r-sm); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13.5px; }