// ==========================================
// FRONTPAGE / LANDING PAGE
// ==========================================

.path-frontpage {
  .block-page-title-block {
    padding-bottom: 0.4rem;

    @include dt-bp-sm {
      padding-bottom: 0.8rem;
    }
  }
}

.node--type-page .field--name-body {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-bottom: 3.2rem;

  > p.subtitle {
    font-size: 1.6rem;
    color: var(--dt-grey);
    line-height: 1.4;
    margin: 0;
  }
}

.field--name-body .card {
  @extend %dt-card;
  padding: 2.4rem 3.2rem;

  h2 {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--dt-dark);
    margin: 0 0 2.4rem;
  }

  p {
    font-size: 1.6rem;
    color: var(--dt-dark);
    line-height: 1.5;
    margin: 0;

    + p {
      margin-top: 1.2rem;
    }
  }

  ul {
    list-style: disc;
    padding-left: 2.4rem;
    margin: 1.6rem 0 0;

    li {
      font-size: 1.6rem;
      color: var(--dt-dark);
      line-height: 1.5;
      margin-bottom: 0.6rem;

      &::marker {
        color: var(--dt-red);
      }

      ul {
        list-style: circle;
        margin: 0.6rem 0 0;

        li::marker {
          color: var(--dt-red);
        }
      }
    }
  }

  p + ul {
    margin-top: 1.6rem;
  }

  a.button {
    @extend %dt-btn;
    margin-top: 2.4rem;
  }
}


// ==========================================
// SIDEBAR
// ==========================================

.region-sidebar-first .block {
  @extend %dt-card;
  padding: 1.6rem;

  h2 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--dt-grey);
    margin: 0 0 1.6rem;
  }
}

.region-sidebar-first .views-exposed-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;

  .form-type-checkboxes {
    background-color: var(--dt-bg);
    border-radius: $dt-radius-xl;
    padding: 1.6rem;

    > label {
      display: block;
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--dt-grey);
      margin: 0 0 1.2rem;
    }

    .form-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .form-type-checkbox {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      background: none;
      padding: 0;
      border-radius: 0;
      margin: 0;

      input[type="checkbox"] {
        width: 1.6rem;
        height: 1.6rem;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: var(--dt-red);
      }

      label {
        font-size: 1.4rem;
        color: var(--dt-dark);
        cursor: pointer;
        line-height: 1.4;
        margin: 0;
      }
    }
  }

  .form-actions {
    margin-top: 0.4rem;
  }
}


// ==========================================
// VIEWS TABLE (global)
// ==========================================

.view-content:has(> table.views-table) {
  @extend %dt-card;
  overflow: hidden;
}

table.views-table {
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding: 1.2rem 2.4rem;
    text-align: left;
    vertical-align: middle;
  }

  thead tr {
    background-color: var(--dt-red);
  }

  th {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
  }

  td {
    font-size: 1.4rem;
    color: var(--dt-dark);
    border-top: 1px solid var(--dt-border);
  }

  .views-field-product-category-name {
    color: var(--dt-grey);
  }

  tbody tr {
    transition: background-color 0.15s;

    &:hover {
      background-color: var(--dt-hover-bg);
    }

    &.instrument-added {
      background-color: #f0fdf4;

      &:hover {
        background-color: #dcfce7;
      }
    }
  }

  .diatron-add-instrument-button,
  .diatron-remove-instrument-button {
    @extend %dt-btn;
    padding: 0.6rem 2rem;

    &:disabled {
      background-color: var(--dt-disabled-bg);
      color: #ffffff;
      opacity: 1;
      pointer-events: none;
      cursor: not-allowed;
    }
  }
}

.view-instrument-selector .view-footer {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;

  a.button {
    @extend %dt-btn;
    margin-left: auto;
  }

  a.diatron-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--dt-red);
    text-decoration: none;
    margin-right: auto;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }
}