@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =====================================================
ROOT VARIABLES
===================================================== */

:root{
--primary:#2563eb;
--primary-hover:#1d4ed8;
--primary-light:#eff6ff;

--bg:#f8fafc;
--card-bg:#ffffff;

--text-main:#111827;
--text-muted:#6b7280;

--border:#e5e7eb;
--danger:#ef4444;
}

/* =====================================================
GLOBAL
===================================================== */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text-main);
}


/* INPUT */

.input-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.input-group label{
font-size:12px;
font-weight:600;
color:#6b7280;
margin-bottom:6px;
}

.input-group input{
padding:12px 14px;
border-radius:10px;
border:1px solid #e5e7eb;
font-size:14px;
transition:.2s;
}

.input-group input:focus{
border-color:#2563eb;
outline:none;
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* =====================================================
BUTTONS
===================================================== */

.primary-btn{
background:var(--primary);
color:white;
border:none;
padding:12px;
border-radius:10px;
cursor:pointer;
font-weight:500;
box-shadow: 0 8px 20px rgba(37,99,235,.25);
}

.primary-btn:hover{
background:var(--primary-hover);
transform: translateY(-1px);
}

.primary-btns{
background:#16a34a;
color:white;
border:none;
padding:12px;
border-radius:10px;
cursor:pointer;
}

.primary-btns:hover{
background:#15803d;
}

/* =====================================================
LAYOUT
===================================================== */

.app{
display:flex;
min-height:100vh;
}

.sidebar{
width:260px;
background:white;
border-right:1px solid var(--border);
padding:30px 20px;



display:flex;
flex-direction:column;
justify-content:space-between;
transition:all .25s ease;
overflow:hidden;
}

.logo{
font-size:20px;
font-weight:600;
margin-bottom:35px;
}

/* MENU */

.menu{
list-style:none;
padding:0;
margin:0;
}

.menu li{
display:flex;
align-items:center;
gap:10px;
padding:12px 15px;
border-radius:10px;
margin-bottom:8px;
cursor:pointer;
font-size:14px;
color:var(--text-muted);
transition:.2s;
}

.menu li:hover{
background:var(--primary-light);
color:var(--primary);
}

.menu .active{
background:var(--primary);
color:white;
}

.menu-icon{
font-size:18px;
width:20px;
}

.menu-text{
flex:1;
}


/* MAIN */

.main{
flex:1;
padding:40px;
overflow-y:auto;
position:relative;
}

/* TOPBAR */

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

.topbar-left{
display:flex;
align-items:center;
gap:10px;
}

/* =====================================================
DASHBOARD CARDS
===================================================== */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
margin-bottom:35px;
}

.card{
background:var(--card-bg);
padding:25px;
border-radius:16px;
border:1px solid var(--border);
transition:.25s;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.card h3{
font-size:13px;
color:var(--text-muted);
margin-bottom:10px;
}

.card p{
font-size:26px;
font-weight:600;
margin:0;
}

/* =====================================================
TABLE
===================================================== */

.table-section{
background:white;
height:auto;
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px 25px;
position:relative;
z-index:10;
}

.table-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.table-header input,
.table-header select{
padding:10px 12px;
border-radius:8px;
border:1px solid var(--border);
}

table{
width:100%;
border-collapse:collapse;
font-size:15px;
}

thead th{
position:sticky;
top:0;
background:#f9fafb;
padding:14px 18px;
text-align:left;
font-weight:600;
color:var(--text-muted);
border-bottom:1px solid var(--border);
}

td{
padding:14px 18px;
border-bottom:1px solid var(--border);
}

tbody tr:hover{
background:#f8fafc;
}

/* =====================================================
STATUS BADGES
===================================================== */

.status{
padding:6px 14px;
border-radius:20px;
font-size:13px;
font-weight:600;
display:inline-block;
}

.status.Pending{background:#f1f5f9;color:#64748b;}
.status.Urgent{background:#fee2e2;color:#dc2626;}
.status.Replaced{background:#dbeafe;color:#2563eb;}
.status.Completed{background:#dcfce7;color:#16a34a;}

/* =====================================================
ACTION MENU
===================================================== */

.dots-btn{
background:#f3f4f6;
border:none;
width:36px;
height:36px;
border-radius:8px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.action-menu{
position:absolute;
top:100%;
right:0;
background:white;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
padding:6px 0;
min-width:160px;
display:none;
z-index:9999;
}

.action-menu div{
padding:10px;
cursor:pointer;
}

.action-menu div:hover{
background:#f3f4f6;
}

.action-menu .delete{
color:#ef4444;
}



/* =====================================================
COCK IMAGE
===================================================== */

.cr-thumb{
width:50px;
height:50px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

.cr-thumb:hover{
transform:scale(1.15);
}

/* =====================================================
COCK PREVIEW MODAL
===================================================== */

.ig-modal{
position:relative;
width:420px;
max-height:90vh;
background:white;
border-radius:22px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:0 50px 120px rgba(0,0,0,.35);
animation:previewEnter .25s ease;
}

@keyframes previewEnter{
from{
opacity:0;
transform:translateY(20px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

.ig-image-wrapper{
position:relative;
display:flex;
justify-content:center;
align-items:center;
background:black;
}

.ig-image{
width:auto;
max-width:100%;
height:auto;
max-height:420px;
object-fit:contain;
display:block;
margin:auto;
}

@media (max-width:768px){

.ig-image-wrapper{
display:flex;
justify-content:center;
align-items:center;
}

}

.ig-image-wrapper::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:120px;
background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  z-index:1;
}

.image-close-btn{
position:absolute;
top:14px;
right:14px;
width:40px;
height:40px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.95);
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:20;
box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.image-close-btn:hover{
background:white;
transform:scale(1.1);
}

.ig-fan-badge{
position:absolute;
top:14px;
left:14px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
padding:7px 15px;
border-radius:40px;
font-size:12px;
font-weight:600;
}

.ig-content{
padding:18px;
display:flex;
flex-direction:column;
gap:12px;
overflow-y:auto;
}

.ig-stats{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding:10px 14px;
border-radius:14px;
background:#f8fafc;
border:1px solid #e5e7eb;
font-size:14px;
font-weight:600;
}
/* STATS COLORS */

.ig-stat-left{
color:#f59e0b; /* gold for rate */
}

.ig-stat-center{
color:#6366f1; /* purple/blue for duration */
}

.ig-stat-right{
color:#16a34a; /* green for paid */
}

.ig-stat-left,
.ig-stat-center,
.ig-stat-right{
font-weight:700;
}

.ig-date{
font-size:12px;
color:#6b7280;
text-align:right;
}

.ig-sections{
display:flex;
flex-direction:column;
gap:14px;
}

.ig-section-card{
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:14px;
padding:14px 16px;
}

.ig-section-header{
font-size:11px;
font-weight:700;
color:#6b7280;
margin-bottom:6px;
}

.ig-section-body{
font-size:14px;
line-height:1.6;
color:#111827;
}



/* =====================================================
ANIMATION
===================================================== */

@keyframes fadeIn{
from{opacity:0;transform:translateY(15px);}
to{opacity:1;transform:translateY(0);}
}

/* =====================================================
PREMIUM STATUS DASHBOARD
===================================================== */

.premium-status-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-bottom:30px;
}

.status-card{
background:white;
padding:24px;
border-radius:18px;
border:1px solid #e5e7eb;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
transition:.25s;
}

.status-card:hover{
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.status-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
border-radius:18px 0 0 18px;
}

.status-card.pending::before{background:#f59e0b;}
.status-card.urgent::before{background:#ef4444;}
.status-card.replaced::before{background:#6366f1;}
.status-card.completed::before{background:#10b981;}

.status-info h4{
margin:0;
font-size:13px;
color:#6b7280;
}

.status-info p{
margin:4px 0 0;
font-size:28px;
font-weight:700;
}



/* =====================================================
TABLE IMPROVEMENTS
===================================================== */

table{
border-collapse:separate;
border-spacing:0;
border-radius:12px;
overflow:visible;
}

tbody tr{
transition:.15s;
}

tbody tr:hover{
background:#f1f5f9;
}

td button{
transition:.2s;
}

td button:hover{
transform:scale(1.05);
}

/* =====================================================
SMOOTH SCROLLBAR
===================================================== */

.table-wrapper::-webkit-scrollbar{
height:6px;
}

.table-wrapper::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:20px;
}

/* =====================================================
SKELETON LOADING
===================================================== */

.skeleton{
height:14px;
width:100%;
border-radius:6px;
background:linear-gradient(
90deg,
#f1f5f9 25%,
#e2e8f0 37%,
#f1f5f9 63%
);
background-size:400% 100%;
animation:skeletonLoading 1.4s ease infinite;
}

@keyframes skeletonLoading{
0%{background-position:100% 50%}
100%{background-position:0 50%}
}

/* =====================================================
COCK IMAGE HOVER
===================================================== */

.cr-thumb{
width:50px;
height:50px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

.cr-thumb:hover{
transform:scale(1.2);
}

.preview-text{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.preview-text.expanded{
-webkit-line-clamp:unset;
}

.preview-toggle{
font-size:13px;
color:#2563eb;
cursor:pointer;
display:inline-block;
margin-top:6px;
}

.preview-toggle:hover{
text-decoration:underline;
}
/* =====================================================
MODAL SYSTEM
===================================================== */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:10000;
touch-action:pan-y;
}

.modal-content{
position:relative;    
background:white;
padding:30px;
border-radius:16px;
width:420px;
max-height:90vh;
overflow-y:auto;
box-shadow:0 30px 80px rgba(0,0,0,.3);
animation:fadeIn .2s ease;
}

.modal-content h3{
margin-top:0;
margin-bottom:20px;
}

/* =====================================================
FORM FIELDS
===================================================== */

.field-group{
display:flex;
flex-direction:column;
margin-bottom:14px;
}

.field-group label{
font-size:12px;
font-weight:600;
margin-bottom:4px;
color:#6b7280;
}

.field-group input,
.field-group select{
padding:10px 12px;
border-radius:8px;
border:1px solid #e5e7eb;
font-size:14px;
}

.field-group input:focus,
.field-group select:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

/* duration group */

.duration-group{
display:flex;
gap:10px;
}

.duration-group input{
flex:1;
}

.duration-group select{
width:120px;
}

/* =====================================================
MODAL BUTTONS
===================================================== */

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

.modal-buttons button{
padding:10px 14px;
border-radius:8px;
border:none;
cursor:pointer;
}

.modal-buttons button:not(.primary-btn){
background:#f3f4f6;
}

/* =====================================================
PROFILE LINK
===================================================== */

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

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

/* =====================================================
EXPANDABLE TABLE TEXT
===================================================== */

.cell-preview{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-width:200px;
}

.see-more{
font-size:12px;
color:#2563eb;
cursor:pointer;
}

/* =====================================================
ACTION MENU WRAPPER
===================================================== */

.action-wrapper{
position:relative;
display:inline-block;
}

/* =====================================================
COCK PREVIEW IMAGE (UPLOAD)
===================================================== */

.cock-preview-wrapper{
margin-top:10px;
width:120px;
height:120px;
border-radius:12px;
overflow:hidden;
border:1px solid #e5e7eb;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
background:#f8fafc;
}

.cock-preview{
width:100%;
height:100%;
object-fit:cover;
display:none;
}

/* =====================================================
PREVIEW COMPLETED BADGE
===================================================== */

.ig-completed{
position:absolute;
bottom:12px;
right:12px;
background:#16a34a;
color:white;
padding:6px 10px;
font-size:11px;
border-radius:20px;
font-weight:600;
}

/* =====================================================
SCROLLBAR MODAL
===================================================== */

.modal-content::-webkit-scrollbar{
width:6px;
}

.modal-content::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:10px;
}

/* =====================================================
SIDEBAR COLLAPSE
===================================================== */

.sidebar{
transition:all .25s ease;
overflow:hidden;
}

.sidebar.collapsed{
width:65px;
padding:25px 8px;
}

.sidebar.collapsed .logo{
display:none;
}

.sidebar.collapsed .menu li{
justify-content:center;
font-size:11px;
}

.app.sidebar-collapsed .main{
padding-left:20px;
}

.sidebar.collapsed .notif-badge{
display:none !important;
}

.sidebar.collapsed .logout-btn span:last-child{
display:none;
}

.sidebar.collapsed .logout-btn{
justify-content:center;
}

.sidebar.collapsed .menu-text{
display:none;
}
/* toggle button */

.sidebar-toggle{
background:#f3f4f6;
border:none;
width:36px;
height:36px;
border-radius:8px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}

.sidebar-toggle:hover{
background:#e5e7eb;
}
/* =====================================================
NOTIFICATION BADGE
===================================================== */

.notif-badge{
background:#ef4444;
margin-left:auto;
color:white;
font-size:11px;
padding:3px 7px;
border-radius:20px;
font-weight:600;
display:none;
animation:badgePulse 1.5s infinite;
}

@keyframes badgePulse{
0%{transform:scale(1)}
50%{transform:scale(1.15)}
100%{transform:scale(1)}
}

/* =====================================================
SIDEBAR TOGGLE
===================================================== */

.menu-toggle{
background:#f3f4f6;
border:none;
width:38px;
height:38px;
border-radius:10px;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
padding:8px;
}

.menu-toggle span{
display:block;
height:2px;
background:#374151;
border-radius:2px;
width:100%;
}

.menu-toggle:hover{
background:#e5e7eb;
}

/* =====================================================
USER ROLE BADGE
===================================================== */

.user-badge{
color:white;
padding:6px 14px;
border-radius:20px;
font-size:13px;
font-weight:600;
}

/* STAFF */

.user-badge.staff{
background:linear-gradient(135deg,#3b82f6,#2563eb);
}

/* MANAGER */

.user-badge.manager{
background:linear-gradient(135deg,#10b981,#059669);
}

/* BOSS */

.user-badge.boss{
background:linear-gradient(135deg,#f59e0b,#d97706);
}

/* =====================================================
LOGOUT BUTTON
===================================================== */

.logout-btn{
display:flex;
align-items:center;
gap:10px;
border:none;
background:#f3f4f6;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:14px;
transition:.25s;
width:100%;
}

.logout-icon{
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:50%;
background:#fee2e2;
color:#dc2626;
font-size:14px;
transition:.25s;
}

.logout-btn:hover{
background:#fee2e2;
color:#dc2626;
}

.logout-btn:hover .logout-icon{
background:#dc2626;
color:white;
transform:rotate(90deg);
}



.menu-toggle{
background:#f3f4f6;
border:none;
width:38px;
height:38px;
border-radius:10px;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
padding:8px;
}

.menu-toggle span{
display:block;
height:2px;
background:#374151;
border-radius:2px;
}

/* =====================================================
DASHBOARD CHART
===================================================== */

.chart-card{

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

margin-bottom:25px;

box-shadow:0 10px 30px rgba(0,0,0,.08);
border:1px solid #e5e7eb;

}

.chart-card canvas{
width:100% !important;
height:300px !important;
}

/* =========================================
MOBILE RESPONSIVE
========================================= */

@media (max-width:768px){

/* MAIN PADDING */

.main{
padding:20px;
}

/* DASHBOARD CARDS */

.cards{
grid-template-columns:1fr;
}



/* STATUS GRID */

.premium-status-grid{
grid-template-columns:1fr;
}

/* TABLE SCROLL */

.table-wrapper{
overflow-x:auto;
}

/* TABLE SIZE */

table{
min-width:650px;
font-size:13px;
}

/* MODAL */

.modal-content{
width:95%;
padding:20px;
}

/* IMAGE PREVIEW */

.ig-modal{
width:420px;
max-width:95%;
}
.ig-image{
height:300px;
}

/* HEADER */

.table-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

/* SEARCH INPUT */

.table-header input{
width:100%;
}

/* SIDEBAR AUTO COLLAPSE */

.sidebar{
width:70px;
padding:20px 8px;
}

.sidebar .menu-text{
display:none;
}

.sidebar .logo{
display:none;
}

}

/* =========================================
MOBILE COCK RATE CARDS
========================================= */

#cockMobileList{
display:none;
flex-direction:column;
gap:16px;
}

.cock-mobile-card{
margin-top:0;
background:white;
border-radius:18px;
padding:14px;
border:1px solid #e5e7eb;
box-shadow:0 6px 18px rgba(0,0,0,.05);
display:flex;
flex-direction:column;
gap:10px;
}

.cock-mobile-header{
display:flex;
align-items:center;
gap:12px;
}

.cock-mobile-img{
width:70px;
height:70px;
border-radius:12px;
object-fit:cover;
}

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

.cock-mobile-stats{
display:flex;
justify-content:space-between;
font-size:13px;
color:#374151;
}

.cock-mobile-footer{
display:flex;
justify-content:space-between;
align-items:center;
}

.cock-mobile-actions button{
border:none;
padding:8px 12px;
border-radius:8px;
background:#f3f4f6;
cursor:pointer;
}

/* =========================================
MOBILE LAYOUT SWITCH
========================================= */

@media (max-width:768px){

.table-wrapper{
display:none;
}

#cockMobileList{
display:flex;
}

.cr-stats-row{
grid-template-columns:1fr 1fr;
}

.modal-content{
width:95%;
}


}


@media (max-width:768px){

.ig-modal{
width:420px;
max-width:95%;
}

.ig-image{
height:300px;
}

}

@media (max-width:768px){

.modal{
align-items:center;
justify-content:center;
}

.modal-content{
width:95%;
max-width:420px;
border-radius:20px;
max-height:90vh;
}

}

/* ===============================
INSTAGRAM STYLE HEADER
=============================== */

.ig-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid #e5e7eb;
background:white;
}

.ig-header-left{
display:flex;
align-items:center;
gap:10px;
}

.ig-avatar{
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:14px;
}

.ig-user{
display:flex;
flex-direction:column;
}

.ig-username{
font-size:14px;
font-weight:600;
}

.ig-profile-link{
font-size:12px;
color:#2563eb;
text-decoration:none;
}

.ig-profile-link:hover{
text-decoration:underline;
}

/* =========================================
PROFILE OVERLAY BUTTON
========================================= */

.ig-profile-overlay{
position:absolute;
bottom:14px;
right:14px;

background:rgba(255,255,255,.92);
backdrop-filter:blur(8px);

padding:8px 16px;
border-radius:40px;

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

color:#2563eb;
text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.35);
transition:.25s;
z-index:25;
}

.ig-profile-overlay:hover{
background:white;
transform:translateY(-2px);
}
/* =========================================
COCK STATUS BADGE
========================================= */

.ig-status-badge{
position:absolute;
bottom:14px;
left:14px;

padding:6px 14px;
border-radius:30px;

font-size:11px;
font-weight:700;
letter-spacing:.5px;

color:white;
z-index:30;

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

.ig-status-badge.pending{
background:#64748b;
}

.ig-status-badge.urgent{
background:#ef4444;
}


/* =========================================
CENTER STATUS OVERLAY
========================================= */

.ig-status-overlay{
position:absolute;
bottom:14px;
left:14px;

font-size:12px;
font-weight:700;
letter-spacing:.6px;

padding:8px 16px;
border-radius:30px;

color:white;

backdrop-filter:blur(6px);

z-index:40;

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

.ig-status-overlay.completed{
background:rgba(16,185,129,.85);
}

.ig-status-overlay.replaced{
background:rgba(59,130,246,.85);
}


/* =========================================
BLUR IMAGE WHEN FINISHED
========================================= */

.ig-image.completed,
.ig-image.replaced{
filter:blur(5px) brightness(.7);
}

/* =========================================
INSTAGRAM STYLE DATE FOOTER
========================================= */

.ig-footer-date{
margin-top:1px;
padding-top:5px;
border-top:1px solid #e5e7eb;
font-size:10px;
color:#9ca3af;
text-align:right;
}

/* ===============================
PREMIUM ACTION MENU
=============================== */

.premium-menu{
background:white;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
padding:6px;
min-width:190px;
}

.premium-menu div{
padding:10px 12px;
border-radius:8px;
font-size:13px;
display:flex;
align-items:center;
gap:8px;
}

.premium-menu div:hover{
background:#f1f5f9;
}

.premium-menu .delete{
color:#ef4444;
}
/* ===============================
PREMIUM MOBILE CARD
=============================== */

.premium-card{
background:white;
border-radius:18px;
padding:16px;
border:1px solid #e5e7eb;

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

transition:.2s;
}

.premium-card:active{
transform:scale(.98);
}

.cock-mobile-img{
width:70px;
height:70px;
border-radius:12px;
object-fit:cover;
box-shadow:0 5px 12px rgba(0,0,0,.2);
}

.cock-mobile-stats{
margin-top:8px;
display:flex;
justify-content:space-between;
font-weight:600;
}

.cock-mobile-actions button{
border:none;
background:#eff6ff;
color:#2563eb;
padding:6px 12px;
border-radius:10px;
font-size:12px;
font-weight:600;
}


/* =========================================
MOBILE FLOATING SIDEBAR FIX
========================================= */

@media (max-width:768px){

/* MAIN FULL WIDTH */

.app{
display:block;
}

.main{
padding:15px;
width:100%;
}

/* SIDEBAR FLOATING */

.sidebar{
position:fixed;
top:0;
left:-240px;   /* 🔥 IMPORTANT */

height:100%;
width:240px;

background:white;
z-index:2000;

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

transition:left .25s ease;
}
/* OPEN SIDEBAR */
.sidebar{
z-index:1000;
}
.sidebar.open{
left:0;
}

/* DARK OVERLAY */

.sidebar-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.4);
z-index:900;

opacity:0;
pointer-events:none;
transition:opacity .25s ease;
}

.sidebar-overlay.show{
opacity:1;
pointer-events:auto;
}

.sidebar-overlay.show{
display:block;
}

}

@media (max-width:768px){

.sidebar .menu-text{
display:block;
}

.sidebar .menu li{
justify-content:flex-start;
}

}


/* =========================
   PREMIUM MOBILE ORDER CARD
========================= */

.order-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border-radius:16px;
    padding:16px;
    box-shadow:0 6px 20px rgba(0,0,0,0.05);
    margin-bottom:14px;
    border:1px solid #f1f5f9;
}

/* IMAGE */

.order-img{
    width:70px;
    height:70px;
    border-radius:12px;
    object-fit:cover;
}

/* CONTENT */

.order-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* NAME */

.order-name{
    font-size:16px;
    font-weight:600;
    color:#0f172a;
}

/* ORDER NUMBER */

.order-number{
    font-size:13px;
    color:#64748b;
}

/* STATS */

.order-stats{
    display:flex;
    gap:16px;
    font-size:14px;
    color:#475569;
    margin-top:4px;
}

/* PRICE */

.order-price{
    font-weight:600;
    color:#16a34a;
}

/* FOOTER */

.order-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
}

/* STATUS BADGE */

.order-status{
    background:#f1f5f9;
    color:#334155;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

/* BIG VIEW BUTTON */

.view-btn{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(37,99,235,0.25);
}

.view-btn:active{
    transform:scale(0.96);
}

/* ======================================
PREMIUM MOBILE COCK CARD
====================================== */

.cock-mobile-card{
padding:18px;
border-radius:20px;
border:1px solid #e5e7eb;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.07);
display:flex;
flex-direction:column;
gap:12px;
}

/* HEADER */

.cock-mobile-header{
display:flex;
gap:14px;
align-items:center;
}

.cock-mobile-img{
width:72px;
height:72px;
border-radius:14px;
object-fit:cover;
box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.cock-mobile-user{
display:flex;
flex-direction:column;
}

.cock-mobile-name{
font-size:15px;
font-weight:600;
}

.cock-mobile-order{
font-size:12px;
color:#6b7280;
}

/* STATS */

.cock-mobile-stats{
display:flex;
justify-content:space-between;
font-size:14px;
margin-top:6px;
}

.stat{
color:#374151;
font-weight:500;
}

.stat.price{
color:#16a34a;
font-weight:700;
}

/* FOOTER */

.cock-mobile-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:4px;
}

/* BIG VIEW BUTTON */

.mobile-view-btn{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
border:none;
color:white;
padding:10px 20px;
border-radius:10px;
font-weight:600;
font-size:14px;
cursor:pointer;
box-shadow:0 6px 16px rgba(37,99,235,.35);
z-index:2;
position:relative;
}

.mobile-view-btn:active{
transform:scale(.95);
}

/* FORCE CENTER COCK PREVIEW */

#imagePreview{
display:flex;
align-items:center;
justify-content:center;
}

#imagePreview .ig-modal{
position:relative;
margin:auto;
max-height:90vh;
overflow-y:auto;
}

.tab-page{
display:none;
opacity:0;
transform:translateY(10px) scale(.98);
pointer-events:none;
position:relative;
width:100%;
transition:all .22s cubic-bezier(.4,0,.2,1);
}
.tab-page.active{
display:block;
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
position:relative;
z-index:2;
}
/* ======================================
ULTRA PREMIUM LOGIN
====================================== */

.login-body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(270deg,#0f172a,#1e3a8a,#2563eb,#0f172a);
background-size:600% 600%;
animation:gradientMove 18s ease infinite;
overflow:hidden;
}

/* animated gradient */

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* PARTICLES CANVAS */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

/* LOGIN WRAPPER */

.login-wrapper{
position:relative;
z-index:2;
}

/* GLASS CARD */

.login-card{
width:420px;
padding:48px 42px;
max-width:92%;

border-radius:26px;

background:linear-gradient(180deg,#ffffff,#f8fafc);

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

border:1px solid rgba(255,255,255,.4);

backdrop-filter:blur(10px);

animation:loginEnter .6s ease;
}


@keyframes loginEnter{
from{
opacity:0;
transform:translateY(30px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

/* HEADER */

.login-header{
text-align:center;
margin-bottom:30px;
color:#0f172a;
}

.login-header h1{
font-size:30px;
margin:0;
letter-spacing:.4px;
}

.login-header p{
margin-top:6px;
font-size:13px;
opacity:.7;
}

/* FLOATING INPUT */

.floating-group{
position:relative;
margin-bottom:20px;
}

.floating-group input{
width:100%;
height:52px;

padding:0 16px;

border-radius:14px;
border:1px solid #e2e8f0;

background:white;

font-size:16px;

transition:.25s;
}

.floating-group input:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

.floating-group label{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#64748b;
font-size:13px;
pointer-events:none;
transition:.2s;
}

.floating-group input:focus + label,
.floating-group input:not(:placeholder-shown) + label{
top:-8px;
font-size:11px;
color:#93c5fd;
}

/* BUTTON */

.login-btn{
width:100%;
height:48px;

margin-top:18px;

background:linear-gradient(135deg,#3b82f6,#2563eb);

border:none;
border-radius:14px;

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

color:white;

cursor:pointer;

transition:.25s;
}

.login-btn:hover{
transform:translateY(-2px);
box-shadow:0 15px 35px rgba(37,99,235,.5);
}

/* APPLE SPINNER */

.spinner{
width:18px;
height:18px;

border:2px solid rgba(255,255,255,.4);
border-top:2px solid white;

border-radius:50%;

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

animation:spin .7s linear infinite;

display:none;
}

.login-btn.loading .spinner{
display:block;
}

.login-btn.loading .btn-text{
visibility:hidden;
}

@keyframes spin{
to{transform:translate(-50%,-50%) rotate(360deg);}
}

/* SUCCESS FLASH */

.login-success{
animation:successFlash .8s ease;
}

@keyframes successFlash{
0%{box-shadow:0 0 0 rgba(34,197,94,0)}
50%{box-shadow:0 0 60px rgba(34,197,94,.9)}
100%{box-shadow:0 0 0 rgba(34,197,94,0)}
}

/* ERROR */

.error-text{
text-align:center;
margin-top:10px;
color:#f87171;
font-size:13px;
}

/* ===============================
LOGIN LAYOUT
=============================== */

.login-layout{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

/* LEFT BRAND PANEL */

.login-brand{
display:flex;
align-items:center;
justify-content:center;
padding:60px;
color:white;
}

.brand-content{
max-width:420px;
}

.brand-logo{
font-size:42px;
margin-bottom:10px;
}

.brand-tag{
font-size:15px;
opacity:.8;
margin-bottom:40px;
}

/* STATS */

.brand-stats{
display:flex;
flex-direction:column;
gap:16px;
}

.brand-stat{
background:rgba(255,255,255,.08);
padding:16px 20px;
border-radius:12px;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.15);
}

.brand-stat span{
display:block;
font-size:12px;
opacity:.7;
}

.brand-stat strong{
font-size:18px;
}

/* RIGHT PANEL */

.login-panel{
display:flex;
align-items:center;
justify-content:center;
}

/* MOBILE */

@media (max-width:900px){

.login-layout{
grid-template-columns:1fr;
}

.login-brand{
display:none;
}

}
.system-title{
text-align:center;
margin-bottom:34px;
}

.system-title h1{
margin:0;
font-size:34px;
font-weight:800;

background:linear-gradient(135deg,#2563eb,#1d4ed8);
-webkit-background-clip:text;
color:transparent;
}

.system-title p{
margin:6px 0;
font-size:15px;
color:#334155;
}

.system-title span{
font-size:12px;
color:#94a3b8;
}



/* =========================
MOBILE LOGIN FIX
========================= */
@media (max-width:600px){

/* BODY */

.login-body{
padding:20px;
align-items:flex-start;
padding-top:60px;
}

/* LOGIN CARD */

.login-card{
width:100%;
max-width:100%;

padding:38px 30px;

border-radius:22px;

min-height:480px;

box-shadow:
0 30px 80px rgba(0,0,0,.35),
0 0 0 1px rgba(0,0,0,.05);
}

/* TITLE */

.system-title h1{
font-size:32px;
}

.system-title p{
font-size:15px;
}

/* INPUTS */

.floating-group input{
height:58px;
font-size:17px;
border-radius:16px;
padding:0 16px;
}

/* BUTTON */

.login-btn{
height:58px;
font-size:17px;
border-radius:16px;
}

/* CHECKBOX */

.remember-row{
font-size:15px;
margin-top:10px;
}

}


/* =========================
LOGIN LOADING SCREEN
========================= */

#loadingScreen{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(135deg,#0f172a,#1e3a8a);

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

z-index:99999;

opacity:0;
pointer-events:none;

transition:.3s;
}

#loadingScreen.show{
opacity:1;
pointer-events:auto;
}

.loading-box{
text-align:center;
color:white;
}

.loading-spinner{

width:42px;
height:42px;

border:3px solid rgba(255,255,255,.3);
border-top:3px solid white;

border-radius:50%;

margin:auto;
margin-bottom:14px;

animation:spin .8s linear infinite;

}

@keyframes spin{
to{transform:rotate(360deg);}
}

/* =========================
LOGIN ERROR
========================= */

.error-text{
text-align:center;
color:#ef4444;
font-size:14px;
margin-top:12px;
}

/* =========================
SHAKE ANIMATION
========================= */

.shake{
animation:shakeLogin .4s;
}

@keyframes shakeLogin{

0%{transform:translateX(0)}
20%{transform:translateX(-8px)}
40%{transform:translateX(8px)}
60%{transform:translateX(-6px)}
80%{transform:translateX(6px)}
100%{transform:translateX(0)}

}

/* PREMIUM COCK RATE FORM */

.premium-cr-form{
width:100%;
max-width:520px;
border-radius:16px;
padding-bottom:20px;
}

/* SECTIONS */



.section-title{
font-size:13px;
font-weight:700;
color:#6b7280;
margin-bottom:12px;
}

/* UPLOAD AREA */

.upload-area{
border:2px dashed #d1d5db;
border-radius:12px;
padding:26px;
text-align:center;
cursor:pointer;
transition:.25s;
background:#f8fafc;
}

.upload-area:hover{
border-color:#2563eb;
background:#eff6ff;
}

.upload-area.dragging{
border-color:#2563eb;
background:#dbeafe;
}

.upload-icon{
font-size:30px;
margin-bottom:6px;
}

.upload-text{
font-weight:600;
}

.upload-sub{
font-size:12px;
color:#6b7280;
}

/* RATING */

.rating-slider{
display:flex;
flex-direction:column;
gap:10px;
}

.rating-slider input{
width:100%;
}

.rating-display{
font-size:18px;
font-weight:700;
color:#f59e0b;
}

/* FORM GROUP */

.cr-section .field-group{
margin-bottom:10px;
}

/* IMAGE UPLOAD PREVIEW */

.upload-area{
position:relative;
border:2px dashed #d1d5db;
border-radius:14px;
padding:40px;
text-align:center;
cursor:pointer;
overflow:hidden;
background:#f8fafc;
transition:.25s;
}

.upload-area:hover{
border-color:#2563eb;
background:#eff6ff;
}

.upload-placeholder{
pointer-events:none;
}

.upload-preview{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:none;
border-radius:14px;
}
/* DATE INPUT PREMIUM */

.date-wrapper{
display:flex;
align-items:center;
gap:8px;
}

.date-wrapper input{
flex:1;
}

.date-edit-btn{
border:none;
background:#f3f4f6;
width:38px;
height:38px;
border-radius:8px;
cursor:pointer;
font-size:16px;
display:flex;
align-items:center;
justify-content:center;
}

.date-edit-btn:hover{
background:#e5e7eb;
}

.input-error{
border:1px solid #ef4444 !important;
box-shadow:0 0 0 2px rgba(239,68,68,.15);
}

.cr-close-btn{
position:absolute;
top:16px;
right:16px;

width:36px;
height:36px;

border:none;
border-radius:50%;

background:#f3f4f6;
color:#374151;

font-size:18px;
cursor:pointer;

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

transition:all .2s ease;
}

.cr-close-btn:hover{
background:#e5e7eb;
transform:scale(1.1);
}

.center-save{
display:flex;
justify-content:center;
margin-top:24px;
}

.save-cr-btn{
width:100%;
max-width:420px;

padding:14px 18px;

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

border-radius:10px;
}
.confirm-box{
max-width:380px;
text-align:center;
padding:30px;
}

.confirm-buttons{
display:flex;
gap:12px;
justify-content:center;
margin-top:20px;
}

.confirm-modal{
width:360px;
background:white;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
overflow:hidden;
font-family:Inter;
}

.confirm-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
font-weight:600;
border-bottom:1px solid #eee;
}

.confirm-header button{
border:none;
background:none;
font-size:18px;
cursor:pointer;
}

.confirm-body{
padding:20px;
font-size:14px;
color:#374151;
}

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

.confirm-yes{
background:#2563eb;
color:white;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
}

.confirm-no{
background:#e5e7eb;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
}

.confirm-actions i{
margin-right:6px;
font-size:13px;
}


.mobile-edit-btn{

background:#2563eb;
color:white;

border:none;
border-radius:8px;

padding:8px 14px;

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

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

cursor:pointer;

}

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


@media (max-width:768px){

.table-header{
display:flex;
flex-direction:column;
gap:10px;
align-items:stretch;
}

.cock-filters input,
.cock-filters select{

width:100%;
height:40px;

}

}


/* ===============================
COMPACT COCK RATE MOBILE CARD
=============================== */

.compact-card{
background:#ffffff;
transform:none;
border:1px solid #e5e7eb;
border-radius:16px;

padding:14px;

margin-bottom:12px;

box-shadow:0 4px 16px rgba(0,0,0,.06);

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

/* HEADER */

.compact-header{
display:flex;
align-items:center;
gap:10px;
}

.compact-img{
width:68px;
height:68px;

border-radius:10px;
object-fit:cover;

box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.compact-user{
flex:1;
display:flex;
flex-direction:column;
}

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

.compact-order{
font-size:12px;
color:#6b7280;
}

/* THREE DOTS */

.compact-menu{
position:relative;
}

/* STATS */

.compact-stats{
display:flex;
justify-content:space-between;

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

padding:6px 0;

border-top:1px solid #f1f5f9;
border-bottom:1px solid #f1f5f9;
}

/* FOOTER */

.compact-footer{
display:flex;
justify-content:space-between;
align-items:center;
}

/* VIEW BUTTON */

.mobile-view-btn{

background:#2563eb;
color:white;

border:none;

padding:6px 12px;

border-radius:8px;

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

cursor:pointer;

transition:0.2s;
}

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


/* ======================================
INSTAGRAM FEED MOBILE
====================================== */

.ig-feed-card{
margin-bottom:18px;
}

.ig-feed-header{
display:flex;
align-items:center;
gap:10px;
padding-bottom:10px;
}

.ig-feed-avatar{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.ig-feed-user{
display:flex;
flex-direction:column;
}

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

.ig-feed-order{
font-size:12px;
color:#6b7280;
}

.ig-feed-image-wrapper{
position:relative;
border-radius:14px;
overflow:hidden;
margin-bottom:8px;
}

.ig-feed-image{
width:100%;
max-height:140px;
object-fit:cover;
border-radius:12px;
}

.ig-feed-stats{
display:flex;
justify-content:space-between;
font-size:13px;
font-weight:600;
padding:6px 2px;
}


/* SWIPE CARD */

.swipe-card{
margin-top:10px;
position:relative;
overflow:hidden;
border-radius:16px;

}

/* ACTION BUTTONS */

.swipe-actions{
position:absolute;
top:0;
right:0;
height:92%;
width:120px;

display:flex;
z-index:1;
}

.swipe-actions button{
flex:1;
border:none;
color:white;
font-weight:600;
font-size:14px;
}

.swipe-actions button:first-child{
    border-top-left-radius:1px;
    border-bottom-left-radius:1px;
}
.swipe-actions button:last-child{
    border-top-right-radius:20px;
    border-bottom-right-radius:25px;
}


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

.swipe-delete{
background:#ef4444;
}

/* CARD CONTENT */

.swipe-content{
background:#fff;
border-radius:16px;
padding:16px;

position:relative;
z-index:2;

width:100%;

transition:transform .2s ease;

touch-action:pan-y;
}
.toggle-password{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
font-size:16px;
color:#64748b;
cursor:pointer;
z-index:5;
touch-action:manipulation;
}

/* LOCKED CARD */

.swipe-card.locked{

opacity:.75;

}

.swipe-card.locked .swipe-content{

background:#f8fafc;

}

.locked-badge{

position:absolute;

top:10px;
right:10px;

background:#111827;
color:white;

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

padding:4px 8px;

border-radius:20px;

}

/* MOBILE STATUS COLORS */

.order-status.Pending{
background:#f1f5f9;
color:#64748b;
}

.order-status.Urgent{
background:#fee2e2;
color:#dc2626;
}

.order-status.Replaced{
background:#dbeafe;
color:#2563eb;
}

.order-status.Completed{
background:#dcfce7;
color:#16a34a;
}

.role-badge.staff{
background:#e5e7eb;
color:#374151;
}

.role-badge.manager{
background:#dbeafe;
color:#1d4ed8;
}

.role-badge.boss{
background:#fef3c7;
color:#b45309;
}

/* =========================
COCK RATE FILTER BAR
========================= */

.cock-filter-bar{

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

gap:14px;

background:white;
padding:14px 16px;

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

margin-bottom:18px;

box-shadow:0 4px 16px rgba(0,0,0,.05);

}

/* LEFT */

.cock-filter-left{
display:flex;
align-items:center;
gap:10px;
}

/* SEARCH */

.cock-search{
position:relative;
}

.cock-search input{

padding:10px 14px 10px 36px;

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

font-size:14px;
width:220px;

transition:.2s;

}

.cock-search input:focus{
outline:none;
box-shadow:none;
}

.cock-search i{

position:absolute;
left:12px;
top:50%;

transform:translateY(-50%);

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

}

/* STATUS FILTER */

.cock-status-filter{

padding:10px 12px;

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

font-size:14px;
cursor:pointer;

background:white;

transition:.2s;

}

.cock-status-filter:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* RIGHT */

.cock-filter-right{
display:flex;
gap:10px;
}

/* EXPORT BUTTON */

.export-btn{

background:#f3f4f6;
border:none;

padding:10px 14px;

border-radius:10px;

cursor:pointer;

font-size:14px;
display:flex;
align-items:center;
gap:6px;

}

.export-btn:hover{
background:#e5e7eb;
}


/* MOBILE TOOLBAR FIX */

@media (max-width:768px){

.cock-filter-bar{
flex-direction:column;
align-items:stretch;
gap:10px;
}

.cock-filter-left{
flex-direction:column;
width:100%;
gap:10px;
}

.cock-search{
width:100%;
}

.cock-search input{
width:100%;
}

.cock-status-filter{
width:100%;
}

.cock-filter-right{
width:100%;
display:flex;
gap:10px;
}

.cock-filter-right button{
flex:1;
}

}
.swipe-content{
will-change: transform;
}

.tab-page{
display:none;
}

.tab-page.active{
display:block;
}

.manager-only{
display:none;
}

.cock-card{
  background:#fff;
  border-radius:18px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.cock-card-header{
  display:flex;
  align-items:center;
  gap:10px;
}

.cock-card-img{
  width:55px;
  height:55px;
  border-radius:12px;
  object-fit:cover;
}

.cock-card-user{
  flex:1;
}

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

.cock-card-order{
  font-size:12px;
  color:#6b7280;
}

.cock-card-status{
  font-size:11px;
  padding:4px 10px;
  border-radius:20px;
  font-weight:600;
}

/* SECTION */
.cock-card-section{
  margin-top:10px;
}

.cock-label{
  font-size:11px;
  color:#6b7280;
  margin-bottom:4px;
}

.cock-text{
  font-size:13px;
  line-height:1.4;
}

/* STATS */
.cock-card-stats{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:13px;
}

.cock-stat.price{
  font-weight:600;
}

/* FOOTER */
.cock-card-footer{
  margin-top:12px;
}

.cock-view-btn{
  width:100%;
  background:#3b82f6;
  color:white;
  border:none;
  padding:10px;
  border-radius:10px;
  font-weight:600;
}

.cock-simple-card{
  background:#fff;
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.cock-simple-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.cock-simple-img{
  width:60px;
  height:60px;
  border-radius:12px;
  object-fit:cover;
}

.cock-simple-info{
  flex:1;
}

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

.cock-simple-order{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}

.cock-simple-date{
  font-size:12px;
  color:#9ca3af;
  margin-top:4px;
}

.cock-simple-btn{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:none;
  border-radius:10px;
  background:#3b82f6;
  color:#fff;
  font-weight:600;
}

.cock-simple-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.cock-view-inline{
  background:#3b82f6;
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.cock-snap-card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:#fff;
  padding:14px;
  border-radius:18px;

  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border-left:4px solid #ef4444; /* optional accent */
}

/* LEFT IMAGE */
.cock-snap-img{
  width:60px;
  height:60px;
  border-radius:14px;
  object-fit:cover;
}

/* MIDDLE */
.cock-snap-middle{
  flex:1;
}

.cock-snap-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.cock-snap-name{
  font-weight:600;
  font-size:15px;
}

.cock-snap-badge{
  background:#fef3c7;
  color:#92400e;
  font-size:11px;
  padding:3px 8px;
  border-radius:10px;
  font-weight:600;
}

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

.cock-snap-date{
  font-size:13px;
  color:#6b7280;
  margin-top:4px;
}

/* RIGHT BUTTON */
.cock-snap-right{
  display:flex;
  align-items:center;
}

.cock-snap-btn{
  background:linear-gradient(135deg,#4f46e5,#3b82f6);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:14px;
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}

.cock-swipe-wrapper{
  position:relative;
  overflow:hidden;
  margin-bottom:12px;
}



.swipe-btn{
  width:80px;
  height:100%;
 flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-weight:600;
  border:none;
}



.swipe-btn.edit{
  background:linear-gradient(135deg,#4f46e5,#3b82f6);
}

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

/* CARD */
.cock-snap-card{
  position:relative;
  z-index:2;
  background:#fff;
  transition:transform 0.25s ease;
}

.cock-swipe-wrapper{
position:relative;
overflow:hidden;
border-radius:16px;
}

.cock-swipe-content{
  width:100%;
  position:relative;
  z-index:2;
  background:white;
  transition:transform .25s ease;
  will-change:transform;
}




/* =========================
SWIPE SYSTEM (FIXED)
========================= */

.cock-swipe-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  margin-bottom:12px;
}

.cock-swipe-actions{
  position:absolute;
  top:0;
  bottom:0;

  display:flex;
  z-index:1;
}

/* 🔥 kapag 2 buttons */
.cock-swipe-actions.has-multiple{
  right:0;
}

/* 🔥 kapag 1 button */
.cock-swipe-actions.single{
  right:0;
  width:80px;
}

/* BUTTON */
.swipe-btn{
  width:80px;
  height:100%;

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

  color:#fff;
  font-weight:600;
  border:none;
}


/* COLORS */
.swipe-btn.edit{
  background:linear-gradient(135deg,#4f46e5,#3b82f6);
}

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

/* 🔥 IMPORTANT: ITO LANG GUMAGALAW */
.cock-swipe-content{
  width:100%;
  position:relative;
  z-index:2;
  background:#fff;

  transition:transform .25s ease;
  will-change:transform;
}

/* CARD */
.cock-snap-card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:#fff;
  padding:14px;
  border-radius:18px;

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

}



@media (max-width:768px){
  .snap-desktop-toolbar{
    display:none !important;
  }

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



.desktop-only{
display:block;
}

.mobile-only{
display:none;
}

@media (max-width:768px){
  .desktop-only{
    display:none !important;
  }

  .mobile-only{
    display:block !important;
  }
}

/* ===== FINAL TOOLBAR FIX ===== */

/* DESKTOP */
.snap-desktop-toolbar{
display:flex;
}

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

/* MOBILE */
@media (max-width:768px){
  .snap-desktop-toolbar{
    display:none;
  }

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


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

.vms-toolbar{
display:none !important;
}

/* 🔥 FIX COCK RATE SIZE */
#tab-cockRate .snap-stat-card{
  padding: 12px;
  height: 90px;
}

#tab-cockRate .snap-stat-card span{
  font-size: 14px;
}

#tab-cockRate .snap-stat-card h2{
  font-size: 20px;
}



/* 🔥 UNIFIED SNAP STATS (ALL TABS SAME SIZE) */

.snap-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.snap-stat-card {
  background: #fff;
  padding: 16px !important; /* 🔥 force same */
  border-radius: 14px;
  border: 1px solid #e5e7eb;

  height: 100px; /* 🔥 SAME HEIGHT */

  display: flex;
  flex-direction: column;
  justify-content: center;

  transition: .2s;
}

.snap-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* TITLE */
.snap-stat-card h4,
.snap-stat-card span {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* NUMBER */
.snap-stat-card p,
.snap-stat-card h2 {
  font-size: 22px !important;
  font-weight: 700;
  margin: 4px 0 0;
}

.snap-stat-card h4,
.snap-stat-card span {
  font-size: 13px !important;
  font-weight: 500;
}

.snap-stat-card p,
.snap-stat-card h2 {
  font-size: 24px !important;
  font-weight: 700;
}

.snap-stat-card {
  height: 100px !important;
  padding: 8px 10px !important;
}

.status-date {
  color: #3b82f6;
  font-weight: 500;
}

.ig-footer-date div {
  margin-top: 2px;
  font-size: 10px;
}

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

.status-completed {
  color: #16a34a;
}

.cock-snap-card.Completed,
.cock-snap-card.Replaced {
  opacity: 0.5;
  filter: grayscale(30%);
}

.cock-snap-card.completed,
.cock-snap-card.replaced {
  opacity: 0.5;
  filter: grayscale(30%);
}

/* optional hover para medyo buhay pa */
.cock-snap-card.Completed:hover,
.cock-snap-card.Replaced:hover {
  opacity: 0.8;
}

tr.Completed,
tr.Replaced {
  opacity: 0.5;
}

body{
  overflow: hidden;
}

.main{
  height: 100vh;   /* 🔥 IMPORTANT */
}

.sidebar{
  height: 100vh;
}

@media (min-width:769px){
  body{
    overflow: hidden;
  }

  .main{
    height: 100vh;
    overflow-y: auto;
  }

  .sidebar{
    height: 100vh;
  }
}

.cock-snap-badge{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

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

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

.snap-profile-link{
  position:absolute;
  bottom:14px;
  right:14px;

  z-index:999;           /* 🔥 pinaka important */
  pointer-events:auto;   /* 🔥 para clickable */

  background:rgba(255,255,255,.92);
  padding:8px 16px;
  border-radius:40px;

  color:#2563eb;
  font-weight:600;
  text-decoration:none;

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

.snap-profile-link:hover{

background:#0096cc;

transform:translateY(-2px);

}

.ig-image{
  position:relative;
  z-index:0;
}

/* ===== MOBILE CARD STATUS COLORS FIX ===== */

.cock-mobile-card {
  border-left: 5px solid transparent;
}

/* ✅ Pending */
.cock-mobile-card.pending {
  border-left: 5px solid #f59e0b; /* yellow */
}

/* ✅ Urgent */
.cock-mobile-card.urgent {
  border-left: 5px solid #ef4444; /* red */
}

/* ❌ Remove colors for others */
.cock-mobile-card.replaced,
.cock-mobile-card.completed {
  border-left: 5px solid transparent !important;
}


.cock-snap-card.pending {
  border-left: 5px solid #f59e0b;
}

.cock-snap-card.urgent {
  border-left: 5px solid #ef4444;
}


.cock-snap-card.replaced{
  border-left: 5px solid #bddbff;
}

.cock-snap-card.completed {
  border-left: 5px solid #b2d8aa;
}

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

  #cockMobileList{
    display:flex;
  }
}

.ig-user-info{
  position:absolute;
  top:14px;
  left:14px;
  z-index:10;

  display:flex;
  flex-direction:column;
  gap:4px;
}

/* NAME */
.ig-name{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

/* ACCOUNT */
.ig-account{
  background:#fef3c7;
  color:#92400e;
  padding:4px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  width:fit-content;
}

/* STATUS */
.ig-status-line{
  margin-top:2px;
}

/* MAIN PAGE */
.ig-account.main-page{
  background:#dbeafe !important;
  color:#2563eb !important;
}

/* VIP PAGE */
.ig-account.vip-page{
  background:#fef3c7 !important;
  color:#92400e !important;
}

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

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

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


.table-wrapper th {
  white-space: nowrap;
}

.table-wrapper th:nth-child(5),
.table-wrapper td:nth-child(5){
  max-width: 250px;
  width: 250px;
}

.action-wrapper{
  position: relative;
}

.dots-btn{
  background: #f3f4f6;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.action-menu{
  position: absolute;
  right: 0;
  top: 40px;
  background: #fff;
  border-radius: 16px;
  padding: 10px 0;
  width: 200px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  display: none;
  z-index: 999;
}

.action-menu.active{
  display: block;
}

.action-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
}

.action-item:hover{
  background: #f5f5f5;
}

.action-item i{
  font-size: 16px;
}

.action-item.danger{
  color: #e53935;
}

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

/* 🔴 MOBILE URGENT CARD */
.cock-snap-card.Urgent {
  background:#fff5f5;
  border-left:4px solid #ef4444;
  animation:urgentPulse 1.6s ease-in-out infinite;
}

.table-wrapper {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-top: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

table{
  border-collapse: separate;
  border-spacing: 0 8px;
}

tbody tr{
  background:#fafafa;
  border-radius:10px;
}


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

.cock-profile-btn {
  text-decoration: none !important; /* 🔥 REMOVE underline */
  border-bottom: none !important;   /* kung may custom underline */
  color: #4f46e5; /* optional (match mo sa theme mo) */
}

.custom-compact-preview {
  width: min(520px, 94%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 26px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.custom-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.custom-compact-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.custom-compact-close {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 18px;
  cursor: pointer;
}

.custom-compact-close:hover {
  background: #e5e7eb;
}

.custom-compact-topcard {
  background: linear-gradient(180deg, #ffffff, #fafaff);
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
}

.custom-compact-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.custom-compact-name {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.custom-compact-type {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
}

.custom-compact-price {
  background: #ecfdf5;
  color: #059669;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.custom-compact-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-mini-pill {
  background: #eef2ff;
  color: #4f46e5;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.custom-compact-block {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}

.custom-compact-block.small {
  margin-bottom: 0;
}

.custom-block-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.custom-block-content {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 14px;
  color: #374151;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.custom-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.custom-compact-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
}

.custom-footer-date {
  font-size: 12px;
  color: #9ca3af;
}

.custom-profile-action {
  text-decoration: none;
  border: none;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.custom-profile-action:hover {
  opacity: 0.92;
}

.custom-footer-empty {
  font-size: 12px;
  color: #9ca3af;
}

.custom-compact-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.custom-compact-btn {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
}

.custom-compact-btn.ghost {
  background: #f3f4f6;
  color: #111827;
}

.custom-compact-btn.primary {
  background: #4f46e5;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.custom-compact-btn.ghost:hover {
  background: #e5e7eb;
}

.custom-compact-btn.primary:hover {
  opacity: 0.92;
}

@media (max-width: 640px) {
  .custom-compact-preview {
    width: 96%;
    padding: 14px;
    border-radius: 22px;
  }

  .custom-compact-grid {
    grid-template-columns: 1fr;
  }

  .custom-compact-topline,
  .custom-compact-footer,
  .custom-compact-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .custom-profile-action {
    justify-content: center;
  }

  .custom-compact-btn {
    width: 100%;
  }
}

.cock-snap-card.no-image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.cock-snap-card.no-image .cock-snap-middle {
  flex: 1;
}

.cock-snap-card.no-image .cock-snap-right {
  display: flex;
  align-items: center;
}

.cock-snap-btn.secondary {
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
}

.account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.account-badge.MAIN-PAGE {
  background: #dbeafe;
  color: #3b82f6;
}

.account-badge.VIP-PAGE {
  background: #fef3c7;
  color: #a16207;
}

.cock-snap-card.no-image .cock-snap-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

.cock-snap-card.no-image .cock-snap-name{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cock-snap-card.no-image .account-badge{
  flex-shrink: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: #f8fafc;
}

.app {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.sidebar .menu {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.main {
  flex: 1;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#contentArea {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.logout-btn {
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    z-index: 9999;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    width: 100%;
  }
}

/* Hide scrollbar but keep scroll */
#contentArea,
.table-wrapper,
#customOrdersMobileList,
#cockMobileList,
#voiceList,
.sidebar .menu {
  -ms-overflow-style: none;      /* IE / old Edge */
  scrollbar-width: none;         /* Firefox */
}

#contentArea::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
#customOrdersMobileList::-webkit-scrollbar,
#cockMobileList::-webkit-scrollbar,
#voiceList::-webkit-scrollbar,
.sidebar .menu::-webkit-scrollbar {
  display: none;                 /* Chrome / Safari */
  width: 0;
  height: 0;
}




/* OUTFIT REQUEST TEXTAREA */
.custom-textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  font-size:14px;
  font-family:'Inter',sans-serif;
  background:#fff;
  color:#111827;
  transition:.2s;
  outline:none;
}

.custom-textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.custom-textarea::placeholder{
  color:#9ca3af;
}

.custom-outfit-preview{
  display:block;
  margin-top:12px;
  width:100%;
  max-width:160px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  object-fit:cover;
}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  overflow-y: auto;
}

.custom-view-modal{
  width: min(920px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 26px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.custom-view-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-view-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #f8fafc;
  margin-bottom: 16px;
}

.custom-view-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.custom-info-card{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 18px;
}

.custom-info-card-full{
  grid-column: 1 / -1;
}

.custom-info-card label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #64748b;
  margin-bottom: 14px;
}

.custom-info-card p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;
  word-break: break-word;
}

.custom-outfit-preview{
  display: block;
  width: 100%;
  max-width: 220px;
  margin-top: 14px;
  border-radius: 20px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

.custom-view-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.custom-meta-item{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px 16px;
}

.custom-meta-item span{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.custom-meta-item strong{
  font-size: 15px;
  color: #0f172a;
}

.custom-view-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.custom-view-actions .custom-btn{
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

@media (max-width: 768px){

  .modal{
    padding: 10px;
    align-items: flex-start;
  }

  .custom-view-modal{
    width: 100%;
    max-height: 94vh;
    border-radius: 24px;
    padding: 16px;
    margin: 8px 0;
  }

  .custom-view-top{
    align-items: center;
    margin-bottom: 12px;
  }

  .custom-view-order{
    font-size: 18px;
    padding: 12px 18px;
    border-radius: 18px;
  }

  .custom-view-price{
    font-size: 18px;
    padding: 12px 18px;
    border-radius: 18px;
  }

  .custom-view-close{
    width: 52px;
    height: 52px;
    top: 14px;
    right: 14px;
  }

  .custom-view-head{
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
  }

  .custom-view-name{
    font-size: 26px;
    line-height: 1.1;
    word-break: break-word;
    margin: 0 0 10px;
  }

  .custom-view-sub{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .custom-status-badge{
    align-self: flex-start;
  }

  .custom-view-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .custom-info-card,
  .custom-info-card-full{
    grid-column: auto;
    padding: 16px;
    border-radius: 20px;
  }

  .custom-info-card p{
    font-size: 15px;
    line-height: 1.55;
  }

  .custom-outfit-preview{
    max-width: 100%;
    width: 100%;
    border-radius: 18px;
  }

  .custom-view-meta{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .custom-view-actions{
    flex-direction: column;
    gap: 10px;
  }

  .custom-view-actions .custom-btn{
    width: 100%;
    min-width: 100%;
  }
}





/* =========================
   CUSTOM ORDER DETAILS - SNAP STYLE
========================= */

.custom-order-viewer{
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.custom-order-card{
  width: 500px;
  max-width: 94%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.custom-order-header{
  align-items: flex-start;
}

.custom-order-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
   align-items:stretch;
}

.custom-order-summary{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  justify-content:flex-start;
  width:100%;
}

.custom-order-type-pill,
.custom-order-duration-pill,
.custom-order-price-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}



.custom-order-type-pill{
  background: #ede9fe;
  color: #4f46e5;
}

.custom-order-duration-pill{
  background: #e0e7ff;
  color: #4338ca;
}

.custom-order-price-pill{
  background: #dcfce7;
  color: #166534;
}

.custom-order-section{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  width:100%;
  text-align:left;
  margin:0;
align-items:flex-start;
}

.custom-order-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #64748b;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.custom-order-text{
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  word-break: break-word;
  text-align:left;
  margin-top: 10px; 
}

.custom-order-main-btn{
  width: 100%;
  border: none;
  background: linear-gradient(135deg,#3b82f6,#2563eb);
  color: white;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37,99,235,.22);
}

.custom-order-main-btn:hover{
  transform: translateY(-1px);
}

.custom-order-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-order-profile-btn{
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  width: 100%;
  background: #456eea !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 700;
  box-shadow: none !important;
}

.custom-order-dates{
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

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

  .custom-order-card{
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
    margin: 10px;
  }

  .custom-order-summary{
    gap: 8px;
  }

  .custom-order-type-pill,
  .custom-order-duration-pill,
  .custom-order-price-pill{
    font-size: 12px;
    padding: 9px 13px;
  }

  .custom-order-text{
    font-size: 15px;
  }

  .custom-order-main-btn,
  .custom-order-profile-btn,
  .snap-complete-btn,
  .snap-close-btn2{
    width: 100%;
  }
}


.custom-order-section.request-box,
.custom-order-section.outfit-box{
  max-width:none;
}

.custom-compact-topcard{
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}


.close-btn{
  border:1px solid #e5e7eb;
  background:white;
}

/* =========================
REQUEST BOX (STATUS BASED)
========================= */

.request-box{
  border-radius:16px;
  padding:16px 18px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  position:relative;
  overflow:hidden;
}

.request-box:hover{
  transform:translateY(-1px);
  transition:.2s;
} 

/* LEFT ACCENT ONLY */
.request-box::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:16px 0 0 16px;
}

/* STATUS COLORS */
.request-box.pending::before{
  background:#f59e0b;
}

.request-box.urgent::before{
  background:#ef4444;
}

.request-box.completed::before{
  background:#16a34a;
}

.request-box.replaced::before{
  background:#3b82f6;
}

.request-box.pending{
  border-left:4px solid #f59e0b;
}

.request-box.urgent{
  border-left:4px solid #ef4444;
}

.request-box.completed{
  border-left:4px solid #16a34a;
}

.request-box.replaced{
  border-left:4px solid #3b82f6;
}
/* =========================
NOTE (NEUTRAL LANG)
========================= */

.snap-highlight-note{
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin-top: 1px;

  color:#9ca3af !important;
  font-size:13px;

  box-shadow:none !important;
}

.outfit-box{
  background:#f9fafb; /* lighter */
  border:1px dashed #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
    opacity:0.9;
      margin-top:12px;
  margin-bottom:4px;
}

.outfit-box .label{
  font-size:11px;
  color:#9ca3af;
}

.outfit-box .value{
  font-size:14px;
  color:#374151;
}

.note-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
}

.custom-order-main-btn{
  width:auto;
  min-width:180px;
  background:#eef2ff;
  color:#4f46e5;
  border:1px solid #c7d2fe;
  box-shadow:none;
  padding:12px 18px;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
}

.custom-order-main-btn:hover{
  background:#e0e7ff;
  transform:none;
}

.outfit-box{
  background:#f9fafb;
  border:1px dashed #d1d5db;
  border-radius:16px;
  padding:16px 18px;
  margin-top:10px;
}

.custom-outfit-thumb{
  display:block;
    width:50px;
  height:50px;
  border-radius:12px;
  object-fit:cover;
  margin-top:10px;
  border:1px solid #e5e7eb;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}

.custom-outfit-thumb:hover{
    transform:scale(1.05);
  box-shadow:0 10px 20px rgba(0,0,0,.10);
}

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

.outfit-header .custom-order-label{
  margin:0;
  display:inline-block;
}

.view-outfit-link{
  font-size:12px;
  font-weight:600;
  color:#2563eb;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}

.view-outfit-link:hover{
  text-decoration:none;
  opacity:.85;
}

.view-outfit-link:focus{
  outline:none;
}

.outfit-preview-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20000;
  padding:24px;
}

.outfit-preview-box{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  background:transparent;
  box-shadow:none;
  padding:0;
  border-radius:20px;
}

.outfit-preview-image{
  display:block;
  max-width:90vw;
  max-height:85vh;
  border-radius:18px;
  object-fit:contain;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.outfit-preview-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#111827;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.outfit-preview-close:hover{
  transform:scale(1.05);
}

.custom-order-label{
  margin-bottom:8px;
}

.custom-order-label{
  margin-bottom:10px;
  letter-spacing:.5px;
}

.custom-order-form{
  max-width: 560px;
}

.custom-order-form-footer{
  position: sticky;
  bottom: 0;
    display: flex;
  gap: 12px;
  justify-content: flex-end; 
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(to top, #ffffff 78%, rgba(255,255,255,0));
  padding-top: 18px;
  margin-top: 18px;
}

.custom-order-form-footer button {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  min-width: 120px;
  max-width: 180px;
}

.custom-order-cancel-btn{
  border: none;
  background: #f3f4f6;
  color: #111827;
  height: 64px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.custom-order-cancel-btn:hover{
  background: #e5e7eb;
}

.custom-form-outfit-preview{
  max-width: 120px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
}


/* 🔥 FIX ADD & CANCEL BUTTON (CUSTOM ORDER ONLY) */

.custom-order-form-footer{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:20px;
}

.custom-order-form-footer button{
  width:auto !important;
  max-width:none !important;

  padding:12px 20px;
  height:48px;

  border-radius:12px;
  font-size:14px;
  font-weight:600;
}

/* CANCEL */
.custom-order-cancel-btn{
  background:#e5e7eb;
  color:#111827;
  border:none;
}

.custom-order-cancel-btn:hover{
  background:#d1d5db;
}

/* ADD */
.custom-order-form-footer .save-cr-btn{
  background:linear-gradient(135deg,#4f6cf7,#3b5bdb);
  color:white;
  border:none;
  box-shadow:0 6px 16px rgba(59,91,219,.25);
}

.custom-order-form-footer{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:20px !important;
}

.custom-order-form-footer .custom-order-cancel-btn,
.custom-order-form-footer .save-cr-btn{
  width:auto !important;
  min-width:140px !important;
  max-width:180px !important;
  height:50px !important;
  padding:0 20px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:600 !important;
}

.custom-order-form-footer .custom-order-cancel-btn{
  background:#e5e7eb !important;
  color:#111827 !important;
}

.custom-order-form-footer .save-cr-btn{
  background:linear-gradient(135deg,#4f6cf7,#3b5bdb) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(59,91,219,.2) !important;
}


/* 🔴 URGENT DOT */
.urgent-dot{
  width:10px;
  height:10px;
  background:#ef4444;
  border-radius:50%;
  display:inline-block;
  margin-right:8px;
  animation:pulseDot 1.2s infinite;
}

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

/* 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);}
}


.urgent-dot-card{
  position:absolute;
  top:12px;
  right:14px;
  width:10px;
  height:10px;
  background:#ef4444;
  border-radius:50%;
  display:none;
  z-index:20;
  box-shadow:0 0 0 4px rgba(239,68,68,.18);
  animation:pulseDot 1.2s infinite;
}

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

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


.dashboard-hero{
  background: linear-gradient(135deg,#111827,#1f2937,#2563eb);
  color:#fff;
  border-radius:24px;
  padding:28px;
  margin-bottom:22px;
  box-shadow:0 20px 50px rgba(37,99,235,.18);
}

.dashboard-kicker{
  margin:0 0 6px;
  font-size:12px;
  opacity:.8;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.dashboard-title{
  margin:0;
  font-size:30px;
  font-weight:700;
}

.dashboard-subtitle{
  margin:8px 0 0;
  font-size:14px;
  color:rgba(255,255,255,.82);
}

.dashboard-top-stats{
  margin-bottom:22px;
}

.dashboard-mini-cards{
  margin-bottom:22px;
}

.dashboard-search-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px 180px;
  gap:14px;
  margin-bottom:22px;
}

.dashboard-search-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:0 16px;
  height:52px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.dashboard-search-box i{
  color:#9ca3af;
}

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

.dashboard-search-wrap select{
  height:52px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:0 14px;
  background:#fff;
  font-size:14px;
}

.dashboard-results-wrap{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:20px;
  box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.dashboard-results-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}

.dashboard-results-head h3{
  margin:0;
  font-size:18px;
}

#dashboardResultsCount{
  font-size:13px;
  color:#6b7280;
}

.dashboard-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

.dashboard-result-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  transition:.2s;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.dashboard-result-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 35px rgba(15,23,42,.08);
}

.dashboard-result-card.pending{
  border-top:4px solid #f59e0b;
}

.dashboard-result-card.urgent{
  border-top:4px solid #ef4444;
}

.dashboard-result-card.replaced{
  border-top:4px solid #3b82f6;
}

.dashboard-result-card.completed{
  border-top:4px solid #22c55e;
}

.dashboard-result-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.dashboard-result-order{
  font-size:16px;
  font-weight:700;
  color:#111827;
}

.dashboard-result-source{
  font-size:12px;
  color:#6b7280;
  margin-top:3px;
}

.dashboard-result-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dashboard-result-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  font-size:13px;
}

.dashboard-result-row.full{
  grid-template-columns:1fr;
}

.dashboard-result-row label{
  color:#6b7280;
  font-weight:600;
}

.dashboard-of-link{
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
}

.dashboard-of-link:hover{
  text-decoration:underline;
}

.dashboard-result-actions{
  margin-top:16px;
}

.dashboard-open-tab-btn{
  width:100%;
  height:42px;
  border:none;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.dashboard-open-tab-btn:hover{
  opacity:.92;
}

.dashboard-empty-state{
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#9ca3af;
  border:1px dashed #e5e7eb;
  border-radius:18px;
}

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

@keyframes urgentDotPulse{
  0%{transform:scale(.8);opacity:.6;}
  50%{transform:scale(1.25);opacity:1;}
  100%{transform:scale(.8);opacity:.6;}
}

@media (max-width:768px){
  .dashboard-search-wrap{
    grid-template-columns:1fr;
  }

  .dashboard-title{
    font-size:24px;
  }

  .dashboard-results-grid{
    grid-template-columns:1fr;
  }

  .dashboard-result-row{
    grid-template-columns:1fr;
  }
}

/* =========================================
   DASHBOARD ONLY - PREMIUM MOBILE UI
   iPhone / Android
========================================= */

@media (max-width: 768px){

  /* DASHBOARD PAGE SPACING */
  #tab-dashboard{
    padding: 0;
  }

  /* HERO */
  .dashboard-hero{
    margin-bottom: 14px;
    padding: 20px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg,#111827,#1e3a8a,#2563eb);
    box-shadow: 0 18px 35px rgba(37,99,235,.18);
  }

  .dashboard-kicker{
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 6px;
  }

  .dashboard-title{
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
    font-weight: 800;
    color: #fff;
  }

  .dashboard-subtitle{
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.8;
    max-width: 90%;  
    color: rgba(255,255,255,.84);
  }

  /* TOP STATUS CARDS */
  .dashboard-top-stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .dashboard-top-stats .status-card{
    min-height: 96px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    border: 1px solid #e5e7eb;
  }

  .dashboard-top-stats .status-info h4{
    font-size: 11px;
    margin: 0;
    color: #6b7280;
  }

  .dashboard-top-stats .status-info p{
    font-size: 24px;
    margin-top: 6px;
    line-height: 1;
    font-weight: 800;
    color: #111827;
  }

  /* MINI CARDS */
  .dashboard-mini-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .dashboard-mini-cards .card{
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
    border: 1px solid #e5e7eb;
  }

  .dashboard-mini-cards .card h3{
    font-size: 11px;
    line-height: 1.3;
    margin-bottom: 8px;
    color: #6b7280;
  }

  .dashboard-mini-cards .card p{
    font-size: 22px;
    line-height: 1.05;
    font-weight: 800;
    margin: 0;
    color: #111827;
  }

  /* SEARCH / FILTER AREA */
  .dashboard-search-wrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .dashboard-search-box{
    height: 48px;
    border-radius: 16px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
  }

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

  .dashboard-search-box input{
    font-size: 14px;
  }

  .dashboard-search-wrap select{
    height: 46px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(15,23,42,.04);
  }

  /* RESULTS WRAP */
  .dashboard-results-wrap{
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
  }

  .dashboard-results-head{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
  }

  .dashboard-results-head h3{
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    color: #111827;
  }

  #dashboardResultsCount{
    font-size: 12px;
    color: #6b7280;
  }

  .dashboard-results-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* RESULT CARD */
  .dashboard-result-card{
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
  }

  .dashboard-result-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .dashboard-result-order{
    font-size: 15px;
    font-weight: 800;
    color: #111827;
  }

  .dashboard-result-source{
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
  }

  .dashboard-result-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dashboard-result-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 13px;
  }

  .dashboard-result-row label{
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .dashboard-result-row div{
    color: #111827;
    line-height: 1.45;
    word-break: break-word;
  }

  .dashboard-result-actions{
    margin-top: 14px;
  }

  .dashboard-open-tab-btn{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg,#111827,#1f2937);
    box-shadow: 0 10px 18px rgba(17,24,39,.16);
  }

  .dashboard-open-tab-btn:hover{
    transform: none;
  }

  /* EMPTY STATE */
  .dashboard-empty-state{
    min-height: 150px;
    border-radius: 18px;
    border: 1px dashed #d1d5db;
    background: linear-gradient(180deg,#ffffff,#f9fafb);
  }

  .dashboard-empty-state i{
    font-size: 22px;
    color: #9ca3af;
  }

  .dashboard-empty-state p{
    font-size: 13px;
    color: #6b7280;
    margin: 0;
  }

  /* OPTIONAL STATUS COLORS ON MOBILE */
  .dashboard-top-stats .status-card.pending{
    background: linear-gradient(180deg,#ffffff,#fffaf0);
  }

  .dashboard-top-stats .status-card.urgent{
    background: linear-gradient(180deg,#ffffff,#fff1f2);
  }

  .dashboard-top-stats .status-card.replaced{
    background: linear-gradient(180deg,#ffffff,#eff6ff);
  }

  .dashboard-top-stats .status-card.completed{
    background: linear-gradient(180deg,#ffffff,#f0fdf4);
  }
}

/* EXTRA SMALL PHONES */
@media (max-width: 420px){

  .dashboard-hero{
    padding: 18px 14px;
  }

  .dashboard-title{
    font-size: 20px;
  }

  .dashboard-top-stats .status-card,
  .dashboard-mini-cards .card{
    padding: 12px;
  }

  .dashboard-top-stats .status-info p,
  .dashboard-mini-cards .card p{
    font-size: 20px;
  }

  .dashboard-result-card{
    padding: 12px;
  }

  .dashboard-open-tab-btn{
    height: 42px;
    font-size: 12px;
  }
}

.dashboard-analytics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:20px;
}

.dashboard-analytic-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.analytic-label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dashboard-analytic-card strong{
  display:block;
  font-size:18px;
  color:#111827;
  line-height:1.2;
  margin-bottom:6px;
}

.dashboard-analytic-card small{
  font-size:13px;
  color:#6b7280;
}

.dashboard-info-preview{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.45;
  word-break:break-word;
}

.dashboard-info-preview.expanded{
  -webkit-line-clamp:unset;
  overflow:visible;
}

.dashboard-see-more{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:#2563eb;
  cursor:pointer;
}

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

@media (max-width:768px){
  .dashboard-analytics-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
  }

  .dashboard-analytic-card{
    padding:14px;
    border-radius:18px;
  }

  .dashboard-analytic-card strong{
    font-size:16px;
  }

  .dashboard-analytic-card small{
    font-size:12px;
  }
}

@media (max-width:420px){
  .dashboard-analytics-grid{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-analytic-card{
    padding:12px;
  }

  .dashboard-analytic-card strong{
    font-size:15px;
  }
}


.dashboard-analytics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:14px 0 18px;
}

.dashboard-analytic-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:none;
}

.analytic-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#6b7280;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dashboard-analytic-card strong{
  display:block;
  font-size:16px;
  line-height:1.2;
  color:#111827;
  margin-bottom:4px;
}

.dashboard-analytic-card small{
  font-size:12px;
  color:#6b7280;
}

@media (max-width:1100px){
  .dashboard-analytics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px){
  .dashboard-analytics-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:12px 0 16px;
  }

  .dashboard-analytic-card{
    padding:12px 14px;
    border-radius:14px;
  }

  .dashboard-analytic-card strong{
    font-size:15px;
  }
}

.dashboard-search-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px 180px;
  gap:12px;
  margin-bottom:18px;
  align-items:center;
}

.dashboard-search-box{
  display:flex;
  align-items:center;
  gap:10px;
  height:54px;
  padding:0 16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:none;
}

.dashboard-search-wrap select{
  height:54px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:0 14px;
  background:#fff;
}

@media (max-width:768px){
  .dashboard-search-wrap{
    grid-template-columns:1fr;
  }

  .dashboard-search-box,
  .dashboard-search-wrap select{
    height:48px;
    border-radius:14px;
  }
}

.dashboard-hero{
  padding:22px 28px;
  border-radius:28px;
  margin-bottom:18px;
}

.dashboard-kicker{
  font-size:11px;
  margin-bottom:6px;
}

.dashboard-title{
  font-size:26px;
  margin:0;
}

.dashboard-subtitle{
  font-size:13px;
  margin-top:8px;
  max-width:760px;
  color:rgba(255,255,255,.84);
}

@media (max-width:768px){
  .dashboard-hero{
    padding:18px 16px;
    border-radius:22px;
    margin-bottom:14px;
  }

  .dashboard-title{
    font-size:22px;
  }

  .dashboard-subtitle{
    font-size:12px;
    line-height:1.4;
  }
}

.dashboard-results-wrap{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:18px;
}

.dashboard-results-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.dashboard-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
}

.dashboard-result-card{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  box-shadow:none;
}

@media (max-width:768px){
  .dashboard-results-wrap{
    padding:14px;
    border-radius:18px;
  }

  .dashboard-result-card{
    padding:14px;
    border-radius:14px;
  }
}

.dashboard-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.dashboard-page-btn{
  min-width:38px;
  height:38px;
  padding:0 12px;
  border:none;
  border-radius:10px;
  background:#f3f4f6;
  color:#111827;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.dashboard-page-btn:hover{
  background:#e5e7eb;
}

.dashboard-page-btn.active{
  background:#2563eb;
  color:#fff;
}

.dashboard-page-btn.more-btn{
  padding:0 14px;
}

.dashboard-more-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
}

.dashboard-more-box{
  background:#fff;
  width:100%;
  max-width:380px;
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.dashboard-more-box h3{
  margin:0 0 14px;
  font-size:18px;
}

.dashboard-more-pages{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.dashboard-close-more-btn{
  width:100%;
  height:42px;
  border:none;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  margin-top:8px;
}

@media (max-width:768px){
  .dashboard-pagination{
    justify-content:flex-start;
  }

  .dashboard-page-btn{
    min-width:36px;
    height:36px;
    font-size:12px;
  }
}

@media (max-width: 768px){

  .dashboard-results-wrap{
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .dashboard-results-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-result-card{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .dashboard-result-top{
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .dashboard-result-body{
    gap: 10px !important;
  }

  .dashboard-result-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .dashboard-result-row label{
    font-size: 11px !important;
    margin-bottom: 0 !important;
  }

  .dashboard-result-row div,
  .dashboard-result-row a{
    font-size: 13px !important;
    word-break: break-word !important;
  }

  .dashboard-result-order{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .dashboard-result-source{
    font-size: 11px !important;
  }

  .dashboard-open-tab-btn{
    width: 100% !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .status{
    white-space: nowrap !important;
  }
}


@media (max-width: 768px){
  .dashboard-result-card{
    padding: 12px !important;
  }

  .dashboard-result-top{
    margin-bottom: 10px !important;
  }

  .dashboard-result-body{
    gap: 8px !important;
  }

  .status{
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

@media (max-width: 768px){

  .dashboard-results-head{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    text-align: left !important;       
    gap: 4px;
  }

  .dashboard-results-head h3{
    text-align: left !important;
    width: 100%;
  }

  #dashboardResultsCount{
    text-align: left !important;
    width: 100%;
  }

}

@media (max-width: 768px){

  #tab-dashboard .dashboard-results-head{
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
    text-align:left !important;
    flex-wrap:nowrap !important;
  }

  #tab-dashboard .dashboard-results-head h3{
    margin:0 !important;
    width:auto !important;
    text-align:left !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    font-size:16px !important;
  }

  #tab-dashboard #dashboardResultsCount{
    width:auto !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-size:12px !important;
    color:#6b7280 !important;
    flex:0 0 auto !important;
  }

}

@media (max-width: 420px){

  #tab-dashboard .dashboard-results-head h3{
    font-size:15px !important;
  }

  #tab-dashboard #dashboardResultsCount{
    font-size:11px !important;
  }

}

@media (max-width: 768px){

  #tab-dashboard .dashboard-pagination{
    display:flex !important;
    justify-content:center !important;  /* 👈 CENTER */
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    width:100% !important;
    margin-top:16px !important;
  }

  #tab-dashboard .dashboard-page-btn{
    min-width:40px;
    height:40px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
  }

}

.dashboard-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  margin-top:18px;
}

.dashboard-page-btn{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:none;
  border-radius:12px;
  background:#f3f4f6;
  color:#111827;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}

.dashboard-page-btn:hover{
  background:#e5e7eb;
}

.dashboard-page-btn.active{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.3);
}

.dashboard-page-btn.nav-btn{
  min-width:44px;
  font-size:16px;
}

.dashboard-page-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

@media (max-width:768px){
  #tab-dashboard .dashboard-pagination{
    justify-content:center !important;
    gap:8px !important;
  }

  #tab-dashboard .dashboard-page-btn{
    min-width:38px !important;
    height:38px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  #tab-dashboard .dashboard-page-btn.nav-btn{
    min-width:42px !important;
    font-size:15px !important;
  }
}


/* =========================================
   CLEAN TABLE TYPOGRAPHY
   ALL TABS EXCEPT DASHBOARD
========================================= */

/* TABLE WRAPPER */
.table-section{
  border-radius:22px;
}

/* TABLE HEADERS */
.table-wrapper thead th,
#customOrdersTable th,
#cockRateTable th,
#snapTable th,
#sextTable th,
#callTable th,
#voiceNoteTable th{
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:18px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}

/* TABLE BODY CELLS */
.table-wrapper tbody td,
#customOrdersTable td,
#cockRateTable td,
#snapTable td,
#sextTable td,
#callTable td,
#voiceNoteTable td{
  font-size:14px;
  font-weight:500;
  color:#111827;
  padding:18px 16px;
  vertical-align:middle;
  border-bottom:1px solid #eef2f7;
}

/* ORDER NUMBER STYLE */
#customOrdersTable td strong,
#cockRateTable td strong,
#snapTable td strong,
#sextTable td strong,
#callTable td strong,
#voiceNoteTable td strong{
  font-size:14px;
  font-weight:700;
  color:#374151;
  letter-spacing:.01em;
}

/* LINKS */
.of-profile-btn,
.cock-profile-btn{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

/* ACCOUNT BADGES */
.account-badge{
  font-size:10px;
  font-weight:700;
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}

/* STATUS BADGES GLOBAL */
.status,
.snap-status-badge,
.voice-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}

/* DESCRIPTION / LONG TEXT */
.voice-desc,
.cell-preview{
  font-size:13px;
  line-height:1.5;
  color:#374151;
}

/* ROW HOVER */
#customOrdersTable tr:hover,
#cockRateTable tr:hover,
#snapTable tr:hover,
#sextTable tr:hover,
#callTable tr:hover,
#voiceNoteTable tr:hover{
  background:#fafafa;
  transition:.2s ease;
}


.request-clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.request-clamp.expanded{
  -webkit-line-clamp:unset;
}

.see-more-btn{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:#2563eb;
  cursor:pointer;
}

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

/* =========================
   GLOBAL NAME STYLE FIX
========================= */

.snap-name-text,
.sext-username,
.cock-mobile-name,
.order-name,
.voice-name{
  color: #111827; /* clean black */
  font-weight: 600;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* para hindi gumalaw badge */
  display: inline-block;
}


/* =========================
   CUSTOM ORDER MOBILE NAME FIX
========================= */

#customOrdersMobileList .cock-snap-top{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
}

#customOrdersMobileList .snap-name-text{
  color:#111827;
  font-weight:600;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:12ch;
  flex:0 0 auto;
}

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

#cockMobileList .snap-name-text{
  color:#111827;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:12ch;
  line-height:1.2;
}