/*!
 * Copyright (C) 2013-2019 Combodo SARL
 *
 * This file is part of iTop.
 *
 * iTop is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * iTop is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 */

/* Note: Most of the style has been duplicated from iTop 2.5 search as the extension must be compatible with iTop 2.3 */

$cw-color-grey-800: var(--ibo-color-grey-800) !default;
$cw-color-orange-600: var(--ibo-color-orange-600) !default;
$cw-color-blue-600: var(--ibo-color-blue-600) !default;
$cw-color-white-100: var(--ibo-color-white-100) !default;
$cw-color-grey-200: var(--ibo-color-grey-200) !default;

#dashlet_properties {
  form {
    table {
      /* Fieldsets */
      th[colspan="4"] {
        padding-top: 20px;
        padding-bottom: 5px;
      }
    }
  }
}

.calendar-view-container {
  box-sizing: border-box;
  position: relative;

  /* Sizing reset */
  * {
    box-sizing: border-box;
  }
  /* Hyperlink reset */
  a {
    color: inherit;
    text-decoration: none;
  }
  /* Input reset */
  input[type="text"],
  select {
    padding: 1px 2px;
  }

  .cw-header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-size: 12px;
    border: 1px solid $cw-color-blue-600;

    .cw-title {
      padding: 8px 10px;
      margin: 0;
      color: $cw-color-white-100;
      background-color: $cw-color-blue-600;
    }
    .cw-scopes {
      padding: 8px 8px 3px 8px;
      background-color: $cw-color-white-100;

      .cw-scope {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
        margin-bottom: 5px;

        > * {
          padding: 7px 8px;
          vertical-align: top;
          border: $cw-color-grey-200;
          border-radius: 3px;
          border: 1px solid #E1E7EC;
          background-color: $cw-color-white-100;
          color: $cw-color-grey-800;
        }
        .cw-s-header {
          * {
            vertical-align: middle;
            cursor: pointer;
          }
          .cw-sh-input {
            margin-right: 5px;
          }
          .cw-sh-buttons {
            .cw-sh-toggler {
              margin-left: 10px;
              font-size: 16px;
              cursor: pointer;
              color: $cw-color-orange-600;
              transition: all 0.3s ease-in-out;
            }
          }
        }
        .cw-s-content {
          position: absolute;
          z-index: -1;
          min-width: 100%;
          left: 0;
          margin-top: -1px;

          .cw-sc-groups {
            max-height: 300px;
            overflow-y: auto;

            .cw-sc-group {
              white-space: nowrap;

              > * {
                display: flex;
                align-items: center;
                margin: 3px 0px;
              }
              .cw-scg-input {
                margin-right: 5px;
              }
              .cw-scg-label {
                white-space: nowrap;
              }
            }
          }
          .cw-sc-buttons {
            margin-top: 8px;

            .cw-scb-button {
              padding: 3px 6px;
              font-size: 11px;

              &:last-of-type {
                margin-right: 0;
              }
            }
          }
        }

        &:last-child {
          margin-right: 0;
        }
        &.opened {
          z-index: 15;
          margin-bottom: 0; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */

          .cw-s-header {
            border-color: $cw-color-white-100 !important;
            box-shadow: none !important;
            padding-bottom: 13px; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */

            .cw-sh-toggler {
              transform: rotateX(-180deg);
            }
          }
        }
        &.opened_left {
          .cw-s-content {
            left: auto;
            right: 0;
          }
        }
      }
    }
  }
  .cw-content {
    .fc-header-toolbar .fc-center {
      font-size: 1.7rem;
    }
    .fc-view-container {
      position: relative;

      .cw-loader {
        display: none;
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 33%;
        background: black;
        opacity: 0.2;
        text-align: center;

        > * {
          color: $cw-color-white-100;
          font-size: 64px;
        }
      }

      .fc-view {
        &.fc-list-view {
          .fc-list-item-title {
            a {
              color: $cw-color-orange-600;
            }
          }
        }
      }

      .fc-event-container {
        .fc-event {
          padding: 0 0.25em;
          font-size: 0.9em;
          line-height: 1.6;
        }
      }
      .fc-popover {
        border: none;
        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);

        .fc-header {
          padding: 6px 8px 2px;
          background-color: transparent;

          .fc-close {
            font-size: 1.1em;
          }
        }

      }

      /* Specificity for short events with start and end dates within the same day */
      .fc-view{
        &.fc-month-view{
          .fc-event-container {
            .fc-event {
              &.cw-withinday-event {
                margin-left: 0;
                background-color: transparent !important;
                border: none !important;
                color: #4C4C4C !important;

                .fc-content {
                  .cw-color {
                    margin-left: 3px;
                    margin-right: 3px;
                    width: 8px;
                    height: 8px;
                  }
                  .fc-time {
                    margin-left: 3px;
                  }
                }
              }
            }
          }
          .fc-popover {
            .fc-body {
              .fc-event-container {
                .fc-event {
                  &.cw-withinday-event {
                    .fc-content {
                      .cw-color {
                        margin-left: 0 !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

    }
  }
  .cw-placeholder {
    text-align: center;
  }
}

/* Helper outside of the main CSS class as it will be used by tooltips. */
.cw-tooltip {
  .cw-tt-scope {
    color: #696969;
    font-size: 11px;
  }
}

.cw-color {
  display: inline-block;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cw-content.fc{
  font-family: inherit;
  display: block;
}

.dashlet-calendar-view.ibo-dashlet{
  background-color: $cw-color-white-100;
  position: relative
}

/* Prevent cursor clicking on the calendar (eg. While editing dashlet) */
.calendar-view-blocker {
  position: absolute;
  z-index: 9; /* To be above calendar links & all, but below .close-box (9) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
}

/* Override iTop 3 CSS reset */
.cw-content.fc th {
  text-align: center !important;
}