@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-820: #4a4f58;
  --color-dark-900: #000000;

  /*синие оттенки*/
  --color-blue-50: #d7efff;
  --color-blue-100: #396df0;
  --color-blue-200: #c5e6fd;
  --color-blue-300: #2e447b;
  --color-blue-400: #e5f0ff;
  --color-blue-500: #c6e0ff;
  --color-blue-600: #4b62c0;

  /* зеленые */
  --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-green-700: #dff7ea;

  /* красные */
  --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-gray-9: var(--color-gray-200);
  --color-bg-dark: var(--color-gray-900);
  --color-bg-dark-2: var(--color-gray-900);
  --color-bg-dark-3: var(--color-gray-800);
  --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-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);

  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

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

  --mobile-header-height: calc(var(--safe-area-inset-top) + 52px);
}

.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-dark-2: var(--color-dark-300);
  --color-bg-dark-3: var(--color-dark-800);
  --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-gray-9: var(--color-dark-820);
  --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;
  overflow-y: scroll;
}

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);
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.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%;
}

/* пришлосб вынести сюда из Documents потому что deep не работает (просто так) */
.profile-documents__link {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1024px) {
  body:has(.chat-layout) .mobile-nav {
    display: flex;
  }
}

@media (max-width: 576px) {
  :root {
    --padding-top: calc(var(--mobile-header-height) + var(--safe-area-inset-top) + 16px);
    --padding-bottom: calc(108px + var(--safe-area-inset-bottom));
  }

  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;
    background: var(--color-bg-primary);
  }

  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: 3;
    }
}

body:has(.landing-layout),
body:has(.landing-main-content) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Fix scrolling on landing pages when embedded demo filters are marked as open/active */
body:has(.landing-layout):not(:has(.kit-modal--open)):not(:has(.body-overflow-hidden)),
body:has(.landing-main-content):not(:has(.kit-modal--open)):not(:has(.body-overflow-hidden)) {
  overflow-y: scroll !important;
}

/* Pure white background for landing pages in light theme */
body:has(.landing-layout):not(.dark),
body:has(.landing-main-content):not(.dark) {
  background: #ffffff;
}

/* Offset the absolute header height (59px) to prevent landing content overlap */
.landing-main-content {
  padding-top: 59px;
}


/* Landing bottom sheet (mobile).
   Lives here rather than in a .razor.css because scoped CSS appends the component's scope
   attribute to every selector — `html`/`body` never carry one, so a scoped rule for the
   scroll root would compile to `html[b-xxxx]` and never match.
   `proximity` is what makes the sheet magnetic: nudged a little it falls back onto the
   hero's snap position, dragged past the midpoint it finishes onto the sheet's. Past that
   there are no snap targets left, so the rest of the page scrolls freely. */
@media (max-width: 768px) {
    html:has(.landing-main-content) {
        scroll-snap-type: y proximity;
        /* How much of the sheet rests above the bottom of the hero. Declared on the root so
           both the sheet (which offsets itself by it) and the hero (which keeps its artwork
           out from under it) read one value. */
        --sheet-peek: 32svh;
    }
}