/* SNAP APP TOOLBAR */

.snap-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:18px;
flex-wrap:wrap;
}

.snap-toolbar-left{
display:flex;
align-items:center;
gap:12px;
flex:1;
}



.snap-search{
display:flex;
align-items:center;
gap:8px;
background:white;  
border:1px solid #e5e7eb;
border-radius:12px;
padding:0 14px;
height:42px;
flex:1;
max-width:420px;
}

.snap-search i{
color:#9ca3af;
font-size:13px;
}

.snap-search input{
border:none;
outline:none;
background:transparent;
font-size:14px;
width:100%;
}



.snap-add-btn:hover{
background:#1d4ed8;
}

@media (max-width:768px){

.snap-toolbar{
flex-direction:column;
align-items:stretch;
}

.snap-search{
max-width:100%;
}

.snap-add-btn{
width:100%;
justify-content:center;
}

}


.snap-stats-row{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:12px;

margin-bottom:18px;

}
.snap-stat-card{

background:white;

border:1px solid #e5e7eb;

border-radius:10px;

padding:8px 10px;

text-align:center;

cursor:pointer;

transition:.2s;

}




.snap-stat-card:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.snap-stat-card h4{

font-size:10px;
color:#6b7280;
margin:0;

}

.snap-stat-card p{

font-size:22px;
font-weight:700;

margin-top:4px;

}

/* PENDING */

.snap-stat-card.pending{

border-top:3px solid #facc15;

}

/* URGENT */

.snap-stat-card.urgent{

border-top:3px solid #ef4444;
position:relative;
}

/* RED DOT */

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

@keyframes urgentDot{

0%{
transform:scale(.8);
opacity:.6;
}

50%{
transform:scale(1.3);
opacity:1;
}

100%{
transform:scale(.8);
opacity:.6;
}

}

/* REPLACED */

.snap-stat-card.replaced{

border-top:3px solid #3b82f6;

}

/* COMPLETED */

.snap-stat-card.completed{

border-top:3px solid #22c55e;

}

.snap-filter{
height:42px;
border-radius:12px;
border:1px solid #e5e7eb;
padding:0 12px;
font-size:14px;
background:white;
}


/* SNAP MOBILE LIST */

.snap-mobile-list{
display:none;
flex-direction:column;
gap:14px;
}

/* CARD */

.snap-mobile-card{

background:white;
border-radius:18px;
padding:16px;

border:1px solid #e5e7eb;

box-shadow:0 6px 20px rgba(0,0,0,.05);

display:flex;
flex-direction:column;
gap:10px;

}

/* HEADER */

.snap-mobile-header{

display:flex;
justify-content:space-between;
align-items:center;

}

/* ORDER */

.snap-mobile-order{

font-weight:600;
font-size:14px;

}

/* USER */

.snap-mobile-user{

font-size:13px;
color:#6b7280;

}

/* STATS */

.snap-mobile-stats{

display:flex;
justify-content:space-between;

font-size:13px;
margin-top:6px;

}

/* PRICE */

.snap-price{

color:#16a34a;
font-weight:700;

}

/* FOOTER */

.snap-mobile-footer{

display:flex;
justify-content:space-between;
align-items:center;

}

/* BUTTON */

.snap-view-btn{

background:#2563eb;
color:white;

border:none;

padding:6px 14px;

border-radius:8px;

font-size:12px;
font-weight:600;

cursor:pointer;

}

/* SWIPE CARD */

.snap-swipe-card{
position:relative;
overflow:visible;
border-radius:16px;
}

/* SWIPE ACTIONS */

.snap-swipe-actions{
position:absolute;
right:0;
top:0;
height:100%;
display:flex;
z-index:1;
overflow:hidden;
border-radius:0 14px 14px 0;
}

.snap-swipe-actions button{
width:60px;
flex-shrink:0;
border:none;
color:white;
font-weight:600;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:auto;
}

.snap-edit{
background:#2563eb;
}

.snap-delete{
background:#ef4444;
}

/* CONTENT */

.snap-swipe-content{
position:relative;
z-index:2;
background:white;
transition:transform .25s cubic-bezier(.25,.8,.25,1);
will-change:transform;
}

/* MOBILE SWITCH */

@media (max-width:768px){

.table-wrapper{
display:none;
}

.snap-mobile-list{
display:flex;
}

}

.snap-toolbar-right{
display:flex;
gap:10px;
align-items:center;
}



.snap-export-btn:hover{
background:#374151;
}

.snap-photo{

width:34px;
height:34px;

border-radius:8px;

object-fit:cover;

border:1px solid #e5e7eb;

}

/* SNAP PHOTO UPLOAD */

.snap-photo-upload{

display:flex;
flex-direction:column;
align-items:center;
gap:12px;

margin-bottom:18px;

}

.snap-preview{

width:120px;
height:120px;

border-radius:18px;

object-fit:cover;

border:2px dashed #e5e7eb;

background:#f9fafb;

}

/* UPLOAD BUTTON */

.snap-upload-btn{

display:flex;
align-items:center;
gap:8px;

background:linear-gradient(135deg,#6366f1,#4f46e5);

color:white;

padding:8px 16px;

border-radius:12px;

font-size:13px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.snap-upload-btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

/* MODAL */

.snap-modal{

max-width:420px;

}

.snap-upload-area{

height:170px;

border:2px dashed #e5e7eb;

border-radius:18px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

background:#f9fafb;

position:relative;

overflow:hidden;

margin-bottom:18px;

transition:.2s;

}

/* hover effect */

.snap-upload-area:hover{

border-color:#6366f1;
background:#f5f7ff;

}

/* icon */

.snap-upload-placeholder i{

font-size:26px;
margin-bottom:6px;
color:#9ca3af;

}

.snap-upload-placeholder p{

font-size:14px;
margin:0;
font-weight:500;

}

.snap-upload-placeholder span{

font-size:12px;
color:#9ca3af;

}

.snap-upload-area.dragging{

border-color:#6366f1;
background:#eef2ff;

}

.snap-upload-placeholder{

text-align:center;
color:#6b7280;

}

.snap-upload-placeholder i{

font-size:28px;
margin-bottom:6px;

}

.snap-preview{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

display:block;

}

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

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

.snap-user-link:hover{
text-decoration:underline;
}


.snap-date-input{

width:100%;

height:44px;

border-radius:12px;

border:1px solid #e5e7eb;

background:#f9fafb;

padding:0 12px;

font-size:14px;

color:#374151;

}
/* FULLSCREEN VIEWER */

.snap-photo-viewer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.85);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;
}

.snap-photo-modal{
text-align:center;
}

.snap-photo-full{
max-width:90vw;
max-height:80vh;
border-radius:12px;
}

.snap-photo-actions{
margin-top:12px;
display:flex;
gap:10px;
justify-content:center;
}

.snap-download-btn{
background:#2563eb;
color:white;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

.snap-download-btn:hover{
background:#1d4ed8;
}

/* SNAP PREVIEW MODAL */

.snap-photo-viewer{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(15,23,42,.85);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

padding:20px;

backdrop-filter:blur(6px);

}

/* CONTAINER */

.snap-photo-container{

background:white;

border-radius:18px;

width:100%;
max-width:520px;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.35);

animation:snapPop .2s ease;

}

@keyframes snapPop{
from{transform:scale(.95);opacity:0}
to{transform:scale(1);opacity:1}
}

/* HEADER */

.snap-photo-header{

display:flex;
justify-content:space-between;
align-items:center;

padding:14px 18px;

border-bottom:1px solid #eee;

font-weight:600;

}

/* CLOSE */

.snap-close-btn{

border:none;
background:none;
font-size:18px;
cursor:pointer;

}

/* BODY */

.snap-photo-body{

display:flex;
justify-content:center;
align-items:center;

background:#f9fafb;

padding:20px;

}



.snap-photo-full{

width:100%;
max-width:240px;      /* laki ng preview */
aspect-ratio:1/1;     /* square snap */

object-fit:cover;

border-radius:16px;

box-shadow:
0 10px 25px rgba(0,0,0,.15),
0 4px 10px rgba(0,0,0,.08);

}

.snap-photo-full img{
max-width:100%;
}

/* ACTIONS */

.snap-photo-actions{

display:flex;
gap:10px;

padding:16px;

justify-content:center;

flex-wrap:wrap;

}

.snap-download-btn,
.snap-open-btn{

display:flex;
align-items:center;
gap:6px;

padding:10px 16px;

border-radius:10px;

font-size:14px;

text-decoration:none;

color:white;

}

/* BUTTON COLORS */

.snap-download-btn{
background:#2563eb;
}

.snap-download-btn:hover{
background:#1d4ed8;
}

.snap-open-btn{
background:#10b981;
}

.snap-open-btn:not(.snap-added):hover{
background:#e6e200;
}

.snap-open-btn.snap-added{
background:#111827;
color:#9ca3af;
cursor:default;
box-shadow:none;
}

.snap-open-btn.snap-added:hover{
background:#111827;
color:#9ca3af;
}

.snap-open-btn:disabled{
opacity:.9;
pointer-events:none;
}
@media (max-width:768px){

.snap-photo-container{
max-width:95%;
}

.snap-photo-full{
max-height:55vh;
}

.snap-photo-actions{
flex-direction:column;
}

.snap-open-btn{

display:flex;
align-items:center;
justify-content:center;

background:#fffc00;
color:black;

padding:10px;

border-radius:10px;

font-weight:600;
text-decoration:none;

width:100%;

}

}

.snap-list{

display:flex;
flex-direction:column;
gap:12px;

}

.snap-row{

display:flex;
align-items:center;

gap:16px;

background:white;

border-radius:14px;

border:1px solid #e5e7eb;

padding:14px;

transition:.2s;

}

.snap-row:hover{

box-shadow:0 10px 25px rgba(0,0,0,.08);
transform:translateY(-2px);

}

.snap-avatar img{

width:48px;
height:48px;

border-radius:12px;

object-fit:cover;

cursor:pointer;

}

.snap-info{

display:flex;
flex-direction:column;

gap:2px;

flex:1;

}

.snap-username{

font-weight:600;

color:#2563eb;

font-size:14px;

}

.snap-fan{

font-weight:600;
font-size:14px;

}

.snap-user{

font-size:13px;
color:#2563eb;

}

.snap-meta{

font-size:12px;
color:#9ca3af;

}

.snap-price-block{

text-align:right;

min-width:80px;

}

.snap-price{

font-weight:700;
color:#16a34a;

}

.snap-date{

font-size:12px;
color:#6b7280;

}

.snap-actions{

display:flex;
gap:8px;

}

.snap-edit-btn{

background:#2563eb;
color:white;

border:none;

padding:6px 12px;

border-radius:8px;

cursor:pointer;

}

.snap-edit-btn:hover{
background:#1d4ed8;
}

.snap-card{

background:white;

border-radius:16px;

border:1px solid #e5e7eb;

padding:18px;

display:flex;

align-items:center;

gap:14px;

position:relative;

transition:.25s;

}

.snap-card:hover{

transform:translateY(-3px);

box-shadow:0 12px 28px rgba(0,0,0,.08);

}



.snap-card.Pending{
border-left:4px solid #facc15;
}

.snap-card.Urgent{
border-left:4px solid #ef4444;
animation:urgentPulse 1.6s ease-in-out infinite;
}

/* COMPLETED / REPLACED */

.snap-card.Completed,
.snap-card.Replaced{

opacity:.70;
filter:grayscale(25%);

}


/* TOP ROW */

.snap-card-top{

display:flex;

justify-content:space-between;

font-size:14px;

font-weight:600;

}

.snap-order{

font-size:13px;

color:#6b7280;

}

/* MIDDLE */

.snap-card-middle{

display:flex;

align-items:center;

gap:10px;

}

.snap-avatar img{

width:64px;
height:64px;

border-radius:14px;

object-fit:cover;

}

.snap-user{

font-size:13px;

color:#2563eb;

}

/* BOTTOM */

.snap-card-bottom{

display:flex;

justify-content:space-between;

align-items:center;

}

.snap-date{

font-size:12px;

color:#9ca3af;

margin-top:2px;

}

.snap-view-btn{

background:#2563eb;

color:white;

border:none;

padding:8px 14px;

border-radius:10px;

font-size:13px;

font-weight:600;

cursor:pointer;

}

.snap-view-btn:hover{
background:#1d4ed8;
}


.snap-edit{
background:#3b82f6;
font-size:14px;
}

.snap-delete{
background:#ef4444;
font-size:14px;
}

.snap-swipe-actions button{
width:80px;
flex-shrink:0;

border:none;

color:white;
font-weight:600;
font-size:13px;

display:flex;
align-items:center;
justify-content:center;

border-radius:0 14px 14px 0;
}

.snap-status-badge{

font-size:12px;
font-weight:600;

padding:4px 10px;

border-radius:20px;

}

/* PENDING */

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

/* URGENT */

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

/* REPLACED */

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

/* COMPLETED */

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


.snap-profile-card{

background:white;

border-radius:20px;

max-width:420px;

width:100%;

overflow:hidden;

box-shadow:0 25px 60px rgba(0,0,0,.35);

animation:snapPop .2s ease;

}

.snap-profile-header{

display:flex;
justify-content:space-between;
align-items:center;

padding:16px 18px;
margin-bottom:14px;
padding-bottom:14px;
border-bottom:1px solid #f1f5f9;

}

.snap-fan-name{
font-size:16px;
font-weight:600;
color:#111827;
}

.snap-user-tag{
font-size:13px;
color:#6b7280;
margin-top:2px;
}

.snap-status-preview{

font-size:12px;
font-weight:600;

padding:4px 10px;

border-radius:20px;

}

.snap-profile-body{
padding:16px 18px 10px;

display:flex;

align-items:center;      /* ADD THIS */
flex-direction:column; 
background:#f9fafb;
}

.snap-profile-actions{

display:flex;
flex-direction:column;

gap:12px;
margin-top:8px;
padding:8px 18px 18px;


}

.snap-open-btn{

display:flex;
align-items:center;
justify-content:center;

background:#fffc00;
color:black;

padding:10px;

border-radius:10px;

font-weight:600;

text-decoration:none;

width:100%;
box-shadow:0 4px 12px rgba(255,230,0,.35);

}

.snap-download-btn{

background:#2563eb;

color:white;

padding:10px;

border-radius:10px;

text-align:center;

text-decoration:none;

}

.snap-close-btn2{

background:#f3f4f6;

color:#111827;

border:1px solid #e5e7eb;

padding:10px;

border-radius:10px;
font-size:14px;
font-weight:500;

cursor:pointer;

}

.snap-close-btn2:hover{
background:#e5e7eb;
}

.snap-status-preview{

font-size:12px;
font-weight:600;

padding:4px 10px;

border-radius:20px;

}

/* STATUS COLORS */

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

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

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

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



.snap-info-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:20px;

padding:18px 22px;

font-size:14px;

}

.snap-info-item{
display:flex;
flex-direction:column;
gap:6px;
}

.snap-label{
font-weight:600;
color:#4b5563;
}

.snap-info-grid div{
line-height:1.4;
}

.snap-info-grid b{
color:#374151;
}

.snap-complete-btn{

background:#16a34a;
font-size:14px;
color:white;

border:none;

padding:10px;

border-radius:10px;

font-weight:600;

cursor:pointer;

}

.snap-complete-btn:hover{

background:#15803d;

}

.snap-avatar{
cursor:pointer;
}


.snap-profile-card{
position:relative;
}

.snap-status-pill{

display:inline-flex;
align-items:center;
justify-content:center;

padding:4px 12px;

border-radius:10px;

font-size:12px;
font-weight:600;

width:fit-content;

}

/* COLORS */

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

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

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

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

.snap-photo-wrapper{
position:relative;
display:flex;
justify-content:center;
margin:12px 0;
}

.snap-photo-full{
border-radius:16px;
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
0 4px 10px rgba(0,0,0,0.08);
}

.snap-price-badge{

position:absolute;
top:12px;
right:12px;

background:#1f2937;

color:#22c55e;

padding:6px 12px;

border-radius:10px;

font-size:13px;
font-weight:700;

display:flex;
align-items:center;
gap:6px;

box-shadow:0 8px 18px rgba(0,0,0,.35);

border:1px solid rgba(255,255,255,.08);
transform:translateY(-4px);
}

.snap-bottom-dates{

display:flex;
flex-direction:column;
align-items:flex-end;

padding:0 20px 18px;

font-size:10px;
color:#6b7280;

gap:4px;

}

.snap-completed-date{
color:#16a34a;
font-weight:600;
font-size:10px;
}

.completed-date{
color:#15803d; /* green */
}

.replaced-date{
color:#2563eb; /* blue */
}

.snap-profile-link{

position:absolute;
bottom:16px;
right:16px;

background:#00aff0;

color:white;

padding:8px 14px;

border-radius:10px;

font-size:13px;
font-weight:600;

display:flex;
align-items:center;
gap:6px;

text-decoration:none;

box-shadow:0 10px 18px rgba(0,175,240,.35);

transition:.2s;

}

.snap-profile-link:hover{

background:#0096cc;

transform:translateY(-2px);

}

.snap-swipe-card{
margin-bottom:12px;
}

.snap-card.Urgent{

border-left:4px solid #ef4444;

animation:urgentPulse 1.6s ease-in-out infinite;


}

@keyframes urgentPulse{

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

50%{
box-shadow:
0 0 18px rgba(239,68,68,.45),
0 8px 22px rgba(239,68,68,.25);
}

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

}
.snap-avatar{

position:relative;

}

.snap-default-icon{

position:absolute;

bottom:-6px;
right:-6px;

background:#fffc00;

width:22px;
height:22px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:12px;

border:2px solid white;

box-shadow:0 4px 10px rgba(0,0,0,.15);

}

.snap-card.Urgent{

border-left:4px solid #ef4444;

animation:urgentPulse 1.6s ease-in-out infinite;

}

@keyframes urgentPulse{

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

50%{
box-shadow:
0 0 18px rgba(239,68,68,.45),
0 8px 22px rgba(239,68,68,.25);
}

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

}
/* SNAP TOOLBAR */



.snap-toolbar-left{

display:flex;
width:100%;

}

.snap-toolbar-right{

display:flex;

gap:10px;

width:100%;

}

/* SEARCH */

.snap-search{

display:flex;
align-items:center;
gap:8px;

background:white;

border:1px solid #e5e7eb;

border-radius:14px;

padding:0 16px;

height:44px;

width:100%;

font-size:15px;

box-shadow:0 4px 10px rgba(0,0,0,.04);

}

.snap-search input{

border:none;
outline:none;

background:transparent;

width:100%;

font-size:14px;

}

/* BUTTONS */

.snap-export-btn,
.snap-add-btn{

display:flex;
align-items:center;
justify-content:center;
gap:6px;

border:none;

height:44px;

padding:0 14px;

border-radius:12px;

font-size:14px;

cursor:pointer;

flex:1;

}

.snap-export-btn{

background:#16a34a;
color:white;

display:flex;
align-items:center;
justify-content:center;

gap:6px;

height:44px;

border:none;

border-radius:12px;

font-size:14px;

cursor:pointer;

flex:1;

box-shadow:0 6px 14px rgba(0,0,0,.15);

}

.snap-export-btn:hover{
background:#15803d;
}

.snap-add-btn{

background:#2563eb;
color:white;

}

.snap-add-btn:hover{

background:#1d4ed8;

}

@media (max-width:768px){

.snap-filter{

display:none;

position:absolute;

bottom:70px;
right:20px;

background:white;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,.2);

padding:10px;

z-index:9999;

}

}

.snap-filter-fab{

position:fixed;

bottom:20px;
right:20px;

width:56px;
height:56px;

border-radius:50%;

background:#2563eb;

color:white;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;

box-shadow:0 12px 30px rgba(0,0,0,.35);

cursor:pointer;

z-index:9999;

}

.snap-filter-fab{
position:fixed;
bottom:20px;
right:20px;

width:56px;
height:56px;

border-radius:50%;
background:#2563eb;
color:white;

display:none; /* default hidden */

align-items:center;
justify-content:center;

font-size:18px;
box-shadow:0 12px 30px rgba(0,0,0,.35);
cursor:pointer;
z-index:9999;
}
@media (max-width:768px){

.snap-filter-fab{
display:flex;
}

}

/* MOBILE ONLY */

@media (max-width:768px){

.snap-filter-fab{
display:flex;
}

}

.snap-filter-sheet{

position:fixed;
bottom:-100%;
left:0;

width:100%;
height:50%;

background:white;

border-top-left-radius:20px;
border-top-right-radius:20px;

box-shadow:0 -10px 40px rgba(0,0,0,.3);

transition:.35s;

z-index:9999;

}

.snap-filter-sheet.show{
bottom:0;
}

.snap-filter-sheet-content{
padding:20px;
text-align:center;
}

.snap-sheet-handle{

width:40px;
height:4px;

background:#ccc;

border-radius:4px;

margin:0 auto 15px auto;
}

.snap-filter-sheet button{

width:100%;

padding:14px;

margin:6px 0;

border:none;

border-radius:10px;

background:#f3f4f6;

font-weight:600;

cursor:pointer;

}

.snap-filter-sheet button:hover{
background:#e5e7eb;
}

.snap-filter-fab:hover{
transform:scale(1.05);
}

.snap-filter-fab:active{
transform:scale(.95);
}


.snap-filter-sheet{

position:fixed;
bottom:-100%;
left:0;

width:100%;
height:50%;

background:white;

border-top-left-radius:20px;
border-top-right-radius:20px;

box-shadow:0 -10px 40px rgba(0,0,0,.3);

transition:.35s;

z-index:9999;

}

.snap-filter-sheet.show{
bottom:0;
}

/* BLUR BACKGROUND */

.snap-filter-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.35);

backdrop-filter:blur(4px);

z-index:9998;

display:none;

}

.snap-filter-overlay.show{
display:block;
}

.snap-filter-sheet button.active{

background:#2563eb;
color:white;

}

.snap-stat-card.urgent.has-alert::after{

content:"";

position:absolute;

top:6px;
right:10px;

width:8px;
height:8px;

background:#ef4444;

border-radius:50%;

animation:urgentDot 1.2s infinite;

}

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

/* RED DOT */

.snap-urgent-dot{

position:absolute;
top:6px;
right:8px;
width:8px;
height:8px;
background:#ef4444;
border-radius:50%;
display:none;
animation:urgentDot 1.2s infinite;
}

@keyframes urgentDot{

0%{
transform:scale(.8);
opacity:.6;
}

50%{
transform:scale(1.4);
opacity:1;
}

100%{
transform:scale(.8);
opacity:.6;
}

}


.confirm-snap-modal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.45);

z-index:99999;   /* MAS MATAAS kaysa modal */

}


.confirm-snap-box{


background:white;
border-radius:14px;
width:320px;
max-width:92%;

box-shadow:0 15px 40px rgba(0,0,0,0.25);

overflow:hidden;
position:relative;
z-index:100000;

}


/* CONFIRM BUTTONS */

.confirm-actions{
display:flex;
gap:10px;
justify-content:flex-end;
padding:14px 16px;
border-top:1px solid #eee;
}

/* YES BUTTON */

.confirm-snap-yes{

background:#2563eb;
color:white;

border:none;

padding:8px 18px;

border-radius:8px;

font-size:14px;
font-weight:600;

cursor:pointer;

display:flex;
align-items:center;
gap:6px;

}

.confirm-snap-yes:hover{
background:#1d4ed8;
}

/* NO BUTTON */

.confirm-snap-no{

background:#f3f4f6;
color:#2563eb;

border:none;

padding:8px 18px;

border-radius:8px;

font-size:14px;
font-weight:600;

cursor:pointer;

display:flex;
align-items:center;
gap:6px;

}

.confirm-snap-no:hover{
background:#e5e7eb;
}

/* DESKTOP VERSION MAR 9 */

/* DESKTOP TABLE */

/* DESKTOP TABLE */

@media (min-width:769px){

#snapList{
display:none;
}

}

/* MOBILE CARDS */

@media (max-width:768px){

.table-wrapper{
display:none;
}

#snapList{
display:flex;
flex-direction:column;
gap:12px;
}

}


/* DESKTOP SNAP TOOLBAR */

@media (min-width:769px){

.snap-desktop-toolbar{

display:flex;
justify-content:space-between;
align-items:center;

background:white;

padding:18px;

border-radius:16px;

border:1px solid #e5e7eb;

box-shadow:0 6px 20px rgba(0,0,0,.04);

margin-bottom:18px;

}

.snap-desktop-toolbar .snap-toolbar-left{

display:flex;
align-items:center;
gap:12px;
flex:1;

}

.snap-desktop-toolbar .snap-search{

max-width:420px;
flex:1;

}

.snap-desktop-toolbar .snap-filter{

height:42px;

border-radius:12px;

border:1px solid #e5e7eb;

padding:0 12px;

background:white;

font-size:14px;

}

.snap-desktop-toolbar .snap-toolbar-right{

display:flex;
gap:12px;

}

/* EXPORT BUTTON */

.snap-export-btn{

background:#16a34a;
color:white;

border:none;

height:42px;

padding:0 16px;

border-radius:12px;

font-size:14px;

font-weight:600;

cursor:pointer;

display:flex;
align-items:center;
gap:6px;

}

.snap-export-btn:hover{
background:#15803d;
}

/* ADD BUTTON */

.snap-add-btn{

background:#2563eb;
color:white;

border:none;

height:42px;

padding:0 18px;

border-radius:12px;

font-size:14px;

font-weight:600;

display:flex;
align-items:center;
gap:6px;

}

.snap-add-btn:hover{
background:#1d4ed8;
}

}


/* SNAP DESKTOP VMS TOOLBAR */

@media (min-width:769px){

.snap-vms-toolbar{

display:flex;
justify-content:space-between;
align-items:center;

background:white;

padding:18px;

border-radius:16px;

border:1px solid #e5e7eb;

box-shadow:0 6px 20px rgba(0,0,0,.04);

margin-bottom:18px;

}

/* LEFT */

.snap-vms-toolbar .vms-toolbar-left{

display:flex;
align-items:center;
gap:12px;
flex:1;

}

/* SEARCH */

.snap-vms-toolbar .vms-search{
max-width:420px;
flex:1;
}

/* FILTER */

.snap-vms-toolbar .vms-filter{

height:42px;

border-radius:12px;

border:1px solid #e5e7eb;

padding:0 12px;

background:white;

font-size:14px;

}

/* RIGHT */

.snap-vms-toolbar .vms-toolbar-right{

display:flex;
gap:12px;

}

/* EXPORT GREEN */

.snap-export-btn{

background:#16a34a !important;
color:white !important;

}

.snap-export-btn:hover{
background:#15803d !important;
}

}


.vms-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

/* DESKTOP */

@media (min-width:769px){

.snap-mobile-toolbar{
display:none;
}

}

/* MOBILE */

@media (max-width:768px){

.snap-desktop-toolbar{
display:none;
}
}
/* SNAP DESKTOP TOOLBAR */

@media (min-width:769px){

.snap-desktop-toolbar{

display:flex;
justify-content:space-between;
align-items:center;

background:white;

padding:18px;

border-radius:16px;

border:1px solid #e5e7eb;

box-shadow:0 6px 20px rgba(0,0,0,.04);

margin-bottom:18px;

}

/* LEFT */

.snap-desktop-toolbar .vms-toolbar-left{

display:flex;
align-items:center;
gap:12px;
flex:1;

}

/* SEARCH */

.snap-desktop-toolbar .vms-search{

display:flex;
align-items:center;

gap:8px;

background:white;

border:1px solid #e5e7eb;

border-radius:12px;

padding:0 14px;

height:42px;

flex:1;

max-width:420px;

}

/* FILTER */

.snap-desktop-toolbar .vms-filter{

height:42px;

border-radius:12px;

border:1px solid #e5e7eb;

padding:0 12px;

background:white;

font-size:14px;

}

/* RIGHT */

.snap-desktop-toolbar .vms-toolbar-right{

display:flex;
gap:12px;

}

}

/* =================================
SNAP TOOLBAR MASTER FIX
================================= */

/* DESKTOP ONLY */

@media (min-width:769px){

.snap-desktop-toolbar{
display:flex !important;
}

.snap-mobile-toolbar{
display:none !important;
}

.snap-filter-fab{
display:none !important;
}

}


/* MOBILE ONLY */

@media (max-width:768px){

.snap-desktop-toolbar{
display:none !important;
}

.snap-mobile-toolbar{
display:flex !important;
flex-direction:column;
gap:12px;
}

.snap-filter-fab{
display:flex !important;
}

}


@media (min-width:769px){

.snap-filter-fab{
display:none !important;
}

}

.snap-desktop-toolbar .vms-btn{
white-space:nowrap;
margin-right:6px;
}


/* =========================
SNAP DESKTOP BUTTONS
========================= */

@media (min-width:769px){

/* BUTTON CONTAINER */

.snap-desktop-toolbar .vms-toolbar-right{
display:flex;
align-items:center;
gap:12px;
}

/* EXPORT BUTTON */

.snap-desktop-toolbar .snap-export-btn{
background:#16a34a;
color:white;

display:flex;
align-items:center;
gap:6px;

height:40px;
padding:0 16px;

border:none;
border-radius:10px;

font-size:14px;
font-weight:500;

cursor:pointer;

white-space:nowrap;
flex:none;
}

.snap-desktop-toolbar .snap-export-btn:hover{
background:#15803d;
}

/* ADD SNAP BUTTON */

.snap-desktop-toolbar .snap-add-btn{
background:#2563eb;
color:white;

display:flex;
align-items:center;
gap:6px;

height:40px;
padding:0 16px;

border:none;
border-radius:10px;

font-size:14px;
font-weight:500;

cursor:pointer;

white-space:nowrap;
flex:none;
}

.snap-desktop-toolbar .snap-add-btn:hover{
background:#1d4ed8;
}

}


/* =========================
SNAP SEXTING MOBILE FIX
========================= */

/* DESKTOP */

@media (min-width:769px){

#sextList{
display:none;
}

}

/* MOBILE */

@media (max-width:768px){

#sextTable{
display:none;
}

#sextList{
display:flex;
flex-direction:column;
gap:12px;
}

}


.snap-action-menu{
position:relative;
}

.snap-action-btn{
background:none;
border:none;
cursor:pointer;
font-size:16px;
}

.snap-dropdown{
position:absolute;
right:0;
top:28px;

background:white;
border:1px solid #e5e7eb;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

display:none;

min-width:150px;
z-index:100;
}

.snap-dropdown button{

display:flex;
align-items:center;
gap:8px;

width:100%;
padding:10px 12px;

border:none;
background:none;

cursor:pointer;
font-size:13px;

}

.snap-dropdown button:hover{
background:#f3f4f6;
}


.snap-action-wrapper{
position:relative;
display:flex;
justify-content:center;
}

.snap-action-trigger{

background:#f3f4f6;
border:none;

width:34px;
height:34px;

border-radius:10px;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

}

.snap-action-trigger:hover{
background:#e5e7eb;
}

.snap-action-dropdown{

position:absolute;
right:0;
top:38px;

background:white;

border:1px solid #e5e7eb;
border-radius:12px;

box-shadow:0 12px 30px rgba(0,0,0,.15);

display:none;

min-width:170px;

z-index:1000;
}

.snap-action-dropdown button{

display:flex;
align-items:center;
gap:8px;

width:100%;

padding:10px 14px;

border:none;
background:none;

cursor:pointer;
font-size:13px;

}

.snap-action-dropdown button:hover{
background:#f3f4f6;
}

.snap-action-trigger{

background:#f3f4f6;

width:34px;
height:34px;

border-radius:10px;

border:none;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

margin:auto;

}

.snap-action-trigger:hover{
background:#e5e7eb;
}

/* ACTION COLUMN CENTER */

td:last-child{
text-align:center;
vertical-align:middle;
}

.snap-action-wrapper{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

.snap-action-trigger{
margin:0;
}

/* FORCE CENTER ACTION COLUMN */

.table-wrapper table td:last-child,
.table-wrapper table th:last-child{
text-align:center;
vertical-align:middle;
}

.snap-action-wrapper{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

.snap-action-trigger{
margin:0 auto;
}

.table-wrapper table th:nth-child(6),
.table-wrapper table td:nth-child(6){
text-align:center;
}

.table-wrapper table th:nth-child(7),
.table-wrapper table td:nth-child(7){
text-align:center;
}

.center-col{
text-align:center;
}

/* URGENT TABLE ROW */

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

/* STATUS DROPDOWN */

#sext_status{

width:100%;
height:44px;

border-radius:12px;
border:1px solid #e5e7eb;

background:#f9fafb;

padding:0 12px;
margin-top: 6px;
font-size:14px;
font-weight:600;

transition:.2s;

}

/* PENDING */

#sext_status.status-pending{
background:#f3f4f6;
color:#374151;
border-color:#e5e7eb;
}

/* URGENT */

#sext_status.status-urgent{
background:#fee2e2;
color:#b91c1c;
border-color:#fecaca;
}

/* REPLACED */

#sext_status.status-replaced{
background:#dbeafe;
color:#1d4ed8;
border-color:#bfdbfe;
}

/* COMPLETED */

#sext_status.status-completed{
background:#dcfce7;
color:#15803d;
border-color:#bbf7d0;
}

.field-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}

.modal-buttons{
  margin-top:20px;
  display:flex;
  gap:10px;
}

/* ACCOUNT BADGE */

.account-badge{
display:inline-block;
margin-top:4px;
padding:4px 8px;
border-radius:6px;
font-size:11px;
font-weight:600;
}

/* MAIN PAGE */

.account-badge.MAIN-PAGE{
background:#2563eb;
color:#fff;
}

/* VIP PAGE */

.account-badge.VIP-PAGE{
background:#9333ea;
color:#fff;
}

.snap-account-badge{
margin-top:6px;
display:inline-block;
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
}

.snap-account-badge.MAIN-PAGE{
background:#2563eb;
color:#fff;
}

.snap-account-badge.VIP-PAGE{
background:#9333ea;
color:#fff;
}

.snap-profile-row{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}

/* ACCOUNT BADGE */

.snap-account-badge{
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
}

/* MAIN */

.snap-account-badge.MAIN-PAGE{
background:#2563eb;
color:#fff;
}

/* VIP */

.snap-account-badge.VIP-PAGE{
background:#9333ea;
color:#fff;
}


/* PROFILE + ACCOUNT ROW */

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

/* ACCOUNT BADGE */

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

/* MAIN PAGE */

.account-badge.MAIN-PAGE{
background:#2563eb;
color:#fff;
}

/* VIP PAGE */

.account-badge.VIP-PAGE{
background:#9333ea;
color:#fff;
}

/* OF PROFILE LINK */

.of-profile-link{
display:inline-flex;
align-items:center;
gap:6px;

color:#2563eb;
font-weight:500;
font-size:13px;

text-decoration:none;
transition:all .15s ease;
}

.of-profile-link:hover{
color:#1d4ed8;
text-decoration:underline;
}


.snap-fan-row{
display:flex;
align-items:center;
gap:8px;
}

.snap-fan-name{
font-size:16px;
font-weight:600;
color:#111827;
}

.snap-user-tag{
font-size:13px;
color:#6b7280;
}

.snap-account-badge{
font-size:10px;
font-weight:600;
padding:2px 6px;
border-radius:4px;
line-height:1;
transform:translateY(-2px);
margin-top:-2px;
border-radius:999px;
}

.snap-account-badge.MAIN-PAGE{
background:#2563eb;
color:white;
}

.snap-account-badge.VIP-PAGE{
background:#9333ea;
color:white;
}

.snap-photo-full.completed{
filter:blur(2px) grayscale(50%);
opacity:.7;
}

.snap-duration{
font-style:italic;
font-size: 12px;
opacity:.85;
margin-left:6px;
}


/* SNAP SEXTING MOBILE CARD */

.snap-card-row{
display:flex;
gap:10px;
align-items:flex-start;
}

.snap-account{
font-size:12px;
color:#6b7280;
margin-left:4px;
}

.snap-order-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:4px;
}

.snap-order{
font-size:13px;
font-weight:500;
}

.snap-date{
font-size:12px;
color:#6b7280;
margin-top:3px;
}

.snap-avatar img{
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
}


/* SNAP SEXTING PREMIUM CARD */

.sext-card{
background:#fff;
border-radius:14px;
padding:12px;
box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.sext-top{
display:flex;
gap:12px;
align-items:flex-start;
}

.sext-avatar{
width:52px;
height:52px;
border-radius:12px;
object-fit:cover;
background:#fffc00;
padding:4px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.sext-info{
flex:1;
}

.sext-username{
font-weight:600;
font-size:14px;
display:flex;
align-items:center;
gap:6px;
}

.sext-badge{
font-size:11px;
padding:2px 6px;
border-radius:6px;
font-weight:600;
}

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

.sext-badge.VIP-PAGE{
background:#fef3c7;
color:#92400e;
}

.sext-order-row{
display:flex;
align-items:center;
width:100%;
gap:8px;
}

.sext-order{
font-size:12px;
color:#374151;
}

.sext-view-btn{
margin-left:auto;
font-size:12px;
font-weight:600;
background:linear-gradient(135deg,#2563eb,#3b82f6);
border:none;
color:#fff;
padding:6px 12px;
border-radius:8px;
white-space:nowrap;
}

.sext-date{
font-size:12px;
color:#6b7280;
margin-top:3px;
}

.sext-card{
background:#fff;
border-radius:14px;
padding:14px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
border:1px solid #f1f5f9;
}

.sext-top{
display:flex;
align-items:center;
gap:12px;
}

.sext-info{
flex:1;   /* IMPORTANT */
width:100%;
}

.sext-order-row{
display:flex;
align-items:center;
width:100%;
}

.sext-view-btn{
margin-left:auto;
}

.snap-card.sext-card{
display:block;
}

/* AVATAR CONTAINER */

.sext-avatar{
width:52px;
height:52px;
border-radius:12px;
overflow:hidden;
position:relative;
flex-shrink:0;
background:#fffc00;
display:flex;
align-items:center;
justify-content:center;
}

/* IMAGE */

.sext-avatar img{
width:52px;
height:52px;
object-fit:cover;
}

/* GHOST ICON */

.sext-ghost{
position:absolute;

bottom:-6px;
right:-6px;

background:#fffc00;

width:24px;
height:24px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;

border:2px solid white;

box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.snap-price-badge{

position:absolute;
top:12px;
right:12px;

background:rgba(17,24,39,.9);

color:#22c55e;

padding:6px 12px;

border-radius:10px;

font-size:14px;
font-weight:700;

display:flex;
align-items:center;
gap:6px;

backdrop-filter:blur(6px);

box-shadow:0 6px 18px rgba(0,0,0,.25);

}


.manager-only{
display:none;
}

.snap-highlight-note{
margin-top:10px;
padding:8px 10px;

background:#fff7ed;
border-left:4px solid #f59e0b;

border-radius:8px;
font-size:13px;
color:#92400e;
font-weight:500;

width:100%;
max-width:350px;
}

@media (max-width:768px){
.snap-export-btn{
display:none;
}
}

/* VIDEO CALL MOBILE LIST */

#callList{
display:none;
}

/* MOBILE VIEW */

@media(max-width:768px){

#callTable{
display:none;
}

#callList{
display:block;
}

}

/* VIDEO CALL URGENT DOT */

#callUrgentCard{
position:relative;
}

#callUrgentCard.call-urgent-dot::after{

content:"";
position:absolute;

top:10px;
right:12px;

width:10px;
height:10px;

background:#ef4444;
border-radius:50%;

box-shadow:0 0 8px rgba(239,68,68,0.9);

animation:callDotPulse 1.4s infinite;

}

@keyframes callDotPulse{

0%{transform:scale(1);}
50%{transform:scale(1.3);}
100%{transform:scale(1);}

}

.snap-card.urgent {
  animation: urgentPulse 1.6s ease-in-out infinite;
}


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


@keyframes urgentPulse {
  0% { box-shadow: 0 0 0 rgba(239,68,68,0); }
  50% {
    box-shadow:
      0 0 18px rgba(239,68,68,.45),
      0 8px 22px rgba(239,68,68,.25);
  }
  100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
}


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

@keyframes urgentRowBg {
  0% {
    background-color: rgba(239,68,68,0.03);
  }
  50% {
    background-color: rgba(239,68,68,0.15);
  }
  100% {
    background-color: rgba(239,68,68,0.03);
  }
}


.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;}
}

.sext-edit-btn,
.sext-delete-btn{
  border:none;
  color:#fff;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  width:100%;
}

.sext-edit-btn{
  background:#2563eb;
}

.sext-delete-btn{
  background:#ef4444;
}

.snap-username,
.sext-username {
  max-width: 150px;       /* adjust mo depende sa layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* SNAP APP MOBILE NAME + BADGE FIX */
#snapList .snap-name-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
}

#snapList .snap-name-text{
  color:#111827;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:11ch;
  line-height:1.1;
  display:inline-block;
  flex:0 1 auto;
}

#snapList .account-badge{
  flex-shrink:0;
  white-space:nowrap;
}

#sextList .sext-name-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
}

#sextList .snap-name-text{
  color:#111827;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:11ch;
  line-height:1.1;
  display:inline-block;
  flex:0 1 auto;
}

#sextList .account-badge{
  flex-shrink:0;
  white-space:nowrap;
  margin-top:0;
}

#callList .sext-name-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
}

#callList .snap-name-text{
  color:#111827;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:11ch;
  line-height:1.1;
  display:inline-block;
  flex:0 1 auto;
}

#callList .account-badge{
  flex-shrink:0;
  white-space:nowrap;
  margin-top:0;
}


.call-edit-btn,
.call-delete-btn{
  width:80px;
  flex-shrink:0;
  border:none;
  color:white;
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0 14px 14px 0;
}

.call-edit-btn{
  background:#3b82f6;
}

.call-delete-btn{
  background:#ef4444;
}