@import "/assets/fonts/FontAwesome/font-awesome.css";
@import "/assets/fonts/PTSans/pt-sans.css";

:root {
  --color-primary: #167;
  --color-secondary: #abc;
  --color-third: #045;
}

.default { color: var(--color-primary); }

span.info { background: var(--color-third); }

.warning { color: orange; }
.danger { color: darkred !important; }
.success { color: green; }
.note { color: gray; }

.readonly { cursor: not-allowed; }

.btn { border-radius: 0; }

.btn-primary {
  color: white;
  background-color: var(--color-primary);
  border-color: var(--color-third);
  &:hover {
    background-color: var(--color-third);
    border-color: var(--color-third);
  }
}

.form-control,
.input-group .form-control { border-radius: 0; }

.navbar { min-height: 40px; }

.nav > li > a:focus,
.nav > li > a:hover { background: none; }

a:link, a:hover, a:visited { text-decoration: none; }

.breadcrumb {
  margin-bottom: 0;
  background: #eee;
  border-radius: 0;
  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    padding-left: 0;
    content: "/";
  }
  .breadcrumb-action {
    float: right;
    padding-right: .5rem;
    padding-left: 2rem;
  }
}

body.headroom--not-top nav.breadcrumb { display: none; }

.btn-danger,
.btn-success { color: white !important; }

.page-header { margin: 20px 0 20px; }

.saturday > td {
  border-top: 1px solid var(--color-primary) !important;
  &:hover { background: #fff; }
}

.sunday > td {
  border-bottom: 1px solid var(--color-primary) !important;
  &:hover { background: #fff; }
}

.holiday { font-weight: bold; }
.number { text-align: right; }
.center { text-align: center; }
.negative { color: darkred; }

select[disabled],
input[disabled],
textarea[disabled],
input[readonly] { cursor: not-allowed !important; }

html {
  height: 100%;

  body {
    font-family: 'PT Sans';

    & > header {
      width: 100%;
      top: 0;
      position: fixed;
      z-index: 10;

      .search-bar {
        margin: 5px 40px 2px;
        float: right;
      }

      nav.navbar {
        height: 50px;
        background: var(--color-primary);
        border-radius: 0;
        border: none;
        margin-bottom: 0;

        div.collapse { background: gray; }
        a { color: white; }
        ul.nav li > a {
          color: white;
          padding-left: 20px;
          padding-right: 20px;
        }
        ul.nav li > a:hover { color: #eee; }
        ul.nav li.active a { padding-bottom: 11px; }
        a.navbar-brand {
          color: white;
          background: var(--color-third);
        }
        button.navbar-toggle {
          width: 40px;
          height: 34px;
          color: white;
          border: 1px solid white;
        }
        form {
          input {
            background: var(--color-third);
            border: 0;
            box-shadow: none !important;
            padding-right: 40px;
          }
          input::placeholder { color: white; }
          input, select, textarea { color: white; }
          button {
            background: none;
            color: white;
            border: 0;
            height: 34px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }

    nav.breadcrumb {
      width: 100%;
      a:link, a:hover, a:visited { color: #023; }
    }

    ul.area {
      list-style: none;
      display: inline-flex;
      float: right;
      li { margin-left: 40px; }
    }

    & > section {
      margin-top: 50px;
      padding-bottom: 20px;

      a:link, a:hover, a:visited { color: #023; }
      h2 a:hover { color: #056; }
      li { margin-left: 1em; }
      div.icons { margin-top: 20px; }
      div.icons > span { margin-left: 0.1em; }
      div.icons > span:before { font-size: 1.8em; }

      table {
        margin: 0 0 40px;
        padding: 0;
        border-spacing: 0;

        thead {
          height: 36px;
          background: #ddd;
        }
        th.actions { width: 180px; }
        th.sortable:after {
          font-family: 'FontAwesome';
          content: "\f0dc";
          font-size: smaller;
          font-weight: normal;
          margin-left: 2px;
        }
        th.header {
          cursor: pointer;
          border-bottom: 0;
        }

        tbody {
          td.thumb {
            vertical-align: middle;
            img {
              vertical-align: middle;
              max-height: 40px;
              max-width: 40px;
            }
            img:hover {
              transform: scale(1.8);
              transform-origin: 50% 50%;
              transition-duration: 0.2s;
              transition-timing-function: linear;
            }
          }
          tr:nth-child(even) { background: #eee; }
          tr:hover { background: #fff; }
          td li a.fa:hover {
            transform: scale(1.4);
            transform-origin: 50% 50%;
            transition-duration: 0.2s;
            transition-timing-function: linear;
          }
          td.file:before {
            font-family: FontAwesome;
            margin-right: 10px;
            content: "\f15b";
          }
          td.notes {
            vertical-align: middle;
            img {
              vertical-align: middle;
              max-height: 38px;
              max-width: 38px;
            }
          }
          ul {
            list-style: none;
            height: 0;
            li {
              list-style: none;
              display: inline;
              margin-left: 10px;
            }
          }
        }
      }
    }

    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 36px;
      color: white;
      z-index: 2;
      background: var(--color-third);
      div {
        margin: 10px 10px 0 10px;
        vertical-align: middle;
        a:link, a:hover, a:visited {
          color: white;
          text-decoration: none;
        }
        i.love { color: var(--color-secondary); }
      }
    }
  }
}

.lighter { color: #666; }
h3 { color: #023; }

@media (min-width: 768px) {
  div.collapse {
    background: none !important;
    ul.nav li.active { border-bottom: 4px solid var(--color-secondary); }
  }
  .navbar-form .form-control { width: 300px; }
}

input.nospin[type=number]::-webkit-inner-spin-button,
input.nospin[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input.nospin[type=number] { -moz-appearance: textfield; }

.navbar-form {
  padding: 0;
  margin: 0;
  border: none;
  position: absolute;
  float: right;
  top: 8px;
  right: 20px;
}

.btn-default:hover {
  color: white;
  background: none;
  border: none;
}

.main select {
  height: 32px;
  margin: 5px 10px 5px 0;
  background: transparent;
  border: 1px solid #ddd !important;
  &:focus { outline: none; }
}

.main input[type=number],
.main input[type=text],
.main input[type=date],
.main input[type=password] {
  border: 1px solid #ddd !important;
  height: 32px;
  margin: 4px 10px 4px 0;
}

input[readonly] { background: #eee; }

td.hours::after { content: ' Stunden'; }
td.days::after { content: ' Tage'; }

.workday { width: 40px; }
section.sign { display: none; }
img.logo { display: none; }

button.link {
  background: none !important;
  border: none;
  padding: 0 !important;
  cursor: pointer;
}