.mm {
    &__page {
        display: flex;
        flex-direction: column;
    }
}

.mm {
    &__threads {
        display: flex;
        flex-direction: column;
        border: #0e55c1 solid 0.5vw;
        border-radius: 1vw;
    }
}

.mm {

    &__operations {
        display: flex;
        align-items: center;
        padding: 0.1rem;
        background-color: #0e55c1;
        color: white;

        input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        &-left,
        &-center,
        &-right {
            flex: 1;
        }
        
        &-left {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-left: 1rem;
        }

        &-center {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
        }

        &-right {
            display: flex;         
            align-items: center;   
            gap: 1rem;             
            margin-right: 1rem;
        }
        
        &__assign,
        &__filters {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        select {
            padding: 0.3rem 0.4rem;
            border-radius: 4px;
            border: 1px solid #aaa;
            background-color: #fff;
            cursor: pointer;
        }
        
        button {
            background-color: #0e55c1;
            padding: 0.4rem;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .noInteraction {
            fill: #ccc;
        }
        
        svg {
            width: 32px;
            height: 32px;
            fill: white;
            flex-shrink: 0;
        }
    }

    &__filters,
    &__assign {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;       
        gap: 0.5rem;               
        white-space: nowrap;       
        
        svg {
            flex-shrink: 0;        
            width: 32px;
            height: 32px;
            fill: white;         
        }
        
        select {
            min-width: 12vw;       
            padding: 0.3rem 0.4rem;
            border-radius: 4px;
            border: 1px solid #aaa;
            background-color: #fff;
            cursor: pointer;
        }
    }
}

.mm {
    &__create-thread {
        background: #0e55c1;

        form {
            display: none;
            flex: 1;
            margin: 0.2vw;
            align-items: center;
            gap: 0.4vw;

            input[type=text], select {
                padding: 0.3rem 0.4rem;
                border-radius: 0.2vw;
                border: 1px solid #aaa;
                background-color: #fff;
                cursor: pointer;
            }

            input[type=submit] {
                background: #fff;
                color:  #0E55C1 !important;
                margin: 0;
                padding: 0.5vw;
                border-radius: 0.2vw;
                border: none;
                cursor: pointer;
            }
            input[type=submit]:hover {
                background: #e6e6e6;

            }
        }
    }
}

.mm {
  &__threads_table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 400px;

    thead, tbody {
          display: table;
          width: 100%;
          table-layout: fixed;
          overflow-x: scroll;
    }

    thead {
        background-color: #0e55c1;
      color: white;

      th {
        padding: 0.75rem;
        text-align: center;
      }
    }

    tbody {
      tr {
        transition: background-color 0.2s ease;

        &:nth-child(even) {
          background-color: #f9f9f9; // subtle striping
        }

        &:hover {
          background-color: #f1f1f1; // row hover effect
        }

        td {
          background-color: inherit;
          padding: 0.6rem 0.8rem;
          text-align: center;
          vertical-align: middle;

          &:first-child input[type="checkbox"] {
            width: 16px;
            height: 16px;
          }
        }
      }

      tr.unread {
          background-color: #ffcccc;
      }
    }
  }
}

.mm__other-threads {
    margin: 1rem 0;

    &-list {
        ul {
            margin: 0;
            padding: 0;
            list-style: none;

            li {
                display: flex;
                justify-content: flex-start;
                gap: 2rem;       // spacing between columns
                padding: 0.3rem 0;
                color: #888;      // darker gray
            }
        }
    }
}


.mm {

    &__thread-messages {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        width: 40vw;
    }

    &__thread-messages-list {
        display: flex;
        flex-direction: column;
        min-width: 30vw;
        height: 50vh;
        padding: 1rem;
        overflow-y: auto;
        width: 40vw;
        color: white;

        border: 2px solid #ccc;
        border-radius: 8px;

        &::-webkit-scrollbar {
            width: 8px;   /* slim bar */
        }
        
        &::-webkit-scrollbar-track {
            background: transparent; 
        }
        
        &::-webkit-scrollbar-thumb {
            background-color: #46519c;
            border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb:hover {
            background-color: #f1bc5b; /* hover state */
        }
        
        .admin {
            background-color: #9C5C46;
            align-self: flex-end;
        }
        
        .member {
            background-color: #46519c;
            align-self: flex-start;
        }
    }

    &__thread-message {
        min-width: 20vw;
        padding: 0.5rem 1rem;
        margin: 0.3rem;
        border-radius: 12px;
        max-width: 80%;
        line-height: 1.5;
        word-wrap: break-word;
    }

    /* roles stay separate, untouched */

    /* HTML-rich content */
    &__message-content {
        ul {
            list-style: disc;
            margin: 0.5rem 0 0.5rem 1.5rem;
            padding: 0;
        }

        ol {
            list-style: decimal;
            margin: 0.5rem 0 0.5rem 1.5rem;
            padding: 0;
        }

        li {
            margin: 0.25rem 0;
        }

        [style*="text-align:center"] { text-align: center; }
        [style*="text-align:right"]  { text-align: right; }

        a {
            color: #f1bc5b;
            text-decoration: underline;

            &:hover,
            &:focus {
                color: #ffd27f;
                text-decoration: none;
                border-bottom: 2px solid #ffd27f;
            }
        }

        img {
            max-width: 100%;
            height: auto;
            display: inline-block;
        }
    }

    &__thread-reply-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 1rem;
        width: 40vw;
        gap: 0.5rem;
    }

    &__thread-reply-btn {
        color: white;
        background-color: #0e55c1;
        padding: 0.4rem;
        max-width: 8vw;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.mm__participants-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; // spacing between participants
}

.mm__participants-list ul {
    display: flex;
    justify-content: flex-start; // align all items horizontally
    gap: 2rem; // fixed width spacing between fields
    padding: 0;
    margin: 0;
    list-style: none;
    color: #888; // darker gray
}

.mm__participants-list li {
    display: flex;
    gap: 2rem;
}

.mm__participants-list p {
    margin: 0;
    white-space: nowrap; // prevent wrapping
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm__view-thread {
    &-container {
        display: flex;
        flex-direction: row;
        gap: 4rem;
        align-items: flex-start;
        width: 100%;
    }

    &-left {
        background-color: white;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1;

        padding: 1rem;
        border-radius: 8px;
    }

    &-right {

        h1 {
            margin: 0;
            color: #0e55c1;
        }

        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        height: 70vh;
    }
}

.mm {

  &__orders-table {
      border-collapse: separate; // separate borders needed for border-radius
      border-spacing: 0;         // remove gaps between cells
      width: 100%;
      margin-bottom: 1rem;
      border: 8px solid #0e55c1; // optional, for table border
      border-radius: 8px;         // rounded corners

    thead {
      background-color: #0e55c1;
      color: white;

      th {
        padding: 0.75rem;
        text-align: center;
      }
    }

    tbody {
        background-color: white;

      tr {
        transition: background-color 0.2s ease;

        &:nth-child(even) {
          background-color: #f9f9f9;
        }

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

        td {
          padding: 0.6rem 0.8rem;
          text-align: center;
          vertical-align: middle;

          ul {
            padding-left: 1rem;
            margin: 0;
            text-align: left;

            li {
              margin: 0.2rem 0;
              list-style: disc;
            }
          }

          a {
            color: #0e55c1;
            text-decoration: underline;

            &:hover {
              color: #46519c;
            }
          }
        }
      }
    }
  }
}

.mm {
  &__template-select-wrapper {
    align-self: center;
    gap: 0.6rem;
    margin: 0.5rem 0;

    .mm__template-label {
      color: #fff;
      min-width: 6rem;
    }

    .mm__template-select {
      padding: 0.4rem 0.5rem;
      border-radius: 4px;
      border: 1px solid #aaa;
      background-color: #fff;
      cursor: pointer;
      min-width: 12vw; 
      transition: border-color 0.2s ease, box-shadow 0.2s ease;

      &:focus {
        border-color: #0e55c1;
        box-shadow: 0 0 0 2px rgba(14, 85, 193, 0.2);
        outline: none;
      }
    }
  }
}

