/* Base Styles */
:root {
  --primary-color: #0052cc; /* Jira's primary blue */
  --secondary-color: #42526e;
  --success-color: #36b37e;
  --warning-color: #ffab00;
  --danger-color: #ff5630;
  --light-gray: #f4f5f7;
  --medium-gray: #dfe1e6;
  --dark-gray: #5e6c84;
  --my-color: #888d75;
  --white: #ffffff;
  --border-radius: 3px;
  --box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --font-family-enterprise: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
}

html, body {
  font-family: var(--font-family-enterprise) !important;
  font-size: 15px !important;
  background-color: var(--danger-gray) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Enterprise Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-enterprise) !important;
  font-weight: 600 !important;
  color: rgb(0, 0, 0)!important;
  margin-top: 0 !important;
  letter-spacing: 0.01em !important;
}

h1 { font-size: 2.2rem !important; }
h2 { font-size: 1.7rem !important; }
h3 { font-size: 1.3rem !important; }
h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.95rem !important; }

/* Enterprise Inputs and Buttons */


/* Table Enterprise Look */
.table th, .table td {
  font-family: var(--font-family-enterprise) !important;
  font-size: 15px !important;
}

/* Container and Layout */


.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.col-md-8, .col-md-4 {
  padding: 0 10px;
}

/* Cards */


.card-header {
  background-color: #2d5887 !important;

}
.card-header h5 {
  color: #ffffff !important;
  margin: 0;
  font-size: 18px;
}
/* .card-title h1,h2,h3,h4,h5,h6 {
  color: #ffffff !important;
  margin: 0;
  font-size: 18px;
} */


/* Forms and Inputs */
.form-control {
  display: block;
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  background-image: none;
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 85, 204, 0.3);
}


/* Task Summary and Description */
.mail-ctnt {
  /* background-color: var(--white); */
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 20px;
}

.tasksubject {
  font-size: 16px;
  /* color: var(--secondary-color); */
  padding: 10px;
  border-radius: var(--border-radius);
  /* background-color: var(--light-gray); */
}

.taskdiscription {
  padding: 15px;
  /* background-color: var(--white); */
  border-radius: var(--border-radius);
  border: 1px solid var(--medium-gray);
}

.description-placeholder {
  /* color: var(--dark-gray); */
  font-style: italic;
}

/* Attachments */
.attchwr {
  /* background-color: var(--white); */
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 20px;
}

.atts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.attactt {
  font-weight: 600;
  /* color: var(--secondary-color); */
  margin: 0;
}

.mlatr-wr {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.atimg {
  width: 120px;
  text-align: center;
}

.img-cnt {
  /* background-color: var(--light-gray); */
  border-radius: var(--border-radius);
  padding: 10px;
}

.imgname {
  margin-top: 5px;
}

.nmig {
  font-size: 12px;
  /* color: var(--secondary-color); */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.dateig {
  display: block;
  font-size: 10px;
  /* color: var(--dark-gray); */
}

/* Progress Bar */
.progress {
  height: 6px;
  /* background-color: var(--light-gray); */
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  /* background-color: var(--success-color); */
  transition: width 0.6s ease;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
}

/* List Group */
.list-group-item {
  padding: 10px 15px;
  border: 1px solid var(--medium-gray);
  border-width: 0 0 1px;
}

.list-group-item:last-child {
  border-bottom-width: 0;
}






/* Comments Section - Jira Style */


/* Time Tracking */
#remaining-time {
  font-size: 14px;
  padding: 4px 8px;
}

/* Avatar Styles */
.rounded-circle {
  border-radius: 50% !important;
}

/* Utility Classes */
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mt-2 { margin-top: 10px !important; }
/* .text-muted { color: var(--dark-gray) !important; } */
/* .text-info { color: #00b8d9 !important; } */
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.flex-column { flex-direction: column !important; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .col-md-8, .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .row {
    flex-direction: column;
  }
}

/* Subtask Styles */
.bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* background: #fff; */
  border-left: 4px solid #0052cc;
  border-radius: 4px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #e4e7ec;
  box-shadow: 0 2px 8px rgba(9,30,66,0.06);
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
.bar:hover {
  box-shadow: 0 4px 16px rgba(9,30,66,0.13);
  border-left: 4px solid #0065ff;
}

.nmfr {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nmbr {
  font-size: 15px;
  font-weight: 700;
  /* color: #0052cc; */
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
  padding-bottom: 2px;
}

.desing input.subtask-subject {
  /* background: #f4f5f7; */
  border: 1px solid #e4e7ec;
  border-radius: 3px;
  font-size: 15px;
  padding: 7px 12px;
  /* color: #42526e; */
  width: 100%;
  transition: border 0.2s;
}

.desing input.subtask-subject:focus {
  border-color: #0052cc;
  /* background: #fff; */
}

.igtd {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 220px;
}

.subtaskuser-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub_taskassignee-container {
  display: flex;
  align-items: center;
  position: relative;
}

.subassigneeImg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  /* background: #fff; */
  box-shadow: 0 1px 4px rgba(9,30,66,0.08);
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
}
.subassigneeImg:hover {
  border: 2px solid #0052cc;
  box-shadow: 0 2px 8px rgba(9,30,66,0.13);
}

.full-name {
    display: none;
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: #832828;
    color: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(9, 30, 66, 0.08);
    z-index: 10;
}
.subassigneeSelect.form-control {
  min-width: 120px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #e4e7ec;
  margin-left: 8px;
  /* background: #fff; */
}

.status-dropdown .status-select {
  min-width: 110px;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid #e4e7ec;
  /* background: #fff; */
  /* color: #42526e; */
  padding: 4px 8px;
}

.fa-save.Add-subtask {
  margin-left: 16px;
  font-size: 18px;
  cursor: pointer;
  /* color: #0052cc; */
  /* background: #e6f0ff; */
  border-radius: 3px;
  padding: 4px 8px;
  transition: background 0.2s;
  border: none;
}


.remove-subtask {
  /* background: none; */
  border: none;
  margin-left: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition: background 0.2s;
}
.remove-subtask:hover {
  /* background: #ffebe6; */
}

.fa-trash.text-danger {
  /* color: #ff5630; */
  font-size: 16px;
}

/* Subtask List Container */
.complete-dn {
  /* background: #fff; */
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

/* Progress Bar (Jira style) */
.subtask-progress-bar {
  height: 6px;
  /* background: var(--light-gray); */
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  margin: 0;
}
.subtask-progress-bar-inner {
  height: 100%;
  /* background: var(--success-color); */
  transition: width 0.4s;
}

/* Subtask Row */
.bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  /* background: #fff; */
  border-bottom: 1px solid var(--medium-gray);
  min-height: 48px;
  transition: background 0.15s;
}
.bar:last-child {
  border-bottom: none;
}
.bar:hover {
  /* background: #f4f5f7; */
}

/* Subtask Key (ID) */
.nmbr {
  min-width: 80px;
  /* color: #0052cc; */
  font-weight: 600;
  font-size: 14px;
  margin: 0 16px 0 0;
  padding: 0;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

/* Subtask Summary */
.desing {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.desing input.subtask-subject {
  /* background: transparent; */
  border: none;
  font-size: 14px;
  /* color: #172b4d; */
  padding: 0;
  width: 100%;
  outline: none;
  box-shadow: none;
  font-weight: 400;
}

/* Assignee Avatar */
.igtd {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 120px;
}
.subtaskuser-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub_taskassignee-container {
  display: flex;
  align-items: center;
  position: relative;
}
.subassigneeImg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #dfe1e6;
  /* background: #fff; */
  box-shadow: none;
  cursor: pointer;
  margin-right: 0;
  transition: border 0.2s;
}
.subassigneeImg:hover {
  border: 1.5px solid #0052cc;
}

/* Status Dropdown (Jira style) */
.status-dropdown {
  margin-left: 12px;
}
.status-select {
  min-width: 90px;
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #dfe1e6;
  /* background: #f4f5f7; */
  /* color: #42526e; */
  padding: 3px 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border 0.2s;
}
.status-select:focus {
  border-color: #0052cc;
  /* background: #fff; */
}

/* Hide Save/Remove Buttons for Jira look */
.fa-save.Add-subtask,


/* Main Comment Section Container */
.col-md-12 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Make comment cards match attachment cards */
.card,
.attchwr {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(9,30,66,0.08);
    border: 1px solid #dfe1e6;
    /* background: #fff; */
    
}



/* Comment Input Area */
.comment-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #DFE1E6;
    border-radius: 3px;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
    /* background-color: #FAFBFC; */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.comment-input:focus {
    /* background-color: #FFFFFF; */
    border-color: #4C9AFF;
    outline: none;
    box-shadow: 0 0 0 1px #4C9AFF;
}

textarea.comment-input {
    min-height: 80px;
    resize: vertical;
}

/* Buttons */
.submit-btn, .update-btn, .reply_submit-btn {
    background-color: #abcc34; 
    color: rgb(42, 43, 42); 
    border: none;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}


/* Comments Section */
#comments-section {
    margin-top: 20px;
}

.comment {
    padding: 16px 0;
    border-bottom: 1px solid #DFE1E6;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

.comment-user {
    font-weight: 600;
    font-size: 14px;
    /* color: #172B4D; */
    margin-right: 8px;
}

.comment-time {
    font-size: 12px;
    /* color: #5E6C84; */
}

.comment-text {
    font-size: 14px;
    line-height: 20px;
    /* color: #172B4D; */
    margin: 8px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Action Buttons (Edit, Delete, Reply) */
.reply-btn, .edit-btn, .delete-btn {
    font-size: 12px;
    /* color: #5E6C84; */
    margin-right: 12px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.reply-btn:hover, .edit-btn:hover, .delete-btn:hover {
    /* color: #0052CC; */
    text-decoration: underline;
}

/* Edit Box */
.edit-box {
    margin-top: 12px;
    padding: 12px;
    /* background-color: #FAFBFC; */
    border-radius: 3px;
    border: 1px solid #DFE1E6;
}

.edit-input {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #DFE1E6;
    border-radius: 3px;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Reply Box */
.reply-box {
    margin-top: 12px;
    padding: 12px;
    /* background-color: #FAFBFC; */
    border-radius: 3px;
    border: 1px solid #DFE1E6;
    display: none;
}

/* Replies Section */
.replies-section {
    border-left: 2px solid #DFE1E6;
    padding-left: 16px;
}

.toggle-replies-btn {
    /* background: none; */
    border: none;
    /* color: #5E6C84; */
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    margin: 8px 0;
}

.toggle-replies-btn:hover {
    /* color: #0052CC; */
    text-decoration: underline;
}

/* TinyMCE Editor Overrides (if using editor1 class) */
.editor1 .tox-tinymce {
    border-radius: 3px;
    border-color: #DFE1E6 !important;
}

.editor1 .tox-tinymce:hover {
    border-color: #B3BAC5 !important;
}

.editor1 .tox-tinymce:focus-within {
    border-color: #4C9AFF !important;
    box-shadow: 0 0 0 1px #4C9AFF !important;
}


/* Attachments Wrapper */
.attchwr {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(9, 30, 66, 0.08);
    color: black;
    
}

/* Attachments Header */
.attchwr .atts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.attchwr .attactt {
    font-weight: 600;
    /* color: #42526e; */
    font-size: 1.1rem;
}
.attchwr .attactt span {
    /* color: #6b778c; */
    font-weight: 400;
    margin-left: 6px;
}

/* Upload Button */
.attchwr .btn-wr #fine-uploader {
    margin-left: auto;
}

/* Attachments List */
.mlatr-wr {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Single Attachment Card */
.atimg.file-item {
    background: #ffffff;
    border: 1px solid #020302;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgb(255 255 255 / 4%);
    padding: 12px 12px 8px 12px;
    width: 180px;
    position: relative;
    transition: box-shadow 0.2s;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.atimg.file-item:hover {
    box-shadow: 0 4px 12px rgba(9,30,66,0.13);
    border-color: #b3bac5;
}

/* Delete Button */
.delete-attcahbtn {
    position: absolute;
    top: 8px;
    right: 8px;
    /* background: #fff; */
    border: none;
    /* color: #de350b; */
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}
.delete-attcahbtn:hover {
    /* background: #ffebe6; */
    /* color: #bf2600; */
}

/* File Preview */
.img-cnt {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img-cnt img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(9,30,66,0.08);
}
.img-cnt i {
    /* color: #42526e; */
    margin-bottom: 8px;
}

/* File Name & Date */
.imgname {
    width: 100%;
    text-align: center;
    margin-top: 4px;
}
.imgname .nmig {
    font-size: 0.97rem;
    /* color: #172b4d; */
    font-weight: 500;
    word-break: break-all;
    margin-bottom: 2px;
    max-width: 150px;           /* Limit width */
    white-space: nowrap;        /* Prevent wrapping */
    overflow: hidden;           /* Hide overflow */
    text-overflow: ellipsis;    /* Show ... for overflow */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;            /* Indicate tooltip */
    position: relative;
}

/* Tooltip for full file name on hover */
.imgname .nmig:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
    /* background: #172b4d; */
    /* color: #fff; */
    padding: 4px 10px;
    border-radius: 4px;
    white-space: normal;
    font-size: 0.95rem;
    z-index: 10;
    min-width: 120px;
    max-width: 320px;
    box-shadow: 0 2px 8px rgba(9,30,66,0.13);
    pointer-events: none;
}

.imgname .dateig {
    display: block;
    font-size: 0.82rem;
    /* color: #6b778c; */
    margin-top: 2px;
}

/* Download Link */
.img-cnt a[download] {
    text-decoration: none;
    /* color: #0052cc; */
    transition: color 0.2s;
}
.img-cnt a[download]:hover {
    /* color: #172b4d; */
    text-decoration: underline;
}
.comment-add-row { display: flex; align-items: flex-start; gap: 12px; }
.comment-avatar-lg { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dfe1e6; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dfe1e6; }
.comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dfe1e6; }
.comment-textarea, .comment-edit-textarea, .comment-reply-textarea {
    width: 100%; min-height: 60px; border-radius: 6px; border: 1px solid #dfe1e6; /* background: #fff; */ margin-bottom: 8px;
}
.comment-edit-textarea, .comment-reply-textarea { min-height: 40px; /* background: #f4f5f7; */ }
.comment-submit-btn, .comment-update-btn, .comment-reply-submit-btn {
    /* background: #0052cc; color: #fff; */ border: none; border-radius: 4px; padding: 6px 18px; font-weight: 600;
}
.comment-update-btn { /* background: #36b37e; */ padding: 4px 14px; }
.comment-action-btn { /* color: #0052cc; */ cursor: pointer; font-size: 13px; margin-right: 12px; }
.comment-action-edit { /* color: #ffab00; */ }
.comment-action-delete { /* color: #ff5630; */ margin-right: 0; }
.comment-main { border-bottom: 1px solid #f4f5f7; padding: 18px 0; }
.comment-header { display: flex; align-items: center; gap: 12px; }
.comment-user-name { font-weight: 600; /* color: #0052cc; */ }
.comment-time-main { /* color: #888; */ font-size: 13px; }
.comment-time-reply { /* color: #888; */ font-size: 12px; }
.comment-text { margin: 10px 0 8px 44px; /* color: #42526e; */ }
.comment-actions { margin-left: 44px; }
.comment-edit-box, .comment-reply-box { margin-left: 44px; margin-top: 8px; }
.comment-toggle-replies-btn {
    margin-left: 44px; margin-top: 8px; /* background: #e6f0ff; color: #0052cc; */ border: none; border-radius: 3px; padding: 2px 10px; font-size: 13px;
}
.comment-replies-section { display: none; margin-left: 70px; margin-top: 8px; }
.comments-title { margin: 0; /* color: #42526e; */ font-weight: 600; }
.d-none { display: none !important; }
.flex-grow-1 { flex: 1; }

/* Paragraph Styles */
p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

p.comment-text {
    font-size: 14px;
    font-weight: 500;
    /* color: #172B4D; */
    line-height: 1.6;
}

p.comment-text-reply {
    font-size: 13px;
    font-weight: 500;
    /* color: #42526E; */
    line-height: 1.5;
}

p.nmig {
    font-size: 13px;
    font-weight: 600;
    /* color: #172B4D; */
}

p.description-placeholder {
    font-size: 15px;
    font-weight: 400;
    /* color: #6B778C; */
    font-style: italic;
}

p.taskdiscription {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    /* color: #172B4D; */
}
.qq-upload-button {
    /* background: #20c76b !important; */
    width: 250px !important;
    /* color: #fff !important; */
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}


.tribute-container {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 80px !important;
    max-width: 100%;
    overflow: auto;
    display: none;
    z-index: 999999;
}

.tribute-container.tribute-active {
    display: block;
}

.tribute-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* background: #fff; */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    width: 100%;
    min-width: 250px;
    max-width: 100%;
}

.tribute-container li {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

@media (max-width: 768px) {
    .tribute-container {
        position: fixed;
        left: 5%;
        right: 5%;
        width: 90%;
    }
    
    .tribute-container ul {
        min-width: unset;
        width: 100%;
    }
}

.tribute-container li:last-child {
    border-bottom: none;
}

.tribute-container li.highlight {
    /* background-color: #f0f0f0; */
}

.tribute-container li:hover {
    /* background-color: #e8e8e8; */
}


/* Comment Container */
.comment {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    /* background: #fff; */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Comment Header */
.comment .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.comment .comment-user {
    font-weight: 600;
    margin-right: 10px;
}

.comment .comment-time {
    /* color: #6c757d; */
    font-size: 0.85em;
}

/* Comment Text */
.comment .comment-text {
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Comment Attachments */
.comment .comment-attachments {
    margin: 10px 0;
    padding: 10px;
    /* background: #f8f9fa; */
    border-radius: 8px;
}

.comment .attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 10px;
}

.comment .attachment-item {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    /* background: white; */
    transition: transform 0.2s;
}

.comment .attachment-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.comment .image-attachment {
    position: relative;
}

.comment .image-attachment img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.comment .attachment-info {
    padding: 8px;
    /* background: rgba(255, 255, 255, 0.9); */
    border-top: 1px solid #dee2e6;
}

.comment .attachment-name {
    display: block;
    font-size: 12px;
    /* color: #333; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment .attachment-size {
    display: block;
    font-size: 11px;
    /* color: #666; */
}

.comment .file-attachment {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    /* color: inherit; */
    transition: background-color 0.2s;
}

.comment .file-attachment i {
    font-size: 24px;
    margin-right: 10px;
    /* color: #6c757d; */
}

.comment .file-attachment:hover {
    /* background: #f8f9fa; */
    text-decoration: none;
}

/* Comment Actions */
.comment .reply-btn,
.comment .edit-btn,
.comment .delete-btn {
    cursor: pointer;
    margin-right: 15px;
    /* color: #6c757d; */
    font-size: 0.9em;
}

.comment .reply-btn:hover,
.comment .edit-btn:hover,
.comment .delete-btn:hover {
    /* color: #0056b3; */
    text-decoration: underline;
}

/* Edit Box */
.comment .edit-box {
    margin-top: 15px;
    padding: 15px;
    /* background: #f8f9fa; */
    border-radius: 8px;
}

.comment .edit-input {
    width: 100%;
    min-height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.comment .update-btn {
    padding: 5px 15px;
    /* background:#98d625; */
    /* color: white; */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.edit-buttons, .reply-buttons {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.cancel-edit-btn, .cancel-reply-btn {
    /* background-color: #6c757d; */
    /* color: white !important; */
    border: none;
    padding: 0px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-edit-btn:hover, .cancel-reply-btn:hover {
    /* background-color: #5a6268; */
}

.comment .update-btn:hover {
    /* background: #17b932; */
}

/* Edit Comment Attachments Section */
.edit-attachments {
    margin: 15px 0;
    padding: 15px;
    /* background: #f8f9fa; */
    border: 1px solid #dfe1e6;
    border-radius: 4px;
}

.edit-attachments h6 {
    /* color: #42526e; */
    font-size: 14px;
    margin-bottom: 12px;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.edit-attachment-item {
    position: relative;
    /* background: #fff; */
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Attachment Preview */
.attachment-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.attachment-info {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

.attachment-name {
    display: block;
    /* color: #172b4d; */
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.attachment-size {
    display: block;
    /* color: #6b778c; */
    font-size: 12px;
}

/* Remove Button */
.remove-edit-attachment {
    padding: 4px;
    /* background: none; */
    border: none;
    border-radius: 3px;
    /* color: #de350b; */
    cursor: pointer;
    transition: all 0.2s;
}

.remove-edit-attachment:hover {
    /* background: #ffebe6; */
}

.remove-edit-attachment i {
    font-size: 16px;
}

/* Video Thumbnail Styles */
.video-thumbnail {
    width: 100%;
    max-height: 120px;;
    object-fit: cover;
    /* background: #f4f5f7; */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* File Icon Styles */
.file-attachment i {
    font-size: 24px;
    /* color: #42526e; */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}