#pip-dashboard-cabin {
  --board-color-transparent: transparent;
  --board-color-white: white;
  --board-color-primary: #2139e1;
  --board-color-primary-700: #0a1a9d;
  --board-color-primary-300: #dddff8;
  --board-color-primary-200: #f2f3fd;
  --board-color-secondary: #ff603f;
  --board-color-secondary-800: #7a1600;
  --board-color-secondary-300: #ffb09e;
  --board-color-secondary-200: #ffedeb;
  /* padding: 2.5rem; */

  h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: normal;
    margin: 0;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: normal;
    margin: 0.75rem 0;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    margin: 0.5rem 0;
  }

  h4 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    margin: 0;
  }

  h5 {
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    margin: 0;
  }

  .text-base {
    font-size: 1rem;
  }

  .text-xs {
    font-size: 0.85rem;
  }

  .underline {
    text-decoration: underline;
  }

  details > summary {
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .btn-primary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background-color: var(--board-color-primary);
    color: white;
    border: solid 1px var(--board-color-primary);
    width: fit-content;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);

    &:hover {
      background-color: var(--board-color-transparent);
      border-color: var(--board-color-primary);
      color: var(--board-color-primary);
    }
  }

  .btn-secondary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background-color: var(--board-color-secondary);
    color: white;
    border: solid 1px var(--board-color-secondary);
    width: fit-content;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);

    &:hover {
      background-color: var(--board-color-transparent);
      border-color: var(--board-color-secondary);
      color: var(--board-color-secondary);
    }
  }

  @supports (interpolate-size: allow-keywords) {
    ::details-content {
      height: 0;
      contain: paint;
      transition:
        height 0.3s ease,
        content-visibility 0.3s ease allow-discrete;
    }

    :root {
      interpolate-size: allow-keywords;
    }

    [open]::details-content {
      height: auto;
    }
  }
}

#pip-dashboard-cabin {
  .pdb-body {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--board-color-white);
  }

  .pdb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .pdb-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    grid-column: span 1;
    gap: 1rem;
    background: var(--board-color-primary-200);

    &.all-transient {
      background: var(--board-color-secondary-300);
      grid-column: span 2;
    }
  }

  .sub-details > summary {
    display: flex;
    text-decoration: underline;
    width: fit-content;
  }

  .sub-details ul li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &:open {
    summary {
      svg {
        transform: rotate(180deg);
      }
    }
  }

  .content {
    padding: 0 1rem 1rem 1rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;

    > * {
      margin-top: 1rem;
    }
  }
}