.header-row {
    width: 50%;
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
    min-height: 4em!important;
}

.phonecall-date {
    .header-row;
    justify-content:flex-end;
}

.phonecall-name {
    .header-row;
}

div.nt-browse-data {
  &.phonecall-notepad {
    flex-grow: 1; // Ensures this section uses available space
    display: flex; // Enables flexible layout
    flex-direction: column; // Stacks items vertically
    justify-content: flex-start; // Aligns content to the top
    overflow: hidden; // Prevents content from spilling out
    position: relative; // Required for pseudo-elements
    margin-top: 1em; // Space above the notepad
    padding: 1em; // Adds padding inside the notepad for a cleaner look
    background-color: #f9f9f9; // Light background for distinction
    border-radius: 5px; // Adds rounded corners for a modern look

    &::before {
      content: ""; // Separator line
      position: absolute;
      top: 0; // Aligns to the top
      left: 0; // Full-width line
      right: 0; 
      height: 1px; // Thin line
      background-color: #ddd; // Subtle line color
    }

    &-content {
      overflow: hidden; // Prevents content overflow
      display: -webkit-box; // Enables line clamping
      -webkit-line-clamp: 4; // Limits to 4 lines
      line-clamp: 4; // Standard property for compatibility
      -webkit-box-orient: vertical;
      text-overflow: ellipsis; // Adds "..." for truncated content
      white-space: pre-wrap; // Preserves user formatting (e.g., line breaks)
      word-wrap: break-word; // Ensures long words wrap

      p {
        margin: 0; // Removes default margins for paragraphs

        &:first-child {
          margin-top: 0; // No extra space at the top
        }

        &:last-child {
          margin-bottom: 0; // No extra space at the bottom
        }
      }

      &::after {
        content: "..."; // Visible ellipsis for overflow
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0 5px; // Spacing around the ellipsis
        background-color: #f9f9f9; // Matches the background color
      }

      // Hover effect to expand full content
      &:hover {
        -webkit-line-clamp: unset; // Removes clamping
        line-clamp: unset; // Standard property for compatibility
        max-height: none; // Allows full content display
      }
    }
  }
}