// --------------------------------------------------------------------------------
// Global
// --------------------------------------------------------------------------------
:root {
  --pi-field-bg-color: rgba(0, 0, 0, 0.1);
}

:root:has(.body--dark) {
  --pi-field-bg-color: rgba(255, 255, 255, 0.1);
}


.pi {
  &-result {
    &-title {
      font-size: 1.6rem;
    }
    &-subtitle {
      font-size: 1rem;
    }
  }

  &-pagination {
    .q-btn {
      width: 32px;
      height: 32px;
      font-weight: normal;
      background: var(--q-accent);
    }

    .size-dropdown {
      width: unset;
      min-height: unset;
      margin: 0 10px;
      padding: 4px 6px 4px 12px;

      .q-btn-dropdown__arrow {
        margin-left: 0;
      }
    }
  }
}

// --------------------------------------------------------------------------------
// Field
// --------------------------------------------------------------------------------
.pi-field {
  &.q-field--standout.q-field--focused, &.q-field--highlighted {
    .q-field__control {
      background: var(--pi-field-bg-color) !important;
      box-shadow: unset !important;
      box-sizing: border-box !important;

      input, .q-field__suffix {
        color: var(--q-info);
      }
      .q-field__marginal, .q-field__native {
        color: var(--q-info);
      }

    }
  }

  &.q-field--standout.q-field--readonly {
    .q-field__control {
      padding: 0;
    }
    .q-field__control:before {
      border: unset;
      background: var(--q-secondary);
    }
  }

  .q-field__control {
    &:hover {
      background-color: transparent!important;
    }
  }

  &.q-field--dense {
    .q-btn {
      height: 40px;
    }
  }

  &.max-height textarea {
    max-height: 7em;
    overflow-y: auto !important;
  }
}

// --------------------------------------------------------------------------------
// Menu
// --------------------------------------------------------------------------------
.pi-menu {
  min-width: 160px !important;
  max-height: 80vh !important;
  border-radius: 12px;

  .q-list {
    padding: 8px 8px;
    .q-item {
      padding: 4px 8px;
      min-height: unset;
      border-radius: 4px;

      &:not(:first-child) {
        margin-top: 2px;
      }

      &__label {
        .q-chip {
          margin: 4px 0 4px 4px;
        }
      }

      .q-avatar {
        width: 2rem !important;
        height: 2rem !important;
      }
    }
    .q-separator {
      margin: 8px -8px;
    }
  }

  .q-item {
    min-height: unset;
    padding: 4px 8px;

    &:has(.q-item__section--avatar) {
      .q-item__section--main {
        margin-left: 8px;
      }
    }

    .side-label {
      .q-icon {
        font-size: 1rem;
        visibility: hidden;
      }

      .q-btn {
        padding: 4px 8px;
      }
    }

    &.active, &:hover {
      .q-icon {
        visibility: visible;
      }

      background: var(--q-dark);
    }
  }


  &.dense {
    .q-list {
      .q-item {
        padding: 2px 0;
        &__section--main {
          padding-left: 4px;
        }
        .side-label {
          padding-right: 4px;
        }
      }
    }
  }

  &.normal {
    .q-item {
      min-height: 42px;
    }
  }

  &.show-side-icon {
    .side-label {
      .q-icon {
        visibility: visible;
      }
    }
  }

  &.flat {
    .q-list {
      padding: 0;
    }
  }

  .q-btn {
    &.active {
      background: var(--q-primary) !important;
      color: white !important;
    }
  }

  .q-btn.expand {
    width: 100%;
    .q-btn__content {
      width: 100%;

      .label {
        flex: 1;
      }
    }
  }
}

.pi-context-menu {
  min-width: 200px !important;
  max-height: 50vh !important;
  border-radius: 6px;
  .q-list {
    padding: 6px 0;
  }
  .q-item {
    min-height: unset !important;
    padding: 0;
    margin: 0 6px;
    border-radius: 4px;

    .q-item__section--main {
      padding-right: 8px;
    }

    .q-avatar {
      height: 28px;
      width: 28px;
      opacity: 0.5;
    }

    .q-icon {
      font-size: 16px;
    }

    &[disabled="disabled"] {
      opacity: 0.4 !important;
    }
  }
  .q-separator {
    margin: 4px 0;
  }
}

.pi-toolbar {
  &-btn {
    width: 28px;
    height: 28px;
    padding: unset;
    min-height: unset;
    border-radius: 4px;
  }
}

.pi-btn-group {
  .q-btn {
    .on-left {
      margin-right: 4px;
    }

    &:not(:first-child) {
      border-left: solid 1px var(--q-secondary);
    }
  }

  .q-tab {
    background: var(--q-dark);
    &:before {
      border-radius: 0!important;
    }

    &:first-child {
      border-radius: 4px 0 0 4px !important;
    }

    &:last-child {
      border-radius: 0 4px 4px 0 !important;
    }

    &:only-child {
      border-radius: 4px !important;
    }

    &:not(:first-child) {
      border-left: solid 1px var(--q-secondary);
    }
  }
}

.pi-btn-flat {
  cursor: pointer;
  &:hover {
    color: var(--q-primary);
  }
}

.pi-toolbar-btn {
  width: 28px;
  height: 28px;
  padding: unset;
  min-height: unset;
  border-radius: 4px;
  .q-icon {
    font-size: 20px;
  }
}

// --------------------------------------------------------------------------------
// Layout & View
// --------------------------------------------------------------------------------
.pi-view {
  &-grid {
    display: grid;
    gap: 21px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    &.book {
      gap: 28px;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
  }

  &-list {
    .q-list {
      width: 100%;
      max-width: 1000px;
    }
  }
}


// --------------------------------------------------------------------------------
// Tour
// --------------------------------------------------------------------------------
.pi-tour {
  &.driver-popover {
    padding: 20px;
    background: var(--q-primary) url("/images/bg_map.png") center no-repeat !important;
    color: #ffffff !important;

    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.05);
    min-width: 320px;
  }

  .driver-popover {
    &-description {
      margin: 10px 0 20px 0 !important;
      opacity: 0.8;
    }

    &-close-btn, &-progress-text {
      color: #ffffff !important;
      opacity: 0.4;
    }

    &-arrow {
      &.driver-popover-arrow-side-left {
        border-left-color: var(--q-primary);
      }
      &.driver-popover-arrow-side-right {
        border-right-color: var(--q-primary);
      }
      &.driver-popover-arrow-side-top {
        border-top-color: var(--q-primary);
      }
      &.driver-popover-arrow-side-bottom {
        border-bottom-color: var(--q-primary);
      }
    }

    &-footer button {
      text-shadow: none !important;
      border: none !important;
      padding: 6px 8px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      transition: all 0.2s ease;
    }
  }
}

.body--dark .group-drawer {
  .driver-active-element {
    color: #ffffff !important;
    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      color: #ffffff !important;
      background-color: #ffffff;
      border-radius: 4px;
      opacity: 0.3;
    }
  }
}

// --------------------------------------------------------------------------------
// Dialog
// --------------------------------------------------------------------------------
.pi-dialog-theme {
  width: 480px;
  border-radius: 1rem !important;

  .q-dialog {
    &__title {
      display: flex;
      align-items: center;
      height: 100px;
      color: #ffffff;
      background: var(--q-primary) url("/images/bg_map.png") center no-repeat !important;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("/icons/svg/help.svg") center no-repeat !important;
        background-size: 80px 80px !important;
        opacity: 0.2;
      }
    }

    &__message {
      padding: 24px 16px !important;

      .tag {
        font-size: 0.9rem;
        display: inline-flex;
        color: #f44336;
        background: rgba(#f44336, 0.1);
        padding: 0 6px;
        border-radius: 4px;

        &.blue {
          color: #2196f3;
          background: rgba(#2196f3, 0.1);
        }
      }
    }
  }

  .q-card__actions {
    height: unset;
    padding: 1rem !important;
    justify-content: end;

    .q-btn {
      width: unset;
      min-width: 100px !important;
      border-radius: 24px;

      &:first-child {
        color: var(--p-text-readable) !important;
        background: var(--q-accent);
      }

      &:last-child {
        color: #ffffff !important;
        background: var(--q-primary);
      }
    }
  }
}

.pi-card-dialog-theme {
  .dialog-card {
    border-radius: 1rem !important;
  }

  .q-bar, .header {
    display: flex;
    align-items: center;
    height: 100px !important;
    color: #ffffff;
    background: var(--q-primary) url("/images/bg_map.png") center no-repeat !important;

    .q-toolbar {
      &__title {
        color: #ffffff;
        .o-icon {
          font-size: 2.8rem !important;
        }
        .o-svg-icon {
          color: #ffffff !important;
          width: 2.8rem !important;
          height: 2.8rem !important;
        }
        font-size: 2rem !important;

        .title {
          opacity: 0.7;
        }
      }

      .actions {
        .q-btn {
          color: #ffffff;
        }
      }
    }
  }

  .q-card__actions {
    height: unset;
    padding: 1rem !important;
    justify-content: end;

    .q-btn {
      width: unset;
      min-width: 100px !important;
      border-radius: 24px;

      &:first-child {
        color: var(--p-text-readable) !important;
        background: var(--q-accent);
      }

      &:last-child {
        color: #ffffff !important;
        background: var(--q-primary);
      }
    }
  }
}
