@import "./reset.css";
@import "./fonts.css";
@import "./tailwind.css";

:root {
  /*белые оттенки*/
  --color-light-50: #ffffff;
  /*серые оттенки*/
  --color-gray-50: #f5f7fa;
  --color-gray-100: #f0f1f5;
  --color-gray-200: #e0e5eb;
  --color-gray-300: #606771;
  --color-gray-400: #757f92;
  --color-gray-500: #d2d6e1;
  --color-gray-600: #bfc7d4;
  --color-gray-700: #d5dce5;
  --color-gray-800: #373e4e;
  --color-gray-850: #525862;
  --color-gray-860: #adb4c0;
  --color-gray-870: #efefef;
  --color-gray-875: #d8e1eb;
  --color-gray-900: #222631;

  /*черные оттенки*/
  --color-dark-50: #0a0f15;
  --color-dark-100: #020617;
  --color-dark-200: #2c2f36;
  --color-dark-300: #181a1e;
  --color-dark-400: #767e8b;
  --color-dark-500: #5a5f68;
  --color-dark-600: #41464e;
  --color-dark-700: #3a3f46;
  --color-dark-800: #2a2f37;
  --color-dark-810: #3b3b3b;
  --color-dark-900: #000000;

  /*синие оттенки*/
  --color-blue-50: #d7efff;
  --color-blue-100: #396df0;
  --color-blue-200: #c5e6fd;
  --color-blue-300: #2e447b;

  /* зеленые */
  --color-green-50: #28c76f;
  --color-green-100: #217e1d;
  --color-green-200: #38db2f;
  --color-green-300: #c0f8c6;
  --color-green-400: #32ae2c;
  --color-green-500: #3d6e42;
  --color-green-600: #f0fbf1;

  /* красные */
  --color-red-50: #ea4335;
  --color-red-100: #ffc8c3;
  --color-red-200: #b42828;
  --color-red-300: #eb4335;
  --color-red-400: #733732;
  --color-red-500: #ff5b5b;

  /*разноцветные*/
  --color-orange-50: #f4b400;
  --color-yellow: #facc15;

  /*----------------------------------------------------------------------*/

  /* Фон и поверхности */
  --color-bg-primary: var(--color-light-50);
  --color-bg-primary-hover: var(--color-gray-50);
  --color-bg-primary-2: var(--color-light-50);
  --color-bg-primary-3: var(--color-light-50);
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-secondary-2: var(--color-gray-100);
  --color-bg-secondary-3: var(--color-gray-100);
  --color-bg-gray: var(--color-gray-200);
  --color-bg-gray-2: var(--color-gray-50);
  --color-bg-gray-3: var(--color-gray-200);
  --color-bg-gray-4: var(--color-gray-100);
  --color-bg-gray-5: var(--color-gray-50);
  --color-bg-gray-6: var(--color-dark-700);
  --color-bg-gray-7: var(--color-gray-600);
  --color-bg-gray-8: var(--color-gray-200);
  --color-bg-dark: var(--color-gray-900);
  --color-bg-disabled: var(--color-gray-500);

  /* Текст */
  --color-text-primary: var(--color-dark-900);
  --color-text-primary-2: var(--color-dark-100);
  --color-text-primary-3: var(--color-dark-810);
  --color-text-light: var(--color-light-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-secondary-2: var(--color-gray-800);
  --color-text-on-secondary: var(--color-gray-400);
  --color-text-on-green: var(--color-light-50);
  --color-text-title: var(--color-gray-900);

  /*Border*/
  --border: var(--color-gray-600);
  --border-light: var(--color-gray-875);

  /* Separator */
  --separator: var(--color-gray-100);

  /* Placeholder */
  --placeholder: var(--color-gray-300);

  /* Toggle */
  --toggle-turnoff: var(--color-gray-600);
  --toggle-green: var(--color-green-50);
  --toggle-orange: var(--color-orange-50);
  --toggle-navy: var(--color-blue-100);
  --toggle-circle: var(--color-light-50);

  /* transition time */
  --transition-time: 0.3s;

  /* border-radius */
  --border-radius: 16px;

  /* header height */
  --header-height: 64px;
  --mobile-header-height: 52px;

  --mobile-menu-height: 93px;

  /* profile state */
  --profile-nav-display: none;
  --profile-page-display: block;

  /* price */
  --price: var(--color-green-100);

  /* icon colors */
  --icon-dark: var(--color-gray-800);

  /* badges */
  --badge-blue-bg: var(--color-blue-50);
  --badge-green-bg: var(--color-green-300);
  --badge-red-bg: var(--color-red-100);

  /* overlay */
  --overlay-bg: rgba(0, 0, 0, 0.5);

  --padding-top: calc(var(--header-height) + 28px);
  --padding-bottom: 30px;
}

.dark {
  --color-bg-secondary: var(--color-dark-300);
  --color-bg-secondary-2: var(--color-dark-800);
  --color-bg-secondary-3: var(--color-dark-600);
  --color-bg-primary: var(--color-dark-200);
  --color-bg-primary-hover: var(--color-gray-900);
  --color-bg-primary-2: var(--color-dark-300);
  --color-bg-primary-3: var(--color-dark-600);
  --color-bg-dark: var(--color-light-50);
  --color-bg-gray: var(--color-dark-600);
  --color-bg-gray-2: var(--color-dark-700);
  --color-bg-gray-3: var(--color-gray-850);
  --color-bg-gray-4: var(--color-dark-700);
  --color-bg-gray-5: var(--color-dark-600);
  --color-bg-gray-6: var(--color-gray-870);
  --color-bg-gray-7: var(--color-dark-400);
  --color-bg-gray-8: var(--color-gray-900);
  --color-bg-disabled: var(--color-gray-900);

  --color-text-primary: var(--color-light-50);
  --color-text-primary-3: var(--color-light-50);
  --color-text-secondary: var(--color-dark-400);
  --color-text-secondary-2: var(--color-light-50);
  --color-text-on-secondary: var(--color-dark-400);
  --color-text-light: var(--color-dark-900);
  --color-text-title: var(--color-light-50);

  --border: var(--color-dark-500);
  --border-light: var(--color-dark-500);

  --placeholder: var(--color-dark-400);

  --price: var(--color-green-400);

  --separator: var(--color-dark-700);

  --toggle-turnoff: var(--color-dark-600);

  --icon-dark: var(--color-gray-860);

  --badge-blue-bg: var(--color-blue-300);
  --badge-green-bg: var(--color-green-500);
  --badge-red-bg: var(--color-red-400);
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  height: auto;
}

body {
  font-family: "Geist", "Arial", sans-serif;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg-secondary);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(.kit-modal--open) {
  overflow-y: hidden;
}
body:has(.body-overflow-hidden--desk) {
  overflow-y: hidden;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--color-blue-100);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
}

.container {
  max-width: 1410px;
  padding-inline: 15px;
  margin: 0 auto;
}
.container--profile {
  max-width: 1030px;
}

.title {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  color: var(--color-text-title);
}
.text-empty {
  color: var(--color-text-secondary);
  text-align: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flex-rowed {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

.validation-message {
  color: red;
  font-size: 14px;
}
.account-card {
  border-radius: var(--border-radius);
  background: var(--color-bg-primary);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.objective-status--blue {
  color: var(--color-blue-100);
}
.objective-status--darkblue {
  color: var(--color-blue-300);
}
.objective-status--red {
  color: var(--color-red-50);
}
.objective-status--green {
  color: var(--color-green-50);
}
.objective-status--orange {
  color: var(--color-orange-50);
}

/* date picker */

.dark .datepicker-controls .button.prev-btn::after {
  background-image: url("/_content/HireGuard.Components/icons/arrow-left-light.svg") !important;
}
.dark .datepicker-controls .button.next-btn::after {
  background-image: url("/_content/HireGuard.Components/icons/arrow-right-light.svg") !important;
}

/* настройки структуры для страницы чатов  */
.page:has(.chats-layout),
main:has(.chats-layout),
.page__body:has(.chats-layout) {
  max-height: 100%;
}

@media (max-width: 576px) {
  :root {
    --padding-top: calc(var(--mobile-header-height) + 16px);
    --padding-bottom: 108px;
  }
  body:has(.professionals__filters--open),
  body:has(.body-overflow-hidden) {
    overflow-y: hidden;
  }
  body:has(.chat-layout) {
    padding-bottom: var(--mobile-menu-height);
  }
  body:has(.login) {
    padding-bottom: 0;
  }
  body:has(.chat) .chat-layout__side {
    display: none;
  }
  .account-card {
    padding: 12px;
  }
  .mobile-head {
    padding: 12px 16px;
    background: var(--color-bg-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
    height: var(--mobile-header-height);
    z-index: 2;
  }
}