/* ============================================================================
   NGENIX-style overrides for MkDocs Material
   ----------------------------------------------------------------------------
   Корпоративная палитра, типографика и карточки в стиле help.ngenix.net
   ============================================================================ */

html {
  line-height: 1.3;
  font-size: 125%;
}

@media screen and (max-width: 576px) {
  html {
    font-size: 115%;
  }
}

/* Fonts */
@font-face {
  font-family: 'Graphik LCG';
  src: url('/assets/fonts/GraphikLCG-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik LCG';
  src: url('/assets/fonts/GraphikLCG-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik LCG';
  src: url('/assets/fonts/GraphikLCG-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik LCG';
  src: url('/assets/fonts/GraphikLCG-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik LCG';
  src: url('/assets/fonts/GraphikLCG-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --md-text-font: "Graphik LCG", sans-serif; 
}

/* ---------- Палитра ---------- */
:root  > * {
  /* see default colors - https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss */

  --md-primary-fg-color: #113A60;
  --md-primary-fg-color--light: #25AAE1;
  --md-primary-fg-color--dark: #0c2944;

  --md-accent-fg-color: var(--md-primary-fg-color);
  --md-accent-fg-color--transparent: rgba(17, 58, 96, 0.1);

  --md-default-fg-color: #1E1E1E;
  --md-default-fg-color--light: rgba(0, 0, 0, 0.4);

  --md-typeset-table-color: #0000003D;

  --md-typeset-a-color: var(--md-primary-fg-color--light);

  --ngx-note-color: var(--md-primary-fg-color--light);
  --ngx-note-color--lightest: #E9F9FF;

  --ngx-info-color: #1388CA;
  --ngx-info-color--lightest: #E9EFFA;

  --ngx-warning-color: #FF7A00;
  --ngx-warning-color--lightest: #FCEDDF;

  --ngx-danger-color: #C93A3F;
  --ngx-danger-color--light: #E54040;
  --ngx-danger-color--lightest: #FFE9E5;

  --ngx-success-color: #009918;
  --ngx-success-color--lightest: #E5FFE9;

  --ngx-gray: #A4A4A4;
  --ngx-gray--light: #113A601A;
  --ngx-gray-lightest: #FAFAFA;

  /* Admonition icons */
  --ngx-info-icon: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="10.475" stroke="%23113A60" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.4262 8.81894H11.6172V16.324H10.4262V8.81894ZM11.5598 7.02518C11.4068 7.17824 11.2202 7.25478 11.0002 7.25478C10.7802 7.25478 10.5936 7.17824 10.4405 7.02518C10.2875 6.87211 10.2109 6.68556 10.2109 6.46552C10.2109 6.24549 10.2875 6.05894 10.4405 5.90587C10.5936 5.7528 10.7802 5.67627 11.0002 5.67627C11.2202 5.67627 11.4068 5.7528 11.5598 5.90587C11.7129 6.05894 11.7894 6.24549 11.7894 6.46552C11.7894 6.68556 11.7129 6.87211 11.5598 7.02518Z" fill="%23113A60" /></svg>');
  --ngx-warning-icon: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="10.475" stroke="%23FF7A00" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5738 13.1813L10.3828 13.1813L10.3828 5.67622L11.5738 5.67622L11.5738 13.1813ZM10.4402 14.9751C10.5932 14.822 10.7798 14.7455 10.9998 14.7455C11.2198 14.7455 11.4064 14.822 11.5595 14.9751C11.7125 15.1281 11.7891 15.3147 11.7891 15.5347C11.7891 15.7548 11.7125 15.9413 11.5595 16.0944C11.4064 16.2474 11.2198 16.324 10.9998 16.324C10.7798 16.324 10.5932 16.2474 10.4402 16.0944C10.2871 15.9413 10.2106 15.7548 10.2106 15.5347C10.2106 15.3147 10.2871 15.1281 10.4402 14.9751Z" fill="%23FF7A00"/></svg>');
  --ngx-danger-icon: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5738 14.4313L10.3828 14.4313L10.3828 6.92622L11.5738 6.92622L11.5738 14.4313ZM10.4402 16.2251C10.5932 16.072 10.7798 15.9955 10.9998 15.9955C11.2198 15.9955 11.4064 16.072 11.5595 16.2251C11.7125 16.3781 11.7891 16.5647 11.7891 16.7847C11.7891 17.0048 11.7125 17.1913 11.5595 17.3444C11.4064 17.4974 11.2198 17.574 10.9998 17.574C10.7798 17.574 10.5932 17.4974 10.4402 17.3444C10.2871 17.1913 10.2106 17.0048 10.2106 16.7847C10.2106 16.5647 10.2871 16.3781 10.4402 16.2251Z" fill="%23C93A3F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.43096 21.8739C0.60279 21.8739 -0.564234 19.9235 0.300029 18.3125L8.69291 1.37298C9.62294 -0.360593 12.1236 -0.317329 12.9931 1.44738L21.6278 18.387C22.4196 19.994 21.2501 21.874 19.4586 21.874L2.43096 21.8739ZM1.1524 18.7698C0.633847 19.7364 1.33406 20.9066 2.43096 20.9066L19.4586 20.9067C20.5335 20.9067 21.2352 19.7787 20.7601 18.8145L12.1254 1.8749C11.6037 0.816078 10.1033 0.790121 9.54529 1.83027L1.1524 18.7698Z" fill="%23C93A3F"/></svg>');
  --ngx-success-icon: url('data:image/svg+xml,<svg viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11.5" r="10.475" stroke="%23009918" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.81773 14.0434L5.76902 9.99466L5.00781 10.7559L9.8043 15.5524L9.81932 15.5373L9.84383 15.5618L16.991 8.19931L16.2298 7.43811L9.81773 14.0434Z" fill="%23009918"/></svg>');
  
  --ngx--header-bg-color: #ECF2F7;
  /* Footer */
  --md-footer-bg-color: var(--md-default-bg-color);
  --md-footer-bg-color--dark: var(--md-default-bg-color);
  --md-footer-fg-color: var(--md-typeset-color);
  --md-footer-fg-color--light: var(--md-typeset-color);
}

.md-typeset {
  font-size: 0.7rem;

  & h1 {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.25%;
    margin: 1rem 0 1.3rem;
    color: var(--md-default-fg-color)
  }

  & h2 {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.25%;
    margin: 1.2rem 0 1.2rem;
  }

  & h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 1rem;
  }

  & a {
    text-decoration: underline;

    &:is(:focus, :hover) {
      color: var(--md-primary-fg-color--light);
    }
  }

  /* ---------- Admonitions ---------- */
  & .admonition {
    border-radius: 10px;
    box-shadow: none;
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
  }

  & .admonition > * {
    padding-left: 1.5rem;
    position: relative;
  }

  & .admonition-title {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    padding-left: 1.5rem !important;
  }

  & .admonition:has(.admonition-title) {
    padding-top: 1rem;
  }

  /* Icon */
  & .admonition .admonition-title::before {
    width: 0;
    height: 0;
    mask-image: none;
    background-color: transparent;
  }

  & .admonition > *:nth-child(1 of :not(.admonition-title))::before {
    content: '';
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Info */
  & .admonition.info {
    background: var(--ngx-info-color--lightest);

    & .admonition-title {
      color: var(--md-accent-fg-color);
    }

    /* Icon */
    & > *:nth-child(1 of :not(.admonition-title))::before {
      background-color: var(--md-accent-fg-color);
      -webkit-mask-image: var(--ngx-info-icon);
      mask-image: var(--ngx-info-icon);
    }

    & a {
      color: var(--md-typeset-a-color);
    }
  }

  /* Note */
  & .admonition.note {
    background: var(--ngx-note-color--lightest);

    & .admonition-title {
      color: var(--ngx-note-color);
    }

    /* Icon */
    & > *:nth-child(1 of :not(.admonition-title))::before {
      background-color: var(--ngx-note-color);
      -webkit-mask-image: var(--ngx-info-icon);
      mask-image: var(--ngx-info-icon);  
    }

    & a {
      color: var(--ngx-note-color);
    }
  }

  /* Warning */
  & .admonition.warning {
    background: var(--ngx-warning-color--lightest);

    & .admonition-title {
      color: var(--ngx-warning-color);
    }

    /* Icon */
    & > *:nth-child(1 of :not(.admonition-title))::before {
      background-color: var(--ngx-warning-color);
      -webkit-mask-image: var(--ngx-warning-icon);
      mask-image: var(--ngx-warning-icon);  
    }

    & a {
      color: var(--ngx-warning-color);
    }
  }

  /* Danger */
  & .admonition.danger {
    background: var(--ngx-danger-color--lightest);

    & .admonition-title {
      color: var(--ngx-danger-color);
    }

    /* Icon */
    & > *:nth-child(1 of :not(.admonition-title))::before {
      background-color: var(--ngx-danger-color);
      -webkit-mask-image: var(--ngx-danger-icon);
      mask-image: var(--ngx-danger-icon);
    }

    & a {
      color: var(--ngx-danger-color);
    }
  }

  /* Success */
  & .admonition.success {
    background: var(--ngx-success-color--lightest);

    & .admonition-title {
      color: var(--ngx-success-color);
    }

    /* Icon */
    & > *:nth-child(1 of :not(.admonition-title))::before {
      background-color: var(--ngx-success-color);
      -webkit-mask-image: var(--ngx-success-icon);
      mask-image: var(--ngx-success-icon);
    }

    & a {
      color: var(--ngx-success-color);
    }
  }

    /* ---------- Collapsable Admonitions ---------- */
  & details {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    background-color: var(--ngx-gray-lightest) !important;
    border-color: rgb(from var(--md-accent-fg-color) r g b / 0.2);

    &:not([open]) {
      padding-bottom: 0.4rem;
    }

    & summary {
      color: var(--md-accent-fg-color);
      /* Icon */  
      &::before {
        background-color: var(--md-accent-fg-color);
        -webkit-mask-image: var(--ngx-info-icon);
        mask-image: var(--ngx-info-icon)
      }

      &::after {
        background-color: var(--md-accent-fg-color);
      }
    }

    & > * {
      padding-left: 1.5rem;
      position: relative;
    }

    /* Info */
    &.info {
      border-color: rgb(from var(--md-accent-fg-color) r g b / 0.2);

      & summary {
        color: var(--md-accent-fg-color);
        
        &::before {
          background-color: var(--md-accent-fg-color);
          -webkit-mask-image: var(--ngx-info-icon);
          mask-image: var(--ngx-info-icon)
        }

        &::after {
          background-color: var(--md-accent-fg-color);
        }
      }

      & a {
        color: var(--md-typeset-a-color);
      }
    }

        /* Note */
    &.note {
      border-color: rgb(from var(--ngx-note-color) r g b / 0.2);

      & summary {
        color: var(--ngx-note-color);
        
        &::before {
          background-color: var(--ngx-note-color);
          -webkit-mask-image: var(--ngx-info-icon);
          mask-image: var(--ngx-info-icon)
        }

        &::after {
          background-color: var(--ngx-note-color);
        }
      }

      & a {
        color: var(--md-typeset-a-color);
      }
    }

    /* Warning */
    &.warning {
      border-color: rgb(from var(--ngx-warning-color) r g b / 0.2);

      & summary {
        color: var(--ngx-warning-color);
        
        &::before {
          background-color: var(--ngx-warning-color);
          -webkit-mask-image: var(--ngx-info-icon);
          mask-image: var(--ngx-info-icon)
        }

        &::after {
          background-color: var(--ngx-warning-color);
        }
      }

      & a {
        color: var(--ngx-warning-color);
      }
    }

    /* Danger */
    &.danger {
      border-color: rgb(from var(--ngx-danger-color) r g b / 0.2);

      & summary {
        color: var(--ngx-danger-color);
        
        &::before {
          background-color: var(--ngx-danger-color);
          -webkit-mask-image: var(--ngx-danger-icon);
          mask-image: var(--ngx-danger-icon)
        }

        &::after {
          background-color: var(--ngx-danger-color);
        }
      }

      & a {
        color: var(--ngx-danger-color);
      }
    }

    /* Success */
    &.success {
      border-color: rgb(from var(--ngx-success-color) r g b / 0.2);

      & summary {
        color: var(--ngx-success-color);
        
        &::before {
          background-color: var(--ngx-success-color);
          -webkit-mask-image: var(--ngx-success-icon);
          mask-image: var(--ngx-success-icon)
        }

        &::after {
          background-color: var(--ngx-success-color);
        }
      }

      & a {
        color: var(--ngx-success-color);
      }
    }
  }

  /* ---------- Tabs ---------- */
  & .tabbed-set {
    background: #F9F9F9;
    border-radius: 5px 5px 10px 10px;

    & .tabbed-content {
      padding: 0.5rem 1.5rem;
    }

    & .tabbed-labels {
      box-shadow: 0 -.1rem white inset;

      & > label {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--md-default-fg-color);

        &:hover {
          color: var(--ngx-info-color);
        }

        & > a {
          text-decoration: none;
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
      }

      &:before {
        background-color: var(--ngx-info-color);
      }
    }

    & > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
    & > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
    & > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
    & > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
    & > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
    & > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
    & > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
    & > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
    & > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9),
    & > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10),
    & > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11),
    & > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12),
    & > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13),
    & > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14),
    & > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15),
    & > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16),
    & > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17),
    & > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18),
    & > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19),
    & > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20) {
      color: var(--ngx-info-color);
      font-weight: 500;
    }
  }

  /* Table */
  & table:not([class]) {
    border: none;
    box-shadow: none;
    border-collapse: collapse;
    font-size: 0.7rem;
  }

  & .md-typeset__table {
    border: none;
    box-shadow: none;
  }

  & table:not([class]) th {
    font-weight: 500;
  }

  & table:not([class]) th,
  & table:not([class]) td {
    border-right: 1px solid var(--md-typeset-table-color);
    border-bottom: 1px solid var(--md-typeset-table-color);
  }

  & table:not([class]) th:last-child,
  & table:not([class]) td:last-child {
    border-right: none;
  }

  & table:not([class]) tr:last-child td {
    border-bottom: none;
  }

  /* Code */
  & .md-code__content {
    border: 1px solid var(--md-default-fg-color--lightest);

    &:hover {
      scrollbar-color: var(--md-default-fg-color--lighter) #0000;
    }
  }
  
  & .highlight .filename {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-bottom-width: 0;
  }
}

/* Common blocks  */
.md-grid {
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: none;
}

.md-main__inner {
  margin-top: 0;
}

.md-top {
  z-index: 10;
}

@media screen and (max-width: 576px) {
  .md-grid,
  .md-content__inner {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* Content of article (right sidebar)  */
.md-sidebar--secondary {
  & .md-nav {
    font-size: 0.65rem;
  }

  .md-nav__title {
    color: var(--md-default-fg-color);
    font-size: 0.7rem;
  }
}

/* Left sidebar  */
.md-sidebar--primary {
  width: 13rem;

  & .md-sidebar__scrollwrap:hover,
  & .md-sidebar__scrollwrap:focus {
    scrollbar-color: var(--md-default-fg-color--light) #0000;
  }

  & .md-sidebar__inner {
    padding-right: 0;
  }

  & .md-nav {
    font-size: 0.7rem;
  }

  & .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item > .md-nav__link {
    padding-left: 0.2rem;
    font-weight: 700;
  }

  & .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav__link {
    font-weight: 500;
  }

  & .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav__link > a {
    padding-left: 0.2rem;
  }

  & .md-nav__link[href]:hover:not(.md-nav__link--active),
  & .md-nav__link[for]:hover:not(.md-nav__link--active),
  & .md-nav__link[href]:focus:not(.md-nav__link--active),
  & .md-nav__link[for]:focus:not(.md-nav__link--active),
  & .md-nav__link.md-nav__container:hover .md-nav__link[href]:not(.md-nav__link--active),
  & .md-nav__link.md-nav__container:hover .md-nav__link[for]:not(.md-nav__link--active)  {
    background-color: transparent;
    color: var(--md-primary-fg-color--light);
  }

  & .md-nav__item .md-nav__link--active {
    background-color: transparent;
    color: var(--ngx-danger-color);
    font-weight: unset;
  }

  & .md-nav__link .md-nav__icon {
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.8rem;
  }
}   

input[data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary .md-nav__title[for=__drawer] {
  display: block;
}

@media screen and (max-width: 76.2344em) {
  .md-sidebar--primary {
    width: 12.1rem;
    border-radius: 0.4rem;
  }

  .md-nav--primary .md-nav__title[for=__drawer],
  .md-nav--primary .md-nav__title {
    background-color: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    font-weight: 700;
    border-bottom: 1px solid var(--ngx-gray--light)
  }

  .md-nav--primary .md-nav__item {
    font-size: 0.7rem;
  }
}

/* ---------- Search ---------- */
.md-search__button {
  background-color: transparent;
  border: 1px solid var(--ngx-gray);
  color: var(--ngx-gray);
  font-weight: 500;
  height: 1.9rem;
  display: flex;
  align-items: center;

  &:hover {
    background-color: transparent;
    &::before {
      background-color: var(--md-default-fg-color);
    }
  }

  &::before {
    background-color: var(--ngx-gray);
    transition: 0.2s;
  }
}

/* ------ Header --------- */
.md-header {
  background-color: var(--ngx--header-bg-color);
  color: var(--md-typeset-color);
  box-shadow: none;

  & .md-header__title {
    font-size: 0.8rem;

    & .md-header__topic:first-child {
      font-weight: 500;
    }
    
    & .md-header__product-name {
      font-weight: 400;
    }
  }

  & .md-header__inner {
    height: 72px;
    min-height: 72px;
    padding: 0;
  }

  & .md-header__button.md-logo {

    &:hover {
      opacity: 1;
    }

    & img {
      height: 24px;
    }
  }

  & .header__menu-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 16px;

    & > a {
      font-size: 0.7rem;
      text-decoration: none;
      transition: 0.2s;

      &:hover {
        color: var(--md-primary-fg-color--light);
      }
    }

    & > .support-btn {
      padding: 0.5rem;
      border-radius: 6px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #FFFFFF;
      background-color: var(--ngx-danger-color);

      &:hover {
        color: #FFFFFF;
        background-color: var(--ngx-danger-color--light);
      }
    }
  }

  @media screen and (max-width: 1080px) {
    .header__menu-links > a:first-child {
      display: none;
    }
  }

  @media screen and (max-width: 960px) {
    .header__menu-links {
      display: none;
    }
  }
}

/* ------ Tabs --------- */
.md-header--lifted .md-tabs {
  background-color: var(--md-default-bg-color);
  border-bottom: 1px solid var(--ngx-gray--light);

  & .md-grid {
    margin-left: 0.4rem;
  }

  & .tabs-box {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
  }

  & .tabs__menu-links {
    display: flex;
    align-items: center;
    gap: 20px;

    & > a {
      font-size: 0.7rem;
      transition: 0.2s;
      color: var(--md-primary-fg-color--light);
      text-decoration: underline;

      &:hover {
        color: var(--md-primary-fg-color--light);
      }
    }
  }
}

/*------ Breadcrumbs---------*/
.md-path__list {
  font-size: 0.65rem;
  flex-wrap: wrap;
}

/*------ Footer---------*/
.md-footer {
  border-top: none;

  & .md-footer-meta {
    background-color: var(--md-default-bg-color);
  }

  & .md-footer__link {
    background: var(--ngx-gray-lightest);
    padding: 0.7rem 0.3rem 0.2rem 0.3rem;
    border-radius: 10px;
    font-weight: 500;
    transition: 0.2s;

    &:hover {
      background-color: rgb(from var(--md-primary-fg-color--light) r g b / 0.2);
      opacity: 1;
    }

    & .md-footer__direction {
      line-height: 1.7;
      color: var(--md-default-fg-color--light);
      font-size: 0.6rem;
    }

    & .md-ellipsis {
      font-size: 0.8rem;
    }
  }
}