/* =========================
   Подключение файлов
   ========================= */

/* Base */
@import "normalize.css";
@import "variables.css";
@import "fonts.css";

/* Components */
@import "components/header.css";
@import "components/footer.css";
@import "components/sidebar.css";
@import "components/buttons.css";
@import "components/table.css";
@import "components/pagination.css";
@import "components/modal.css";
@import "components/modal-form.css";
@import "components/modal-delete.css";
@import "components/modal-service-form.css";


/* =========================
   Глобальные настройки
   ========================= */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;

  min-width: 320px;
  min-height: 100%;

  display: flex;
  flex-direction: column;

  font-family: "Inter", Arial, sans-serif;

  background-color: var(--body);
}

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

/* =========================
   Вспомогательные классы
   ========================= */

/*
  Полностью скрывает элемент.
*/
.none {
  display: none;
}

/* =========================
   Общий каркас сайта
   ========================= */

/*
  Главная обёртка приложения.
  Делит экран на sidebar и контент.
*/
.layout {
  display: flex;
  align-items: stretch;

  min-height: 100vh;
}

/*
  Универсальный контейнер.
*/
.container {
  width: 100%;
  max-width: 1920px;

  margin: 0 auto;
  padding: 0 40px;
}

/*
  Правая часть приложения.
*/
.content {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow-x: hidden;

  background-color: var(--body);
}

/*
  Основная область страницы.
*/
.main {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding: 52px 40px 0;
}

/* =========================
   Общие заголовки
   ========================= */

/*
  Основной заголовок страницы.
*/
.page-title {
  margin: 0;

  color: var(--fonts);

  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
}