/* base.css — основа: сброс стилей браузера, шрифт, полосы прокрутки
   и правила, какой экран показывать. */

/* Убираем отступы браузера по умолчанию; ширина считается вместе с рамкой */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  color-scheme: light; /* цвета встроенных элементов браузера (полосы прокрутки, поля) */
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* Тонкие полосы прокрутки в цвет темы */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-active) transparent;
}

/* Кнопки и поля берут шрифт и цвет страницы, а не свои браузерные */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Атрибут hidden всегда прячет элемент, даже если в CSS ему задан display */
[hidden] {
  display: none !important;
}

/* Вся страница — по центру и не шире --max-w */
.app {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Вход или приложение — решает класс .logged-in на <html>.
   Его ставит js/theme.js в <head> ещё до отрисовки, поэтому при обновлении ничего не мигает. */
.app-shell,
.logged-in #screen-auth {
  display: none;
}

.logged-in .app-shell {
  display: block;
}

/* Экраны приложения: виден только активный (.is-active).
   Шапка + экран = ровно высота окна, поэтому футер оказывается ниже
   и появляется, только если прокрутить страницу вниз. */
.screen {
  display: none;
  min-height: calc(100vh - var(--topbar-h));
}

.screen.is-active {
  display: block;
}

/* Иконки (svg) */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* В светлой теме на кнопке темы показываем солнце, в тёмной — луну */
[data-theme="light"] .icon--moon,
[data-theme="dark"] .icon--sun {
  display: none;
}

/* Мелкий серый текст */
.muted {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Текст, похожий на ссылку (например, имя в таблице) */
.link {
  color: var(--accent);
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}