@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-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)

  // DIMENSIONS
  --header-height: 100px
  --header-height-collapsed: 60px
  --asidenav-width-xl: 250px
  --asidenav-width-lg: 20%
  --asidenav-width-md: 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: #0a9342
  --color-primary: var(--color-lmu-green)
  --color-light: #31cc72
  --color-lighter: #35db7a
  --color-dark: #087536
  --color-darker: #075728
  --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,
a:visited
  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 :target)::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)

@media (min-width: 426px)
  .main__content
    margin-left: var(--asidenav-width-md, 50px)

@media (min-width: 769px)
  .main__content
    margin-left: var(--asidenav-width-lg, 20%)

@media (min-width: 1200px)
  .main__content
    margin-left: var(--asidenav-width-xl, 250px)

.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"],
input[type="button"],
button,
.btn
  font-family: var(--font-base)
  outline: 0
  border: 0
  box-shadow: 0
  background-color: var(--color-dark)
  color: white
  padding: 10px 17px
  min-width: 100px
  transition: all .1s
  font-size: 16px
  cursor: pointer
  display: inline-block
  text-decoration: none

  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

.buttongroup
  display: grid
  grid: min-content / auto-flow 1fr

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

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

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

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

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

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

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

.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)
    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
    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
  font-size: 16px
  color: var(--color-font)
  line-height: 1.4
  vertical-align: top

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

.table__td--overriden
  font-weight: bold

.table__th
  background-color: var(--color-dark)
  position: relative
  font-size: 16px
  color: white
  line-height: 1.4
  padding-top: 10px
  padding-bottom: 10px
  font-weight: bold
  text-align: left

  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

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

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

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

  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

.deflist__dd
  font-size: 18px
  margin-bottom: 10px

  > 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: 12px 0
    margin: 0
    font-size: 16px

    &: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
    margin-top: 20px

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

.pseudonym
  font-family: monospace

.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 20px
  margin: 40px auto
  box-shadow: 0 0 4px 2px inset currentColor
  padding-left: 100px
  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

.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-warning)

// "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
  --red: calc(var(--hotness) * 200)
  --green: calc(255 - calc(var(--hotness) * 255))
  --opacity: calc(calc(var(--red) / 600) + 0.1)
  font-weight: var(--weight, 600)
  background-color: rgba(var(--red), var(--green), 0, var(--opacity))

.uuid
  font-family: monospace

.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

.allocation-course
  display: grid
  grid-template-columns: minmax(105px, 1fr) 9fr
  grid-template-areas: 'name        name       ' '.           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

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

  .allocation-course__application-label
    padding-top: 0

.comment
  white-space: pre-wrap
  font-family: 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)

.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
  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

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

.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

\: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)

.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%)

.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

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

// 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
  font-size: 14px
  white-space: pre-wrap
  font-family: monospace

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

.breadcrumbs__container
  position: relative
  color: var(--color-lightwhite)
  padding: 4px 20px 4px 40px
  background-color: var(--color-dark)

  a
    color: var(--color-lightwhite)

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

@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
  position: absolute
  left: 10px
  top: 5px
  width: 20px
  height: 30px
  opacity: 0.5
  text-decoration: none
  color: var(--color-lightwhite)
  text-align: center
  line-height: 30px
  
  @media (min-width: 426px)
    top: 8px

  &:hover
    opacity: 1

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

.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: monospace

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

.func-field__wrapper
  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