@import "admin"
\:root
  // Основные цвета
  --primary: #f1495b
  // Основной цвет темы
  --secondary: #444444
  // Вторичный цвет темы
  --success: #28a745
  // Цвет для успешных действий
  --info: #17a2b8
  // Информационный цвет
  --warning: #ffc107
  // Цвет предупреждений
  --danger: #dc3545
  // Цвет для опасных действий
  --light: #f8f9fa
  // Светлый цвет для фона
  --dark: #37363d !important
// Тёмный цвет

// Цвета для тёмной темы
@media (prefers-color-scheme: dark)
  :root
    --primary: #375a7f
    // Основной цвет для тёмной темы
    --secondary: #444
    // Вторичный цвет для тёмной темы
    --success: #00bc8c
    // Цвет успеха
    --info: #3498db
    // Информационный цвет
    --warning: #f39c12
    // Цвет предупреждения
    --danger: #e74c3c
    // Цвет опасности
    --light: #adb5bd
    // Цвет текста на тёмном фоне
    --dark: #303030

$whiteMedium: #e7e7e7
$whiteLower: #c6c6c6
$grey: #8b8b8b
$greyLower: rgba(161, 161, 161, 0.3)
$greyDark: rgba(128, 128, 128, 0.3)

$primaryMain: #fe586b
$primaryLight: #ff808e
$primaryDark: #e65a6a

$secondaryMain: #9084ff
$secondaryLight: #bfb8ff
$secondaryLighter: #e6e3ff
$secondaryDark: #473f91


$bgDark: #37363d
$bgPrimary: #454655
.dark-mode .card
  background-color: $bgDark !important

.dark-mode .nav-tabs .nav-link.active
  background-color: $bgDark !important

.form-control:not(.form-control-navbar):not(.form-control-sidebar):not(:hover)
  background-color: $bgDark !important
  border-color: $bgPrimary !important

.dark-mode .select2-dropdown
  background-color: $bgDark !important

.dark-mode .select2-dropdown .select2-search__field
  background-color: $bgDark !important

.dark-mode .select2-results__option[aria-selected=true]
  background-color: $bgPrimary !important

.django-tinymce-widget
  filter: invert(.9) hue-rotate(180deg)

  img
    filter: invert(1) hue-rotate(180deg)

.content-wrapper
  margin-left: 0 !important

.content-wrapper > .content
  border-bottom: 0 !important
  margin-bottom: 0 !important
  padding-bottom: 0 !important

.dark-mode .sidebar-dark-indigo .nav-sidebar > .nav-item > .nav-link.active, .dark-mode .sidebar-light-indigo .nav-sidebar > .nav-item > .nav-link.active
  background-color: $primaryMain
  color: #fff

.dark-mode .content-wrapper
  background-color: #27262b
  color: #fff

.dark-mode .navbar-dark
  background-color: #37363d
  border-color: #4b545c

[class*=sidebar-dark-]
  background-color: #37363d

.main-sidebar .brand-link
  background-color: #37363d !important

@media (prefers-color-scheme: dark)
  .card-header
    background-color: #0003 !important

@media (prefers-color-scheme: dark)
  .table-striped tbody tr:nth-of-type(odd)
    background-color: unset !important

.accent-lightblue .btn-link, .accent-lightblue .nav-tabs .nav-link, .accent-lightblue a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn)
  color: $whiteMedium
  transition: all 150ms ease-in-out

  &:hover
    color: $secondaryLight
    text-decoration: none

.select2-container--default .select2-selection--single
  padding-top: 10px
  background-color: $bgDark !important
  border: 1px solid $grey !important
  border-radius: 4px

.select2-container--default .select2-selection--single .select2-selection__rendered
  color: $whiteLower !important
  line-height: 28px

.select2-container--default .select2-dropdown .select2-search__field
  border-radius: .4em !important
  border: 1px solid $greyLower !important

.select2-results__option
  color: $grey

.select2-container--default .select2-results__option--selected
  background-color: $secondaryDark !important
  color: $whiteMedium

.select2-container--default .select2-dropdown .select2-search__field:focus, .select2-container--default .select2-search--inline .select2-search__field:focus
  outline: 0
  transition: all 150ms ease-in-out
  border: 1px solid $secondaryLight

.select2.select2-container.select2-container--admin-autocomplete
  border: 2px solid #fff4 !important
  border-radius: 6px


.select2-container--default .select2-selection--multiple
  background-color: $bgDark !important
  border: 1px solid $greyLower !important

.select2-container--default .select2-dropdown .select2-search__field
  transition: all 150ms ease-in-out !important
  margin-bottom: 3px !important
  margin-top: 0 !important
  border-radius: 3px !important

.select2-container--default .select2-dropdown .select2-search__field:focus, .select2-container--default .select2-search--inline .select2-search__field:focus
  border: 1px solid $grey !important
  border-radius: 3px !important
  margin-bottom: 3px !important
  margin-top: 0 !important

.select2-container--default .select2-selection--multiple .select2-selection__choice
  background-color: $bgDark !important
  border: 1px solid $greyLower !important
  padding: 0 0 0 20px !important

.select2-selection__choice__remove
  padding-left: 0 !important
  border-right: 1px solid $greyDark !important

.vTextField, .vLargeTextField, .vURLField, .vIntegerField, .vBigIntegerField, .vForeignKeyRawIdAdminField, .vDateField, .vTimeField, input[type="number"], input[type="text"]
  &:focus-visible
    outline: none !important

.vTextField, .vLargeTextField, .vURLField, .vIntegerField, .vBigIntegerField, .vForeignKeyRawIdAdminField, .vDateField, .vTimeField, input[type="number"], input[type="text"]
  color: $whiteLower !important
  background-color: $bgDark !important
  border: 1px solid $grey !important

.calendarbox
  border: 1px solid $greyLower
  background: $bgPrimary !important

.calendar
  table
    background-color: $bgDark !important

  th
    color: $whiteLower !important
    font-weight: bold
    background-color: $bgPrimary !important
    border-bottom: 1px solid $greyLower !important

  td.nonday
    background-color: $bgPrimary !important

  td
    border-bottom: 1px solid $greyLower !important

.calendar-shortcuts
  background: $bgPrimary !important
  border-top: 0 !important
  border-bottom: 1px solid $greyLower !important

.calendar-cancel
  background: $bgDark !important
  border-top: 0 !important

.calendarnav-previous
  top: -1px !important
  left: -1px !important

.calendarnav-next
  top: -1px !important
  right: -1px !important

input[type="checkbox"]
  transition: all 300ms ease-in-out
  filter: invert(.9) hue-rotate(-180deg)
  opacity: 46%

  &:checked
    filter: invert(0) hue-rotate(0deg)
    opacity: 100%


ul.select2-results__options
  -ms-overflow-style: none
  overflow: -moz-scrollbars-none

  &::-webkit-scrollbar
    width: 0
    height: 0

#result_list thead tr th .text
  color: $whiteMedium !important
  white-space: nowrap

.objectaction-item
  display: flex
  justify-content: center
  text-align: center
  align-items: center
  padding: .3em .6em !important
  margin-bottom: 1em !important
  border-radius: .2em
  background-color: $greyLower

.nav-sidebar
  .nav-item, a
    transition: all 140ms ease-in-out !important

#jazzy-actions
  input
    height: fit-content
    white-space: break-spaces

.login-logo
  img
    width: 100%

.btn-primary
  background-color: $primaryMain
  border-color: $primaryMain

  &:hover
    background-color: $primaryLight


.form-control
  color: #fffa

  &:focus
    border-color: $primaryLight

.select2-selection__choice
  background-color: #0003 !important
  color: #fff
  border-radius: .3rem
  padding-right: .5rem !important

  .select2-selection__choice__remove
    padding-right: 4px !important
    margin-right: .4rem !important

  &:hover
    background-color: rgba(80, 154, 255, 0.49)

.main-header
  z-index: 1039 !important

.main-sidebar
  .brand-link
    background-color: $bgDark

  .brand-text
    display: none !important

  .brand-image
    box-shadow: none !important
    opacity: 100% !important

.user-panel img
  width: 3.3rem !important
  height: 3.3rem !important
  object-fit: cover

.page-actions
  .objectaction-item
    margin-bottom: 0 !important

input#action-toggle
  transform: scale(1.6) translateY(1px)

input.action-select
  transform: scale(1.5) translateY(1px)

.nowrap
  white-space: nowrap

.sorting
  white-space: nowrap

@media (min-width: 800px)
  .admin-section-nav
    padding: 0 1rem !important
  .admin-section-content
    padding: 1rem 1rem !important

@media (max-width: 799px)
  .admin-section-nav
    padding: 0 !important
  .admin-section-content
    padding: 1rem 0 !important

.related-widget-wrapper
  .selector-available, .selector-chosen
    h2
      background-color: $greyLower !important
      border-radius: 10px
      border: none
      color: #fffd
      font-weight: 400

    .selector-filter, .filtered
      margin-top: 8px
      background-color: $greyLower !important
      border-radius: 10px
      border: none
      color: #fffd
      font-weight: 400

      label
        display: none

    select
      overflow-x: auto

      &::-webkit-scrollbar
        width: 0
        height: 0
      -ms-overflow-style: none
      overflow: -moz-scrollbars-none


@media (max-width: 767.98px)
  .main-sidebar, .main-sidebar::before
    margin-left: -270px !important

.main-header, .content-wrapper
  margin-left: 0 !important

.input-group-text
  background-color: $greyLower
  border: 0