// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design

@use "common" as *

\:root
  // THEME INDEPENDENT COLORS
  --color-error: #8c0707
  --color-error-dark: #500303
  --color-warning: #fc9900
  --color-warning-dark: #c27400
  --color-success: #23d160
  --color-success-dark: #1ca64c
  --color-info: #c4c4c4
  --color-info-dark: #919191
  --color-nonactive: #efefef
  --color-nonactive-dark: #9a989e
  --color-lightblack: #1A2A36
  --color-lightwhite: #fcfffa
  --color-grey: #B1B5C0
  --color-grey-light: #efefef
  --color-grey-lighter: #f5f5f5
  --color-grey-medium: #9A989E
  --color-font: #34303a
  --color-fontsec: #5b5861

  // FONTS
  --font-base: "Source Sans Pro", "Trebuchet MS", sans-serif
  --font-logo: "Roboto", var(--font-base)
  --font-monospace: "Source Code Pro", monospace

  // DIMENSIONS
  --header-height: 100px
  --header-height-collapsed: 60px

*
  box-sizing: border-box
  padding: 0
  margin: 0
  -webkit-font-smoothing: antialiased

body
  background-color: white
  color: var(--color-font)
  font-family: var(--font-base)
  font-weight: 400
  font-size: 16px
  overflow-y: scroll

// THEMES

body
  // DEFAULT LMU THEME
  --color-lmu-green: #000091
  --color-primary: var(--color-lmu-green)
  --color-light: #8c96c8
  --color-lighter: #cccce9
  --color-dark: #6666bd
  --color-darker: #3333a7
  --color-link: var(--color-font)
  --color-link-hover: var(--color-font)
  --color-lmu-box-border: var(--color-lightwhite)

  &.theme--lavender
    --color-primary: #584c9c
    --color-light: #5969b5
    --color-lighter: #5f7dc2
    --color-dark: #4c4279
    --color-darker: #3c2765
    --color-link: var(--color-dark)
    --color-link-hover: var(--color-darker)

  &.theme--neutral-blue
    --color-primary: #3E606F
    --color-light: rgb(189, 201, 219)
    --color-lighter: rgb(145, 159, 170)
    --color-dark: rgb(42, 74, 88)
    --color-darker: #193441

  &.theme--aberdeen-reds
    --color-primary: #820333
    --color-light: #C9283E
    --color-lighter: #F0433A
    --color-dark: #540032
    --color-darker: #2E112D

  &.theme--moss-green
    --color-primary: #5C996B
    --color-light: #7ACC8F
    --color-lighter: #99FFB2
    --color-dark: #3D6647
    --color-darker: #1F3324

  &.theme--sky-love
    --color-primary: #87ABE5
    --color-light: #A0C6F2
    --color-lighter: #BAE2FF
    --color-dark: #7A95DE
    --color-darker: #6B7BC9
    --color-link: var(--color-lightblack)
    --color-link-hover: var(--color-darker)

// END THEMES

.emph
  font-style: italic

a:not(.btn),
a:visited:not(.btn)
  text-decoration: none
  font-weight: 600
  transition: color .2s ease, background-color .2s ease

a
  color: var(--color-link)

a:hover
  color: var(--color-link-hover)

ul, ol
  margin-left: 20px

h1, h2, h3, .div-h3, h4, h5
  font-weight: 600

h1
  font-size: 32px
  margin-bottom: 10px

h2
  font-size: 24px
  margin: 10px 0

  &:first-child
    margin-top: 0

h3, .div-h3
  font-size: 20px
  margin: 10px 0

  &:first-child
    margin-top: 0

h4
  font-size: 16px
  margin: 0

@media (max-width: 768px)
  h1
    font-size: 24px

  h2
    font-size: 20px

  h3, .div-h3
    font-size: 16px

// LAYOUT
.main
  position: relative

.main__content
  --current-header-height: var(--header-height-collapsed)
  position: relative
  background-color: white
  transition: padding-left .2s ease-out, margin-top 0.2s ease
  margin-top: var(--current-header-height)
  margin-left: 0

  :target:not(table, tr, .show-hide__toggle)::before
    content: ""
    display: block
    height: var(--current-header-height)
    margin: calc(-1 * var(--current-header-height)) 0 0

  > .container
    margin: 20px 0

  .navbar__container-radio:checked ~ * &
    margin-top: calc(var(--current-header-height) + 30px)
    
    @media (min-width: 769px) and (min-height: 501px)
      margin-top: calc(var(--current-header-height) + 44px)

.main__content, .modal__content
  a
    text-decoration: underline

  p, form, .div-p
    margin: 0.5rem 0

    &:first-child
      margin: 0 0 0.5rem 0

    &:last-child
      margin: 0.5rem 0 0 0

      &:first-child
        margin: 0

@media (min-width: 769px) and (min-height: 501px)
  .main__content
    --current-header-height: var(--header-height)

.main__content-body
  padding: 13px

@media (min-width: 426px)
  .main__content-body
    padding: 13px 20px
    .two-columns
      column-count: 1

@media (min-width: 769px)
  .main__content-body
    padding: 20px 40px
    .two-columns
      column-count: 2

.pseudo-focus
  outline: 5px auto var(--color-light)
  outline: 5px auto -webkit-focus-ring-color

// CONTAINER
.container
  + .container
    margin-top: 20px

// GENERAL BUTTON STYLES
input[type="submit"]:not(.btn-link),
input[type="button"]:not(.btn-link),
button:not(.btn-link),
.btn:not(.btn-link)
  font-family: var(--font-base)
  outline: 0
  box-shadow: 0
  background-color: var(--color-dark)
  color: white
  min-width: 100px
  transition: all .1s
  font-size: 16px
  cursor: pointer
  display: inline-block
  text-decoration: none

  &:not(.navbar__container-link)
    padding: 10px 17px
    border: 0

  a:hover
    color: white

  &:focus
    border-color: #3273dc
    box-shadow: 0 0 0 0.25rem rgba(50, 115, 220, 0.25)
    outline: 0

  .buttongroup > &
    min-width: 0
    
  &.btn-danger
    background-color: var(--color-error-dark)

.buttongroup
  display: grid
  grid: min-content / auto-flow max-content

  > form
    margin: 0 !important

  .buttongroup--inline
    display: inline-grid

input[type="submit"][disabled]:not(.btn-link),
input[type="button"][disabled]:not(.btn-link),
button[disabled]:not(.btn-link),
.btn[disabled]:not(.btn-link)
  opacity: 0.3
  background-color: var(--color-grey)
  cursor: default

input[type="submit"]:not([disabled]):not(.btn-link):hover,
input[type="button"]:not([disabled]):not(.btn-link):hover,
button:not([disabled]):not(.btn-link):hover,
.btn:not([disabled]):not(.btn-link):hover
  background-color: var(--color-light)
  color: white

  &.btn-danger
    background-color: var(--color-error)

.btn-primary:not(.btn-link)
  background-color: var(--color-primary)

.btn-info:not(.btn-link)
  background-color: var(--color-info)

.btn--small:not(.btn-link)
  padding: 4px 7px
  background-color: var(--color-darker)

input[type="submit"].btn-info:not(.btn-link):hover,
input[type="button"].btn-info:not(.btn-link):hover,
.btn-info:not(.btn-link):hover
  background-color: var(--color-grey)

.btn-link
  font-family: var(--font-base)
  outline: 0
  border: 0
  box-shadow: 0
  background: none
  color: inherit
  padding: 0
  min-width: unset
  font-size: inherit
  cursor: pointer
  display: inline
  text-decoration: underline
  font-weight: 600
  font-style: inherit
  transition: color .2s ease, background-color .2s ease

  &:not([disabled]):hover
    color: var(--color-link-hover)

// STACK ICON STYLE
.icon--stacked
  font-size: 0.5rem

// GENERAL TABLE STYLES
.table
  margin: 21px 0
  width: 100%

.table--narrow
  width: unset
    

.table:first-child
  margin-top: 0

.table:last-child
  margin-bottom: 0

.table--striped
  .table__row:not(.no-stripe):not(.table__row--sum):nth-child(even)
    .table__td
      background-color: rgba(0, 0, 0, 0.03)

.table--hover
  .table__row:not(.no-hover):not(.table__row--sum):not(.table__row--head):not(.table__row--foot):hover
    .table__td
      background-color: rgba(0, 0, 0, 0.07)

.table__row--sum td.table__td::before
  content: 'Σ'
  font-weight: bold
  margin-right: .25em

// SCROLLTABLE
.scrolltable
  overflow: auto

.scrolltable--bordered
  box-shadow: 0 0 1px 1px var(--color-grey-light)

@media (max-width: 425px)
  .scrolltable
    margin-left: -10px
    padding-left: 10px
    margin-right: -10px
    padding-right: 10px

// TABLE DESIGN
.table__td, .table__th
  padding-top: 14px
  padding-bottom: 10px
  padding-left: 10px
  padding-right: 10px
  max-width: 300px

  &.table__td--unlimited
    max-width: unset

  &.table__td--wide
    max-width: 600px

.table__td--number
  width: min-content
  padding-left: 0

  .table--striped &, .table--hover &
    vertical-align: middle
  
  .table__td-content
    text-align: right
    font-size: 0.9rem
    font-weight: 600
    color: var(--color-fontsec)

.table__td--tooltip
  width: 2em

.table__td
  font-size: 16px
  color: var(--color-font)
  line-height: 1.4
  vertical-align: top

  &.table__td--bottom
    vertical-align: bottom

  &.table__td--middle
    vertical-align: middle

.table__td--automatic
  font-style: oblique
  color: var(--color-fontsec)

.table__td--overriden
  font-weight: bold

.table__td--center > .table__td-content
  margin: auto
  width: max-content

.table__th
  position: relative
  font-size: 16px
  line-height: 1.4
  padding-top: 10px
  padding-bottom: 10px
  font-weight: bold
  text-align: left
  vertical-align: middle

  &:not(.table__th--bright)
    background-color: var(--color-dark)
    color: white

  a
    color: white
    text-decoration: none
    font-weight: bold

    &:hover
      color: inherit

    &::before
      @extend .fas

      content: fa-content($fa-var-link)
      margin-right: 0.25em

    &.table__th-link::before
      display: none

.table__th--number
  padding: 0

@media (max-width: 1200px)
  .table th
    padding: 4px 6px

.table__td-content
  max-height: 200px
  overflow-y: auto

  .table__td--unlimited &, .table__td--wide &
    max-height: unset
    overflow-y: unset

.table--vertical
  th, .table__th
    background-color: transparent
    color: var(--color-font)
    width: 170px
    text-align: right
    padding-right: 15px
    font-weight: 400

    a
      color: var(--color-lin)

      &:hover
        color: var(--color-link-hover)

      &::before
        display: none

  td, .table__td
    font-weight: 600
    color: var(--color-font)

.table--condensed
  margin: 0

  .table__th,
  .table__td
    padding: 4px 8px

// UNORDERED LIST
.list-ul__item
  // padding: 4px 0;
  line-height: 25px

// LIST MODIFIERS
.list--iconless
  list-style-type: none
  margin-left: 0

.list--inline
  ul
    display: inline-block
    margin-left: 0

    li
      display: inline-block

ul.list--inline
  display: inline-block
  margin-left: 0

  li
    display: inline-block

.list--comma-separated li
  &::after
    content: ', '
    white-space: pre

  &:last-of-type::after
    content: none

.list--space-separated li
  &::after
    content: ' '
    white-space: pre

  &:last-of-type::after
    content: none

.list--icon-width li
  width: 1rem
  height: 1rem

// DEFINITION LIST
.deflist
  display: grid
  grid-template-columns: minmax(0,100%)
  grid-row-gap: 7px

.deflist__dt,
.deflist__dd
  padding: 2px 0

.deflist__dt
  font-weight: 600
  font-size: 1.12em
  margin-bottom: .6em

  .deflist__explanation
    color: var(--color-fontsec)
    font-size: 0.9em

.deflist__dd
  > p, > .div-p
    margin-top: 0

@media (min-width: 768px)
  .deflist
    grid-template-columns: fit-content(25vw) minmax(0,1fr)

    .deflist
      margin-top: -10px
      margin-right: -15px

      .deflist__dd
        padding-right: 15px

  .deflist__dt,
  .deflist__dd
    padding: .75em 0
    margin: 0
    font-size: unset

    .explanation &
      padding-top: 0
      padding-bottom: 0

    &:last-of-type
      border: 0

  .deflist__dt
    padding-right: 50px

  .deflist__dd
    padding-right: 15px

section
  padding-bottom: 30px
  border-bottom: 1px solid #d3d3d3

  & + section, & + .two-column-sections
    margin-top: 20px

  &:last-of-type
    border-bottom: none
    padding-bottom: 0px

.two-column-sections
  padding-bottom: 30px
  border-bottom: 1px solid #d3d3d3

  & + section, & + .two-column-sections
    margin-top: 20px

  &:last-of-type
    border-bottom: none
    padding-bottom: 0px

  @media (min-width: 768px)
    display: flex
    justify-content: space-between

    & > section
      padding: 0
      border: none

      margin: 0 auto
      width: calc(50% - 7px)

.headline-one
  margin-bottom: 10px

// Notification style used as requested by @hamanf in #298, but class was not globally available. Copied from dead-code. For @hamanf to clean up:

.notification
  position: relative
  border-radius: 3px
  padding: 10px 20px 10px 100px
  margin: 40px auto
  box-shadow: 0 0 4px 2px inset currentColor
  min-height: 100px
  max-width: 700px
  font-weight: 600
  vertical-align: center
  display: grid
  grid-column: 2

  h1 + &
    margin: 0 auto 0.5rem

  &::before
    @extend .fas

    position: absolute
    display: flex
    left: 0
    top: 0
    height: 100%
    width: 100px
    font-size: 50px
    align-items: center
    justify-content: center

  .notification__content
    grid-column: 1
    align-self: center
    color: var(--color-font)

  &.notification--broad
    max-width: none

  &:first-child
    margin-top: 0
  &:last-child
    margin-bottom: 0

.form-section-notification
  display: grid
  grid-template-columns: 1fr 3fr
  grid-gap: 5px

  fieldset
    display: grid
    grid-template-columns: 1fr 3fr
    grid-gap: 5px
    grid-column: 1/3

  .notification
    margin: 0

  + .form-group, + .form-section-legend, + .form-section-notification
    margin-top: 11px

  + .form-section-title
    margin-top: 40px

@media (max-width: 768px)
  .form-section-notification
    grid-template-columns: 1fr
    margin-top: 17px

    fieldset
      grid-template-columns: 1fr
      grid-column: 1/2

  .notification
    grid-column: 1
    max-width: none
    padding-left: 40px

    &::before
      height: auto
      width: 45px
      font-size: 20px
      top: 15px

.notification-error
  color: var(--color-error)

.notification-warning
  color: var(--color-warning)

.notification-info
  color: var(--color-lightblack)

.notification-success
  color: var(--color-success-dark)

.notification-nonactive
  color: var(--color-nonactive)

// "Heated" element.
// Set custom property "--hotness" to a value from 0 to 1 to turn
// the element's background to a color on a gradient from green to red.

// TBD:
// - move to a proper place
// - think about font-weight...

// Example:
// <div .heated style="--hotness: 0.2">Lorem ipsum

.heated
  --hotness: 0

  $hue: calc(120 - var(--hotness) * 120)
  $opacity: calc(var(--hotness) * var(--hotness) / 3 + 0.1)

  background-color: hsla($hue, 75%, 50%, $opacity) !important
  font-weight: calc(var(--hotness) * 200 + 400)

.dual-heated
   --hotness: 0

   $hue: calc(240 - var(--hotness) * 120)
   $opacity: calc(((var(--hotness) - 1) * (var(--hotness) - 1)) / 3 + 0.1)
   
   background-color: hsla($hue, 75%, 50%, $opacity) !important
   font-weight: calc(((var(--hotness) - 1) * (var(--hotness) - 1)) * 200 + 400)

   &.degenerate
     $hue: calc(240 + var(--hotness) * 60)
   
     background-color: hsla($hue, 75%, 50%, $opacity) !important


.uuid, .pseudonym, .ldap-primary-key, .email, .file-path, .metric-value, .metric-label, .workflow-payload--text, .cryptoid, .allocation-matching-fingerprint
  font-family: var(--font-monospace)

.shown
  font-family: var(--font-monospace)
  white-space: pre-wrap

.token
  font-family: var(--font-monospace)
  white-space: pre-wrap
  word-break: break-all

.form--inline
  display: inline-block

.ribbon
  position: fixed
  top: calc(40px + var(--header-height))
  transition: all 0.2s ease
  right: -63px
  transform: rotate(45deg)
  width: 250px
  background: var(--color-error)
  text-align: center
  color: var(--color-lightwhite)
  font-weight: 600
  font-size: 1.25rem
  line-height: 2em
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)
  z-index: 21
  pointer-events: none

  .navbar__container-radio:checked ~ &
    top: calc(84px + var(--header-height))

@media (max-width: 768px), (max-height: 500px)
  .ribbon
    top: calc(20px + var(--header-height-collapsed))
    right: -83px
    transform: rotate(45deg) scale(0.6)

    .navbar__container-radio:checked ~ &
      top: calc(50px + var(--header-height-collapsed))

#admin-studyterms
  select, option, input
    min-width: 50px

.allocation__label, .allocation__explanation
  color: var(--color-fontsec)
  font-style: italic

.allocation__state
  color: var(--color-font)
  font-weight: 600
  font-style: normal

.allocation__courses
  margin: 20px 0 0 40px

  .form-group__input > &
    margin: 0

.allocation-course
  display: grid
  grid-template-columns: minmax(105px, 1fr) 9fr
  grid-template-areas: 'name name' '. admin-info' '. registered' 'prio-label prio' 'instr-label instr' 'form-label form'
  grid-gap: 5px 7px
  margin: 12px 0
  padding: 0 10px 12px 7px
  border-left: 1px solid var(--color-grey)

  // &:last-child {
       padding: 12px 10px 0 10px;
     }
    
     & + .allocation-course {
       border-top: 1px solid var(--color-grey);
     }

  &:nth-child(2n)
    background-color: rgba(0, 0, 0, 0.015)

  .allocation-course__registered
    grid-area: registered

  .allocation-course__priority
    grid-area: prio

  .allocation-course__priority-label
    grid-area: prio-label
    justify-self: end
    align-self: center
    text-align: right

  .allocation-course__name
    grid-area: name
    align-self: center
    font-size: 1.2rem

  .allocation-course__instructions
    grid-area: instr

  .allocation-course__instructions-label
    grid-area: instr-label
    justify-self: end
    text-align: right

  .allocation-course__application
    grid-area: form

  .allocation-course__application-label
    grid-area: form-label
    justify-self: end
    text-align: right
    padding-top: 6px

  .allocation-course__admin-info
    @extend .explanation
    grid-area: admin-info

    .notification
      margin-top: 0

@media (max-width: 426px)
  .allocation-course
    grid-template-columns: 1fr
    grid-template-areas: 'name' 'admin-info' 'registered' 'prio-label' 'prio' 'instr-label' 'instr' 'form-label' 'form'

  .allocation-course__application-label
    padding-top: 0

.comment, .literal-error
  white-space: pre-wrap
  font-family: var(--font-monospace)

th
  vertical-align: top
  text-align: left

th, td
  padding-bottom: 7px

.course-news
  max-height: 50vh
  overflow: auto

  .course-news-item
    padding: 12px 0
    border-bottom: 1px solid #d3d3d3

    &:last-child
      padding-bottom: 0
      border-bottom: none

    &:first-child
      padding-top: 0

    .course-news-item__last-edit
      color: var(--color-fontsec)
      font-style: italic

    .course-news-item__title .modal__trigger-label
      font-style: normal

    .course-news-item__summary .modal__trigger-label
      font-weight: normal
      font-style: normal
      color: var(--color-font)

.course-event-note--hidden
  display: none

.bound_explanation
  color: var(--color-fontsec)
  font-style: italic

.action
  max-width: 800px
  padding: 3px 0

  &:not(:last-child)
    margin-bottom: 7px

  &:not(:first-child)
    margin-top: 7px

.action__options
  max-height: 450px
  overflow-y: auto

.action__option
  display: flex

  &:not(:last-child)
    margin-bottom: 10px

.action__label,
.action__option-label
  margin-left: 15px
  vertical-align: top

.action__fieldset
  margin: 7px 0 5px 9px
  padding: 5px 0 10px
  border-left: 1px solid #bcbcbc
  padding-left: 16px
  position: relative

.action__toggle-all
  display: flex
  border-bottom: 1px solid #bcbcbc
  padding-bottom: 8px
  margin-bottom: 8px

.action__checked-counter
  position: absolute
  right: 5px
  top: 5px

.occurrence--not-registered, .no-bonus, .allocation-course--excluded, .allocation-course--inactive, .occurrence--ignored, .allocation--no-allocation-user
  text-decoration: line-through

.result
  font-size: 3rem
  margin: 30px 30px 0 !important

.glossary
  dt, .dt
    font-weight: 600

    &.sec
      font-style: italic
      font-size: 0.9rem
      font-weight: 600
      color: var(--color-fontsec)

  dd, .dd
    margin-left: 12px

  dd + dt, .dd + dt, dd + .dt, .dd + .dt
    margin-top: 17px

.deflist--no-grid
  dt, .dt
    font-weight: 600
  dd, .dd
    margin-left: 12px

.note
  font-size: 0.9rem
  font-weight: 600
  color: var(--color-fontsec)

.explanation
  font-style: italic
  @extend .note

  emph
    font-style: normal

// SORTABLE TABLE-HEADERS
.table__th.sortable
  position: relative
  padding-right: 24px
  cursor: pointer

.table__th.presorted,
.table__th.presorted
  position: relative
  padding-right: 24px

.table__th.sortable::after,
.table__th.sortable::before
  content: ''
  position: absolute
  top: 50%
  right: 4px
  width: 0
  height: 0
  border-left: 8px solid transparent
  border-right: 8px solid transparent
  border-bottom: 8px solid rgba(255, 255, 255, 0.4)

.table__th.sortable::before
  // magic numbers to move arrow back in the right position after flipping it.
     this allows us to use the same border for the up and the down arrow
  transform: translateY(150%) scale(1, -1)
  transform-origin: top

.table__th.sortable::after
  transform: translateY(-150%)

.table__th.sortable:hover::before,
.table__th.sortable:hover::after
  border-bottom-color: rgba(255, 255, 255, 0.7)

.table__th.sorted-asc::before,
.table__th.sorted-desc::after
  border-bottom-color: white !important

.table__th.presorted::before,
.table__th.presorted::after
  content: ''
  position: absolute
  top: 50%
  right: 4px
  width: 0
  height: 0
  border-left: 8px solid transparent
  border-right: 8px solid transparent
  border-bottom: 8px solid rgba(255, 255, 255, 0.2)

.table__th.presorted.sorted-asc::before,
.table__th.presorted.sorted-desc::after
  border-bottom-color: white !important

.table__th.presorted::before
  transform: translateY(150%) scale(1, -1)
  transform-origin: top
.table__th.presorted::after
  transform: translateY(-150%)

\:root
  --color-grey-light: #efefef
  --color-grey-lighter: #f5f5f5
  --color-fontsec: #5b5861
  --course-bg-color: var(--color-grey-lighter)
  --course-expanded-bg-color: var(--color-grey-light)

.scrolltable
  box-shadow: none !important

.course-header::after,
.course-header::before
  content: ''
  position: absolute
  right: 10px
  top: 20px
  width: 0
  height: 0
  border-left: 8px solid transparent
  border-right: 8px solid transparent
  border-bottom: 8px solid rgba(255, 255, 255, 0.4)
  
.inactive-course-header::before,
.inactive-course-header::after
  content: ''
  position: absolute
  right: 10px
  top: 20px
  width: 0
  height: 0
  border-left: 8px solid transparent
  border-right: 8px solid transparent
  border-bottom: 8px solid rgba(255,255,255, 0.2)

.inactive-course-header.sorted-asc::before,
.inactive-course-header.sorted-desc::after
  border-bottom-color: white !important

.course-header::before
  // magic numbers to move arrow back in the right position after flipping it.
    this allows us to use the same border for the up and the down arrow
  transform: translateY(150%) scale(1, -1)
  transform-origin: top

.course-header::after
  transform: translateY(-150%)

.inactive-course-header::before
  transform: translateY(150%) scale(1, -1)
  transform-origin: top
.inactive-course-header::after
  transform: translateY(-150%)

.course-header:hover::before,
.course-header:hover::after
  border-bottom-color: rgba(255, 255, 255, 0.7)

.sorted-asc::before,
.sorted-desc::after
  border-bottom-color: white !important

.csv-export
  margin-bottom: 13px

.csv-import
  margin-bottom: 13px

.table-filter
  margin-bottom: 13px

.table-filter__toggle
  padding: 3px 7px

// TABLE HEADER
.table-header
  display: flex
  flex-flow: row-reverse
  justify-content: space-between
  margin-bottom: 15px

  &:empty
    margin: 0

// TABLE FOOTER
.table-footer
  display: flex
  flex-flow: row-reverse
  justify-content: space-between
  margin-top: 15px

  &:empty
    margin: 0

// PAGINATION
.pagination
  margin-top: 20px
  overflow: auto

  .pages
    text-align: center
    white-space: nowrap
    margin: 0

    .page-link
      margin-top: 7px
      display: inline-block
      background-color: var(--color-grey-medium)

      + .page-link
        margin-left: 7px

      a
        color: var(--color-lightwhite)
        padding: 7px 13px
        display: inline-block
        text-decoration: none

      &:not(.current):hover
        background-color: var(--color-primary)

        a
          color: var(--color-lightwhite)

      &.current
        pointer-events: none
        background-color: var(--color-dark)

        a
          pointer-events: none

#changelog
  max-height: 75vh
  overflow: auto

#gitrev
  font-size: 12px
  white-space: pre-wrap
  font-family: var(--font-monospace)

.breadcrumbs__container
  position: relative
  color: var(--color-lightwhite)
  padding: 7px 13px
  background-color: var(--color-dark)

  a
    color: var(--color-lightwhite)

@media (min-width: 426px)
  .breadcrumbs__container
    padding: 7px 20px

@media (min-width: 769px)
  .breadcrumbs__container
    padding: 7px 40px

ul.breadcrumbs__list
  display: flex
  align-items: center
  height: 30px
  margin: 0 -5px

  & > li
    display: block

.breadcrumbs__item
  opacity: 0.8
  margin: 0 5px

  &:hover
    opacity: 1

.breadcrumbs__item-separator
  line-height: 0
  opacity: 0.5
  margin: 0 5px
  margin-top: 1px

a.breadcrumbs__home
  opacity: 0.5
  margin-right: 7px

  @media (min-width: 426px)
    top: 8px

  &:hover
    opacity: 1

.breadcrumbs__last-item
  font-weight: 600
  opacity: 1

.recipient-categories
  overflow: auto
  max-height: 75vh

.recipient-category
  max-width: 400px
  padding: 3px 0

  &:not(:last-child)
    margin-bottom: 7px

  &:not(:first-child)
    margin-top: 7px

.recipient-category__options
  max-height: 150px
  overflow-y: auto

.recipient-category__option
  display: flex

  &:not(:last-child)
    margin-bottom: 10px

.recipient-category__label,
.recipient-category__option-label
  margin-left: 15px
  vertical-align: top

.recipient-category__fieldset
  margin: 7px 0 5px 9px
  padding: 5px 0 10px
  border-left: 1px solid #bcbcbc
  padding-left: 16px
  position: relative

.recipient-category__option-add
  display: flex

  .btn-mass-input-add
    margin-left: 10px
    padding: 10px 0

.recipient-category__options + .recipient-category__option-add
  margin-top: 10px

.recipient-category__toggle-all
  display: flex
  border-bottom: 1px solid #bcbcbc
  padding-bottom: 8px
  margin-bottom: 8px

.recipient-category__checked-counter
  position: absolute
  right: 5px
  top: 5px

.table__td--csv, .table__th--csv
  font-family: var(--font-monospace)

.confirmationText
  white-space: pre-wrap
  font-size: 14px
  font-family: var(--font-monospace)

.func-field__wrapper, .allocation-missing-prios, .allocation-users__accept, .corrections-overview__section
  max-height: 75vh
  overflow: auto

.footer
  display: flex
  flex-flow: row wrap
  justify-content: center
  align-items: baseline
  align-content: flex-start
  text-align: center
  padding: 20px
  position: relative
  margin: 40px 0 0 0

  &::before
    content: ''
    position: absolute
    top: 0
    left: 10%
    width: 80%
    height: 2px
    background-color: var(--color-grey-light)

.footer-links > *
  margin-right: 0.5em
  display: block

  &:last
    margin-right: 0

.table--grading-key
  th, td
    padding: 3px

.btn.btn-mass-input-delete,
.btn.btn-mass-input-add
  background-color: #999
  min-width: 50px
  padding: 5px 15px
  font-weight: 700
  font-size: 1.3rem

.file-input__unpack
  font-size: .9rem
  display: flex
  align-items: center
  margin-top: 10px

  .checkbox
    display: inline-block
    margin-left: 7px

.text--right
  text-align: right
.text--center
  text-align: center

.course__registration-status
  margin-bottom: 12px

.csv-parse-error
  white-space: pre-wrap
  font-family: var(--font-monospace)
  overflow: auto
  max-height: 75vh

.labeled-checkbox
  display: grid
  grid-gap: 0 7px
  grid-template-columns: 20px 1fr
  grid-template-areas: "checkbox label"
  
  &__checkbox
    grid-area: checkbox
    place-self: start center
    line-height: 0

  &__label
    grid-area: label

.apidocs
  pre
    display: block
    box-shadow: inset 0 0 4px 4px var(--color-grey-light)
    white-space: pre-wrap
    overflow-x: auto
    tab-size: 2
    padding: 10px

.news__system-messages
  overflow-y: auto
  max-height: 75vh

.news__system-message-detail
  font-style: italic
  font-size: 0.9rem
  font-weight: 600
  color: var(--color-fontsec)

  .news__system-message-content + &
    margin-top: 10px

.news__system-message
  border-left: 3px solid var(--color-info)
  padding-left: 17px
  background-color: rgba(0,0,0,0.015)

  & + .news__system-message
    margin-top: 17px
  
  &--info
    border-left-color: var(--color-info)

  &--error
    border-left-color: var(--color-error)
    
  &--warning
    border-left-color: var(--color-warning)
    
  &--success
    border-left-color: var(--color-success)
    
  &--disabled
    border-left-color: var(--color-nonactive)


.active-allocations__wrapper
  display: flex
  margin: -7px
  flex-wrap: wrap

.active-allocations__allocation
  margin: 7px
  display: grid
  grid-template-columns: auto min-content
  grid-template-areas: '. ident' 'name name' 'time time' 'data data'
  border: 1px solid var(--color-grey)
  padding: 7px
  min-width: calc((100vw - 40px - 8 * 7px) / 4)

  @media (min-width: 426px)
    min-width: calc((100vw - 40px - 8 * 7px) / 4)
  @media (min-width: 769px)
    min-width: calc((100vw - 80px - 8 * 7px) / 4)
  @media (min-width: 1200px)
    min-width: calc((100vw - 80px - 8 * 7px) / 4)

a.active-allocations__allocation-ident
  white-space: nowrap
  text-decoration: none
  color: var(--color-fontsec)
  font-weight: 600
  font-size: 0.9rem
  text-align: right
  grid-area: ident

.active-allocations__allocation-name
  grid-area: name
  text-align: center

.active-allocations__allocation-time
  grid-area: time

.active-allocations__allocation-info
  grid-area: data
  margin: 0

  tbody
    th
      text-align: right
      padding-right: 14px
    td
      text-align: center

  thead th
    text-align: center
    padding: 5px

  td.active-allocations__allocation-info-item--old
    font-style: italic
    color: var(--color-fontsec)

  th.active-allocations__allocation-info-item--old
    color: var(--color-fontsec)


.faq__question
  font-size: 18px
  font-weight: 400

  margin: 0

.faq__answer
  margin-left: 17px

:not(.show-hide--collapsed) > .faq__answer
  margin-top: 7px

.faq__section
  padding-bottom: 10px

  &:last-child, &.show-hide--collapsed
    border-bottom: none
    padding-bottom: 0

    & + section:not(.faq__section)
      border-top: 1px solid #d3d3d3
      padding-top: 30px

.faq__section + .faq__section
  margin-top: 10px

.faq__question-link
  opacity: 0.2

  &:hover
    opacity: 1

.multi-user-invitation-field__wrapper
  max-width: 25rem

.json, .yaml
  white-space: pre-wrap
  font-family: var(--font-monospace)

pre, tt, code
  font-family: var(--font-monospace)

.workflow-instances
  margin: 0
  list-style: none

  & > li
    margin: 0 0 0.5rem
    padding: 0 10px 12px 7px
    border-left: 1px solid var(--color-grey)
    
    &:nth-child(2n)
      background-color: rgba(0, 0, 0, 0.015)

    .workflow-instance--name, .workflow-instance--title
      font-size: 1.2rem
      font-weight: 600

    .workflow-instance--name
      font-family: var(--font-monospace)

    .workflow-instance--actions
      margin: 0 0 0.5rem 11px

.workflow-history-labels
  display: flex
  flex-direction: column
  &__own
    align-self: flex-end
    text-align: right
  &__others
    align-self: flex-start
    text-align: left

.workflow-history
  @extend .list--iconless

  display: flex
  flex-direction: column
  position: relative

  .workflow-history--item
    border: 1px solid var(--color-grey)
    align-self: flex-start
    padding: 7px
    margin: 12px 0
    min-width: 45%
    display: grid
    grid-template-areas: 'user time' 'action-states action-states' 'payload payload'
    margin-right: 10vw

    &.workflow-history-item__self
      align-self: flex-end
      margin-left: 10vw
      margin-right: 0

    &:last-child
      margin-bottom: 0
    &:first-child
      margin-bottom: 0

    .workflow-history--item-user
      grid-area: user
    .workflow-history--item-time
      grid-area: time
      text-align: right
    .workflow-history--item-action-states
      grid-area: action-states

      margin-top: 7px

      .deflist__dt, .deflist__dd
        padding-top: 0
        padding-bottom: 0
    .workflow-history--item-payload-changes
      grid-area: payload

      margin-top: 12px
      border-top: 1px solid var(--color-grey)
      padding-top: 12px

      .workflow-history--item-payload-changes-label
        font-size: 20px
        font-weight: 600


  .workflow-history--item-user-special, .workflow-history--item-action-special, .workflow-history--item-state-special
    @extend .explanation

.workflow-state
  margin-top: 7px

  .deflist__dt, .deflist__dd
    padding-top: 0
    padding-bottom: 0

.workflow-payload
  margin-top: 12px
  
  .workflow-payload--label
    font-size: 20px
    font-weight: 600

video
  max-width: 100%
  max-height: calc(90vh - var(--current-header-height))
  background: black

.video-container
  display: flex
  justify-content: center
  width: 100%

  & > video
    object-fit: contain
    flex-grow: 1

.hr
  height: 1px
  width: 90%
  margin: 0.5em auto
  background-color: var(--color-grey)

.authorship-statement
  & > dt
    font-weight: 600
    color: var(--color-fontsec)
    font-style: italic
    font-size: .9rem

  & > dd
    margin-left: 1em

    & + dt
      margin-top: .5em

.authorship-statement-accept__accept
  margin-top: 1em
  display: grid
  grid-template-columns: 25px 1fr
  grid-template-areas: 'checkbox label'

.authorship-statement-accept__container
  max-width: 600px
  max-height: 25vh
  overflow: auto

.authorship-statement-accept__accept-checkbox
  align-self: center
  grid-area: checkbox

.authorship-statement-accept__accept-label
  grid-area: label
  font-weight: 600

.authorship-statement__id
  font-size: .5em
  font-family: var(--font-monospace)
  color: var(--color-fontsec)

.exam-office-label
  --lbl-padding-vert: 5px
  --lbl-padding-hori: 15px
  padding: var(--lbl-padding-vert) var(--lbl-padding-hori)
  border-radius: 20px 20px 20px 20px
  font-weight: 600
  text-align: center
  width: fit-content
  margin: 0 auto
  &.success
    background-color: var(--color-success-dark)
    color: var(--color-lightwhite)
  &.error
    background-color: var(--color-error)
    color: var(--color-lightwhite)
  &.warning
    background-color: var(--color-warning)
    color: var(--color-lightwhite)
  &.info
    background-color: var(--color-lightblack)
    color: var(--color-lightwhite)
  &.nonactive
    background-color: var(--color-nonactive)
    color: var(--color-nonactive-dark)