// General UI components

.button {
  @extend %dt-btn;
}

// Tags / badges
.product-category,
.product-tags {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: $dt-radius-leaf;
  border: 1px solid var(--dt-border);
  background-color: var(--dt-muted);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-grey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.8;
  flex-shrink: 0;
}


table {
  @extend %dt-card;
  width: 100%;
  margin-bottom: 1.4rem;
  border: none;
  border-collapse: collapse;

  th,
  td {
    padding: 0.7rem 1.35rem;
    text-align: left;
    vertical-align: middle;
  }

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

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

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

  tbody tr {
    transition: background-color 0.15s;

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

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

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

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

  .diatron-add-instrument-button,
  .diatron-remove-instrument-button {
    @extend %dt-btn;
    padding: 0.35rem 1.15rem;
  }
}

// System messages: fixed at top, closeable
[data-drupal-messages] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 0.45rem 0.7rem;
  pointer-events: none;

  @include dt-bp-sm {
    padding: 0.45rem 1.35rem;
  }
}

.messages {
  pointer-events: all;
  position: relative;
  padding: 0.9rem 1.35rem;
  border-radius: $dt-radius-xl;
  border: 1px solid var(--dt-border);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  box-shadow: $dt-shadow-elevated;

  &.messages--status {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
  }

  &.messages--warning {
    background-color: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
  }

  &.messages--error {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
  }

  .msg-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: currentColor;
    opacity: 0.6;
    font-size: 1.15rem;
    line-height: 1;

    &:hover {
      opacity: 1;
    }

    span {
      font-size: 0;
      display: block;
      overflow: hidden;
      width: 0;
      height: 0;
    }

    &::after {
      content: "\00D7";
      display: block;
    }
  }

  &.close {
    display: none;
  }
}

// Marketing banner image
.marketing-banner {
  border-radius: $dt-radius-2xl;
  overflow: hidden;
  box-shadow: $dt-shadow-soft;
  margin-bottom: 1.8rem;

  img {
    width: 100%;
    height: 192px;
    object-fit: cover;
    display: block;

    @include dt-bp-md {
      height: 224px;
    }
  }

  a {
    display: block;
    line-height: 0;
  }
}

// Help section block
.block-diatron-custom-hooks-help-needed {
  margin-top: 2.75rem;
  margin-bottom: 0.45rem;
  border-radius: $dt-radius-2xl;
  background-color: var(--dt-muted);
  border: 1px solid var(--dt-border);
  padding: 1.35rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;

  @include dt-bp-sm {
    flex-direction: row;
    align-items: center;
  }

  h2 {
    display: none;
  }

  .help-text {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dt-dark);
    white-space: nowrap;
    flex-shrink: 0;

    &::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      background-color: var(--dt-surface);
      border: 1px solid var(--dt-border);
      background-image: url('../images/icon-help-circle.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 1.15rem;
    }
  }

  > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.9rem;

    a,
    a.help-link,
    a.help-email {
      @extend %dt-outline-btn;
    }

    a.help-link {
      &::before {
        content: "";
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        -webkit-mask: url('../images/icon-globe.svg') no-repeat center / contain;
        mask: url('../images/icon-globe.svg') no-repeat center / contain;
        background-color: var(--dt-red);
        flex-shrink: 0;
        vertical-align: middle;
      }
    }

    a.help-email {
      &::before {
        content: "";
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        -webkit-mask: url('../images/chat.svg') no-repeat center / contain;
        mask: url('../images/chat.svg') no-repeat center / contain;
        background-color: var(--dt-red);
        flex-shrink: 0;
        vertical-align: middle;
      }
    }
  }
}

// Hide SVG icon injected next to mailto links
svg.mailto {
  display: none;
}

// Sidebar blocks (any page with sidebar)
.region-sidebar-first .block {
  @extend %dt-card;
  padding: 0.9rem;

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

// Sidebar accordion (mobile: < 768px)
.region-sidebar-first .ui-accordion {
  margin-bottom: 0;

  .ui-accordion-header {
    padding: 0.7rem 0.9rem;

    h2 {
      margin: 0;
    }
  }

  .ui-accordion-content {
    padding: 0.9rem;
  }
}

// Sidebar filter fieldset overrides (beats global fieldset rule via ID specificity)
#block-diatron-theme-exposedforminstrument-selectorpage-1 {
  .form--inline {
    display: flex;
    flex-direction: column;
  }

  fieldset {
    background-color: var(--dt-bg);
    border-radius: $dt-radius-xl;
    border: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    margin: 0 0 0.7rem;
    min-width: 0;

    legend + * {
      clear: none;
    }
  }

  legend {
    width: 100%;
    padding: 0.45rem 0.9rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--dt-grey);
    background: transparent;
    line-height: 1.4;

    @include dt-bp-sm {
      padding: 0.9rem 0.9rem 0.75rem;
    }
  }

  .fieldset-wrapper {
    padding: 0 0.9rem 0.7rem;

    @include dt-bp-sm {
      padding: 0 0.9rem 0.7rem;
    }

    @include dt-bp-md {
      display: block;
      column-gap: 0;
    }
  }
}

// Exposed filter form in sidebar
.region-sidebar-first .views-exposed-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;

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

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

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

  .form-actions {
    margin-top: 0;

    .form-submit {
      width: 100%;
      justify-content: center;
    }
  }
}

// Breadcrumb
.breadcrumb {
  font-size: 0.875rem;
  color: var(--dt-grey);
  margin-bottom: 0.45rem;

  ol,
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    + li::before {
      content: "/";
      color: var(--dt-border);
    }
  }

  a,
  a:visited {
    color: var(--dt-grey);
    text-decoration: none;

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

.view-my-documents,
.block-system-main-block {
  margin-bottom: 1.8rem;
}

[data-drupal-messages-fallback] {
  display: none;
}

// Accordion (jQuery UI)
.ui-accordion {
  @extend %dt-card;
  margin-bottom: 1.8rem;
}

.ui-accordion .ui-accordion-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  user-select: none;
  outline: none;
  background: none;
  background-image: none;
  border: none;
  border-radius: 0;
  margin: 0;
  color: var(--dt-dark);
  transition: background-color 0.15s;

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

  &.ui-accordion-header-active {
    border-bottom: 1px solid var(--dt-border);
    background: none;
    background-image: none;
    color: var(--dt-dark);
  }

  .ui-accordion-header-icon {
    display: none;
  }

  &::after {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--dt-surface);
    border: 1px solid var(--dt-border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e30613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.9rem;
    transition: transform 0.2s;
  }

  &.ui-accordion-header-active::after {
    transform: rotate(180deg);
  }
}

.ui-accordion .ui-accordion-content {
  padding: 1.35rem;
  background: none;
  background-image: none;
  border: none;
  overflow: visible;
}