@tailwind base;
@tailwind components;
@tailwind utilities;

/* Цветовая палитра */
:root {
  /* Общие цвета */
  --primary: #5369e0;
  --secondary: #565966;
  --secondary2: #7f8a91;
  --secondary3: #e1e8f8;
  --success: #38af74;
  --success-light: #e2ffed;
  --danger: #f24c58;
  --danger-dark: #d63e49;
  --danger-light: #fff2f4;
  --warning: #f3a12f;
  --warning-light: #fff5e0;
  --offline: #9b9b9b;
  --offline-light: #f8f8f8;
  --link: #3f56c9;
  --borderColor: #f1f3ff;
  --dark: #020619;

  --color-white: #ffffff;
  --color-light: #fefefe;
  --color-light-gray: #f3f4f6;
  --color-light-gray-blue: #f7f8f9;
  --color-light-gray-black: #cdcdcd;
  --red: #f24c58;
  --orange: #ff9c00;
  --color-dark: #17161e;
  --color-dark-light: #2a2a37;
  --color-dark-light-purple: #58586e;
  --color-black: #000000;
  --toastify-icon-color-success: #00cda4 !important;
  --toastify-icon-color-error: #ff6553 !important;
  --toastify-color-progress-success: #00cda4 !important;
  --toastify-color-progress-error: #ff6553 !important;

  --scrollbar-thumb: #ced0d8;
  --scrollbar-bg: transparent;

  --v-theme-background: 255, 255, 255;
  --v-theme-background-overlay-multiplier: 1;
  --v-theme-surface: 255, 255, 255;
  --v-theme-surface-overlay-multiplier: 1;
  --v-theme-surface-bright: 255, 255, 255;
  --v-theme-surface-bright-overlay-multiplier: 1;
  --v-theme-surface-light: 238, 238, 238;
  --v-theme-surface-light-overlay-multiplier: 1;
  --v-theme-surface-variant: 66, 66, 66;
  --v-theme-surface-variant-overlay-multiplier: 2;
  --v-theme-on-surface-variant: 238, 238, 238;
  --v-theme-primary: 24, 103, 192;
  --v-theme-primary-overlay-multiplier: 2;
  --v-theme-primary-darken-1: 31, 85, 146;
  --v-theme-primary-darken-1-overlay-multiplier: 2;
  --v-theme-secondary: 72, 169, 166;
  --v-theme-secondary-overlay-multiplier: 1;
  --v-theme-secondary-darken-1: 1, 135, 134;
  --v-theme-secondary-darken-1-overlay-multiplier: 1;
  --v-theme-error: 176, 0, 32;
  --v-theme-error-overlay-multiplier: 2;
  --v-theme-info: 33, 150, 243;
  --v-theme-info-overlay-multiplier: 1;
  --v-theme-success: 76, 175, 80;
  --v-theme-success-overlay-multiplier: 1;
  --v-theme-warning: 251, 140, 0;
  --v-theme-warning-overlay-multiplier: 1;
  --v-theme-on-background: 0, 0, 0;
  --v-theme-on-surface: 0, 0, 0;
  --v-theme-on-surface-bright: 0, 0, 0;
  --v-theme-on-surface-light: 0, 0, 0;
  --v-theme-on-primary: 255, 255, 255;
  --v-theme-on-primary-darken-1: 255, 255, 255;
  --v-theme-on-secondary: 255, 255, 255;
  --v-theme-on-secondary-darken-1: 255, 255, 255;
  --v-theme-on-error: 255, 255, 255;
  --v-theme-on-info: 255, 255, 255;
  --v-theme-on-success: 255, 255, 255;
  --v-theme-on-warning: 255, 255, 255;
  --v-border-color: 0, 0, 0;
  --v-border-opacity: 0.12;
  --v-high-emphasis-opacity: 0.87;
  --v-medium-emphasis-opacity: 0.6;
  --v-disabled-opacity: 0.38;
  --v-idle-opacity: 0.04;
  --v-hover-opacity: 0.04;
  --v-focus-opacity: 0.12;
  --v-selected-opacity: 0.08;
  --v-activated-opacity: 0.12;
  --v-pressed-opacity: 0.12;
  --v-dragged-opacity: 0.08;
  --v-theme-kbd: 238, 238, 238;
  --v-theme-on-kbd: 0, 0, 0;
  --v-theme-code: 245, 245, 245;
  --v-theme-on-code: 0, 0, 0;
}

.Toastify__toast {
  border-radius: 14px !important;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Thin.woff") format("woff"),
    url("./fonts/Gilroy-Thin.eot") format("embedded-opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-UltraLight.woff") format("woff"),
    url("./fonts/Gilroy-UltraLight.eot") format("embedded-opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Light.woff") format("woff"),
    url("./fonts/Gilroy-Light.eot") format("embedded-opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Regular.woff") format("woff"),
    url("./fonts/Gilroy-Regular.eot") format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Medium.woff") format("woff"),
    url("./fonts/Gilroy-Medium.eot") format("embedded-opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-SemiBold.woff") format("woff"),
    url("./fonts/Gilroy-SemiBold.eot") format("embedded-opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Bold.woff") format("woff"),
    url("./fonts/Gilroy-Bold.eot") format("embedded-opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-ExtraBold.woff") format("woff"),
    url("./fonts/Gilroy-ExtraBold.eot") format("embedded-opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Black.woff") format("woff"),
    url("./fonts/Gilroy-Black.eot") format("embedded-opentype");
  font-weight: 900;
  font-style: normal;
}
body {
  font-family: "Gilroy", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-weight: 500;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.p-paginator-content {
  width: 100%;
}

.p-paginator-current {
  margin: 0 auto 0 0;
  color: #9a9ca5 !important;
  font-weight: 600;
}

@media (max-width: 768px) {
  .p-paginator-current {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .p-paginator-rpp-dropdown {
    margin: 8px 50% 0 50% !important;
  }
}

.p-paginator-rpp-dropdown {
  margin: 0 0 0 auto;
}

/* Стили для скроллбара */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b8bac2;
}

/* Для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);

  @media (max-width: 768px) {
    .p-paginator-page,
    .p-paginator-next,
    .p-paginator-last,
    .p-paginator-first,
    .p-paginator-prev {
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      font-size: 16px !important;
    }
  }

  @media (max-width: 768px) {
    .p-select-label {
      padding: 6px 12px !important;
    }
  }
  .p-datatable {
    font-size: 14px;
    line-height: 17px;
  }
  @media (max-width: 768px) {
    .p-datatable {
      font-size: 12px;
      line-height: 14px;
    }
    .p-datatable-resizable-table > .p-datatable-thead > tr > th {
      white-space: wrap !important;
    }
  }

  .p-multiselect-option {
    font-weight: 600 !important;
    font-size: 14px;
    line-height: 17px;

    .p-checkbox {
      height: 18px;
      width: 18px;
    }

    .p-checkbox-box {
      height: 18px;
      width: 18px;
    }

    .p-checkbox-icon {
      height: 12px;
      width: 12px;
    }
  }

  .p-multiselect-header {
    .p-checkbox {
      height: 18px;
      width: 18px;
    }

    .p-checkbox-box {
      height: 18px;
      width: 18px;
    }

    .p-checkbox-icon {
      height: 12px;
      width: 12px;
    }

    .p-multiselect-filter {
      padding: 8px 12px;
      font-size: 14px;
      line-height: 17px;
      color: #121212;
    }
  }

  .p-inputtext {
    color: #121212 !important;
    font-weight: 500;
    @media (max-width: 768px) {
      font-size: 14px !important;
    }
  }
  .p-popover-content {
    padding: 8px 16px !important;
  }

  .p-datatable-sort-badge {
    display: none !important;
  }

  .p-drawer-close-button {
    color: #414141 !important;
  }
  .p-dialog-close-button {
    color: #414141 !important;
  }
  .p-dialog-title {
    color: #121212 !important;
    padding: 0 !important;
  }
  .p-dialog-footer {
    padding: 0 !important;
  }
  .p-drawer-title {
    color: #121212 !important;
  }
  .p-dialog-content {
    padding: 0 !important;
  }
  .p-row-odd[data-p-selected="true"] {
    background: #f4f5fc;
  }
  .p-row-even[data-p-selected="true"] {
    background: #f4f5fc;
  }
  .p-row-odd:hover {
    background: #f4f5fc;
  }
  .p-row-even:hover {
    background: #f4f5fc;
  }
  .p-datepicker-day {
    width: 54px !important;
    height: 33px !important;
    border-radius: 10px !important;
    @media (max-width: 768px) {
      font-size: 14px !important;
      line-height: 17px !important;
      width: 44px !important;
      height: 33px !important;
    }
  }
  .p-datepicker-day-selected {
    background: #f1f3ff !important;
    color: var(--primary) !important;
  }

  .p-textarea {
    color: #121212 !important;
    font-weight: 500;
  }

  .sidebar-active {
    box-shadow: 0px 8px 18px 0px #cbd0e93d,
      -0.5px -0.5px 2px 0px #ffffff66 inset,
      -1.2px -1.2px 0px 0px #ffffff0a inset,
      -0.9px -0.9px 0px 0px #ffffff1a inset,
      -0.5px -0.5px 0px 0px #ffffff33 inset, 1.2px 1.2px 0px 0px #ffffff1a inset,
      0.9px 0.9px 0.3px 0px #ffffff33 inset,
      0.5px 0.5px 0.3px 0px #ffffffcc inset;
  }
  .top-bar-button {
    box-shadow: 0px 4px 24px 0px #cbd0e966;
  }

  .p-tab-active {
    border-left: 1px solid var(--borderColor) !important;
    border-right: 1px solid var(--borderColor) !important;
    border-top: 1px solid var(--borderColor) !important;
    border-radius: 10px 10px 0 0;
  }
}
.p-tablist-tab-list {
  border-style: unset !important;
  background: none !important;
}
.p-tabpanels {
  margin-top: -1px;
  border-width: 1px;
  border-color: #edeff6;
  border-top-right-radius: 16px;
}
.p-tab-active {
  z-index: 1;
  margin-left: 1px !important;
  border-color: #edeff6 !important;
}
.p-tablist-content {
  flex-grow: 0;
}

.p-inputtext:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--borderColor) !important;
}

.info-header {
  order: 2;
}
.p-datatable-column-title {
  order: 1;
}
.p-datatable-column-content [data-pc-section="sort"] {
  order: 3;
}
@media (max-width: 768px) {
  .p-toast {
    width: 100vw !important;
    right: 0 !important;
  }
}

.text-button:disabled {
  color: #9a9ca5 !important;
}
.p-checkbox-box {
  border-color: #dde2fe !important;
}
.p-checkbox-checked .p-checkbox-box {
  border-color: var(--primary) !important;
}

.pagination-item {
  width: 40px;
  height: 40px;
  padding: 7px;
  text-align: center;
  border-radius: 10px;
  border: #ffffff solid 1px;
}

.pagination-item:hover {
  background-color: #f1f3ff;
}

.pagination-item.active {
  background-color: #f1f3ff;
  color: #5369e0;
}

.prev-page,
.next-page {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.2s;
}

.prev-page::before,
.next-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #111827; /* цвет иконки */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 19px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 19px;
}

.prev-page::before {
  -webkit-mask-image: url("/resources/promminer-knowledge-base/images/icons/chevron-left.svg");
  mask-image: url("/resources/promminer-knowledge-base/images/icons/chevron-left.svg");
}

.next-page::before {
  -webkit-mask-image: url("/resources/promminer-knowledge-base/images/icons/chevron-right.svg");
  mask-image: url("/resources/promminer-knowledge-base/images/icons/chevron-right.svg");
}

/* hover: меняем и фон, и цвет иконки */
.prev-page:hover,
.next-page:hover {
  background-color: #f1f3ff; /* фон */
}

.prev-page:hover::before,
.next-page:hover::before {
  background-color: #5369e0; /* цвет иконки */
}

.text-preview p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-text h3 {
  font-family: Gilroy;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0%;
  padding-bottom: 20px;
}
.article-text p {
  color: #565966;
  padding-bottom: 12px;
}
.article-text li {
  padding-bottom: 12px;
  font-family: Gilroy;
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #565966;
  list-style-type: disc;
}
.article-text ul,
ol {
  padding-left: 20px !important;
}

.article-tag {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid;
  font-weight: 600;
}
.article-tag-4 {
  color: #ff9500;
  background-color: #ff95000d;
  border-color: #ff950026;
}
.show-flex-1 {
  display: flex !important;
}
.hide-1 {
  display: none !important;
}

.wrapper > a:nth-child(6n + 1) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/newspaper.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper > a:nth-child(6n + 2) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/workers.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper > a:nth-child(6n + 3) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/user-group.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper > a:nth-child(6n + 4) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/database.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper > a:nth-child(6n + 5) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/clipboard-list.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper > a:nth-child(6n + 6) .icon {
  background-image: url("/resources/promminer-knowledge-base/images/icons/chart-pie.svg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}