/* TABLE BASE */

#voiceNoteTable tr{
transition:.2s;
}

/* STATUS BADGE */

.voice-status{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.voice-status.Pending{
background:#f3f4f6;
color:#374151;
}

.voice-status.Urgent{
background:#fee2e2;
color:#b91c1c;
}

.voice-status.Completed{
background:#dcfce7;
color:#15803d;
}

.voice-status.Replaced{
background:#dbeafe;
color:#1d4ed8;
}

/* LINK */

.voice-link{
color:#2563eb;
font-weight:500;
text-decoration:none;
}

.voice-link:hover{
text-decoration:underline;
}

/* 🔥 URGENT ROW (MAGANDA VERSION) */

.voice-row-urgent {
background:#fff5f5;
box-shadow:inset 4px 0 #ef4444;
animation:urgentPulse 1.6s ease-in-out infinite;
}


/* GLOW */

@keyframes voicePulse{

0%{
box-shadow:0 0 0 rgba(239,68,68,0);
}

50%{
box-shadow:
0 0 14px rgba(239,68,68,.35),
0 6px 18px rgba(239,68,68,.25);
}

100%{
box-shadow:0 0 0 rgba(239,68,68,0);
}

}

/* HOVER */

#voiceNoteTable tr:not(.voice-row-urgent):hover{
background:#f9fafb;
}

.voice-profile-row{
display:flex;
align-items:center;
gap:8px;
}

.account-badge{
padding:3px 8px;
border-radius:8px;
font-size:10px;
font-weight:600;
}

.account-badge.MAIN-PAGE{
background:#e0f2fe;
color:#0369a1;
}

/* VIP */
.account-badge.VIP-PAGE{
background:#fef3c7;
color:#92400e;
}

.voice-desc{
  max-width:240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ EXPAND */
.voice-desc.expanded{
max-height:none;
overflow:visible;
}
/* SEE MORE BUTTON */
.see-more-btn{
display:inline-block;
margin-top:4px;
font-size:12px;
color:#2563eb;
cursor:pointer;
font-weight:500;
}

.see-more-btn:hover{
text-decoration:underline;
}

/* MOBILE VIEW */
@media (max-width: 768px){

  .table-wrapper {
    display: none !important;
  }

  #voiceList {
    display: block;
  }

}

/* DESKTOP VIEW */
@media (min-width: 769px){

  #voiceList {
    display: none;
  }

}
.voice-profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; /* ❗ para hindi mag line break */
}

.voice-profile-row a {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap; /* ❗ para di maputol "Profile" */
}

.account-badge {
  white-space: nowrap; /* ❗ para di maging MAIN \n PAGE */
}

.voice-order {
  white-space: nowrap;
}

/* MOBILE */
@media (max-width: 768px){
  .table-wrapper {
    display: none !important;
  }

  #voiceList {
    display: block !important;
  }
}

/* DESKTOP */
@media (min-width: 769px){
  #voiceList {
    display: none;
  }
}

/* 🔥 MOBILE CARD BASE */

.voice-swipe-card{
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.voice-swipe-content{
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform .25s ease;
}

/* ACTION BUTTONS (hidden sa right) */
.voice-swipe-actions{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
}

.voice-swipe-actions button{
  width: 60px;
  border: none;
  color: #fff;
  font-size: 12px;
}

.voice-edit{
  background: #3b82f6;
}

.voice-delete{
  background: #ef4444;
}

/* CARD CONTENT */

.voice-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voice-name{
  font-weight: 600;
  font-size: 14px;
}

/* STATUS BADGE (mobile) */
.voice-status-badge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

.voice-status-badge.Pending{
  background:#f3f4f6;
  color:#374151;
}

.voice-status-badge.Urgent{
  background:#fee2e2;
  color:#b91c1c;
}

.voice-status-badge.Completed{
  background:#dcfce7;
  color:#15803d;
}

.voice-status-badge.Replaced{
  background:#dbeafe;
  color:#1d4ed8;
}

.voice-order{
  font-size: 12px;
  opacity: .7;
}

.voice-desc{
  font-size: 13px;
  line-height: 1.4;
}

.voice-meta{
  font-size: 12px;
  opacity: .8;
}

.snap-swipe-card.open .snap-swipe-content{
  pointer-events: none;
}


#voiceAddBtn{
  position: relative;
  z-index: 10000; /* 🔥 mas mataas sa snap */
}

.snap-date {
  font-size: 12px;
}

.snap-date:has(:contains("Completed")){
  color: #16a34a;
}

.snap-date:has(:contains("Replaced")){
  color: #2563eb;
}

.of-profile-btn{
  text-decoration: none;   /* ❌ tanggal underline */
  color: #2563eb;          /* fixed color */
  font-weight: 600;
}

/* hover */
.of-profile-btn:hover{
  text-decoration: none;   /* no underline */
  color: #2563eb;          /* same color */
}

/* visited */
.of-profile-btn:visited{
  color: #2563eb;          /* hindi nagiging purple */
}

/* active */
.of-profile-btn:active{
  color: #2563eb;
}

.snap-of-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111827; /* 🔥 same snap dark style */
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.snap-of-btn:hover{
  opacity: 0.9;
}

.detail-item.full label{
  font-size: 11px;
  color: #9ca3af;
}

.detail-item.full p{
  font-size: 14px;
  font-weight: 600;
}

.snap-swipe-content{
  pointer-events: auto;
}

.snap-swipe-card.open .snap-swipe-content{
  pointer-events: none;
}

/* 🔥 ADD BUTTON FIX */
#voiceAddBtn{
  position: relative;
  z-index: 9999;
}

.snap-of-btn{
  display: inline-block;
  padding: 10px 12px;
  background: #111827;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.snap-of-btn:hover{
  opacity: 0.9;
}

.snap-of-btn{
  display:inline-block;
  padding:10px 12px;
  background:#111827;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
}
.premium-details{
  padding:20px;
}

/* HEADER */
.vd-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.vd-name{
  font-size:14px;
  font-weight:700;
}

.vd-order{
  font-size:10px;
  opacity:.6;
}

.vd-status{
  font-size:12px;
  padding:6px 10px;
  border-radius:20px;
  font-weight:600;
}


.vd-status.Pending{background:#f3f4f6;}
.vd-status.Urgent{background:#fee2e2;color:#b91c1c;}
.vd-status.Completed{background:#dcfce7;color:#15803d;}
.vd-status.Replaced{background:#dbeafe;color:#1d4ed8;}

.vd-of-btn{
  display:block;
  text-align:center;
  padding:14px;
  margin:12px 0;
  background:#111827;
  color:#fff;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
}

.vd-section{
  margin-top:12px;
}

.vd-section label{
  font-size:12px;
  opacity:.6;
}

.vd-section p{
  font-size:14px;
  font-weight:500;
}


/* TOP */
.vd-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}



.vd-order{
  font-size:10px;
  opacity:.6;
}


/* HEADER FIX */
.vd-header-clean{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:15px;
}



.vd-badge{
  background:#7c3aed;
  color:#fff;
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  margin-left:6px;
}

.vd-order{
  font-size:10px;
  opacity:.6;
}

/* BLOCKS (VERTICAL NA 🔥) */
.vd-block{
  margin-top:12px;
}

.vd-block label{
  font-size:12px;
  opacity:.6;
}

.vd-block p{
  margin-top:4px;
  font-size:14px;
  font-weight:500;
}

/* BUTTONS */
.vd-main-btn{
  display:block;
  margin-top:16px;
  padding:12px;
  text-align:center;
  background:#0ea5e9;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.vd-complete-btn{
  display:block;
  width:100%;
  margin-top:10px;
  padding:12px;
  background:#22c55e;
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:600;
}

.vd-close-btn{
  width:100%;
  margin-top:10px;
  padding:12px;
  background:#e5e7eb;
  border:none;
  border-radius:10px;
}

/* DATES */
.vd-dates{
  margin-top:15px;
  font-size:12px;
}

.vd-dates label{
  opacity:.6;
}


.vd-clean *{
  all: unset;
  display: revert;
  box-sizing: border-box;
  font-family: inherit;
}
.vd-clean{
  width:90%;
  max-width:380px;
  background:#fff;
  border-radius:20px;
  padding:18px;
  animation: modalPop .25s ease;
}
@keyframes modalPop{
  0%{
    transform: scale(.92) translateY(10px);
    opacity:0;
  }
  100%{
    transform: scale(1) translateY(0);
    opacity:1;
  }
}

/* HEADER */
.vd-header-clean{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:15px;
}



.vd-badge{
  background:#7c3aed;
  color:#fff;
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  margin-left:6px;
}

.vd-order{
  font-size:10px;
  opacity:.6;
}

.vd-status{
  font-size:12px;
  padding:6px 10px;
  border-radius:20px;

}
.vd-status.Replaced{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
}

/* BLOCK */
.vd-block{
  margin-top:12px;
}

.vd-block label{
  font-size:12px;
  opacity:.6;
}

.vd-block p{
  margin-top:4px;
  font-size:14px;
}

/* BUTTONS */
.vd-main-btn,
.vd-complete-btn,
.vd-close-btn{
  display:block;
  width:100%;
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  text-align:center;
  border:none;
  font-weight:600;
}

.vd-main-btn{background:#0ea5e9;color:#fff;}
.vd-complete-btn{background:#22c55e;color:#fff;}
.vd-close-btn{background:#e5e7eb;}

/* DATES */
.vd-dates{
  margin-top:12px;
  font-size:12px;
}

/* REQUEST LIMIT (3 LINES) */
.vd-request{
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* 🔥 3 lines only */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* EXPAND */
.vd-request.expanded{
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* SEE MORE BUTTON */
.vd-see-more{
  display:inline-block;
  margin-top:4px;
  font-size:12px;
  color:#2563eb;
  cursor:pointer;
  font-weight:500;
}

.vd-see-more:hover{
  text-decoration:underline;
}

.snap-photo-viewer{
  pointer-events: auto;
}

.snap-profile-card{
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.vd-dates{
  margin-top:12px;
  text-align:right;
  font-size:10px;
}

/* TIPPED */
.vd-tipped{
  color:#6b7280; /* gray */
}

/* COMPLETED */
.vd-completed{
  color:#0f6e32; /* green */
  font-weight:600;
  margin-top: 3px;
}

.vd-completed{
  color:#0e6e31;
  font-weight:600;
}

.vd-badge{
  display:inline-block;
  margin-left:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  color:#fff;
}

/* VIP */
.vd-badge.VIP-PAGE{
  background:#7c3aed;
}

/* MAIN */
.vd-badge.MAIN-PAGE{
  background:#2563eb;
}

/* REQUEST CARD */
.vd-request-card{
  background:#f9fafb;
  padding:14px;
  border-radius:12px;
  margin:12px 0;
  border:1px solid #e5e7eb;
}

.vd-request-label{
  font-size:11px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:6px;
  letter-spacing:.5px;
}

.vd-request{
  font-size:14px;
  line-height:1.5;
}

.vd-meta-row{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}

.vd-meta-row label{
  font-size:11px;
  color:#6b7280;
}

.vd-meta-row p{
  font-weight:400;   /* ❌ hindi na bold */
  font-size:14px;    /* 🔥 mas maliit */
  color:#374151;     /* medyo softer kaysa black */
}

.vd-meta-row{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  margin-bottom: 15px;
}

.vd-meta-row label{
  font-size:11px;
  color:#6b7280;
}

.vd-meta-row p{
  font-weight:600;
}

.vd-section-label{
  font-size:12px;
  font-weight:600;
  color:#6b7280;
  margin:18px 0 8px;
  letter-spacing:.6px;
}

.vd-section-label{
  position: relative;
  padding-top:14px;
}

/* 🔥 divider line */
.vd-section-label::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    #e5e7eb,
    transparent
  );
}

.vd-request-card{
  background:#f9fafb;
  padding:14px;
  border-radius:14px;
  border:1px solid #e5e7eb;

  /* 🔥 subtle shadow */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 8px 18px rgba(0,0,0,0.05);

  transition: all .25s ease;
}

.vd-main-btn,
.vd-complete-btn,
.vd-close-btn{
  font-size:14px; /* 🔥 default 16 → ginawa nating mas maliit */
}

#voiceNoteTable {
  table-layout: fixed;
}

#voiceNoteTable td:first-child {
  white-space: nowrap;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-status.replaced{
  background: #3b82f6;
  color: white;
}

.vd-status{
  font-size:12px;
  padding:6px 10px;
  border-radius:20px;
}

/* COLORS */
.vd-status.Pending{background:#f3f4f6;color:#374151;}
.vd-status.Urgent{background:#fee2e2;color:#b91c1c;}
.vd-status.Completed{background:#dcfce7;color:#15803d;}
.vd-status.Replaced{background:#dbeafe;color:#2563eb;}

.vd-completed.Completed{
  color:#0e6e31; /* green */
}

.vd-completed.Replaced{
  color:#2563eb; /* 🔵 blue */
}


@media (max-width:768px){
.table-wrapper{
display:none;
}

}



/* ALIGN NAME + DOT */
.name-with-dot{
  display:flex;
  align-items:center;
}

/* 🔥 ROW PULSE EFFECT */
.urgent-row{
  animation:urgentGlow 1.5s infinite;
}

@keyframes urgentGlow{
  0%{background-color:rgba(239,68,68,0);}
  50%{background-color:rgba(239,68,68,0.12);}
  100%{background-color:rgba(239,68,68,0);}
}




.snap-stat-card.urgent{
  position:relative;
}

.snap-urgent-dot{
  position:absolute;
  top:10px;
  right:12px;
  width:10px;
  height:10px;
  background:#ef4444;
  border-radius:50%;
  display:none;
  animation:pulseDot 1.2s infinite;
}

@keyframes pulseDot{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.4);opacity:.65;}
  100%{transform:scale(1);opacity:1;}
}


.snap-username,
.sext-username{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}

.snap-name-text{
  display:inline-block;
  max-width:15ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 0 auto;
  
}

.snap-username .account-badge,
.sext-username .account-badge{
  flex-shrink:0;
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}