/* =========================
COCK RATE PREMIUM TOOLBAR
========================= */

.cr-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:6px;
background:transparent;
border:none;
box-shadow:none;
}

/* LEFT */

.cr-toolbar-left{
display:flex;
align-items:center;
gap:10px;
width:100%;
}

/* =========================
PREMIUM SEARCH BAR
========================= */

.cock-search{
position:relative;
display:flex;
align-items:center;
height:42px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
padding:0 14px;
flex:1;
min-width:0;
}

/* ICON */

.search-icon{
font-size:14px;
color:#9ca3af;
margin-right:3px;
}

/* INPUT */

.cock-search input{
border:none;
outline:none;
background:transparent;
font-size:14px;
flex:1;
min-width:0;
}

/* FOCUS EFFECT */

.cock-search:focus-within{
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.12),0 4px 14px rgba(0,0,0,.05);}

/* CLEAR BUTTON */


/* HOVER */

.search-clear:hover{
color:#ef4444;
}



/* MOBILE */

@media (max-width:768px){

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

.cr-toolbar-left{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
width:100%;
}

.cr-toolbar-right{
display:grid;
grid-template-columns:1fr 1fr;
}

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

}

.cr-toolbar select,
.cock-search{
height:38px;
}


/* =========================
COCK RATE SAVE BUTTON
========================= */

.save-cr-btn{
width:100%;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
border:none;
padding:14px;
border-radius:12px;
font-size:14px;
font-weight:600;
cursor:pointer;
letter-spacing:.3px;
transition:all .2s ease;
box-shadow:0 8px 20px rgba(37,99,235,.35);
display:flex;
align-items:center;
justify-content:center;
}

.save-cr-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(37,99,235,.45);
}

.save-cr-btn:active{
transform:scale(.97);
}

.save-cr-btn:disabled{
opacity:.6;
cursor:not-allowed;
box-shadow:none;
}



.modal-header{
background:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border-bottom:1px solid #e5e7eb;
z-index:20;
}


.modal{
position:fixed;
display:flex;
align-items:center;
justify-content:center;
}

.modal-content{
position:relative;
max-height:90vh;
overflow-y:auto;
scroll-behavior:smooth;
}

.modal-buttons{
position:sticky;
bottom:0;
background:#fff;
display:flex;
gap:12px;
padding-top:16px;
margin-top:24px;
border-top:1px solid #f1f5f9;
}

.modal-buttons button{
flex:1;
}

.cr-modal-top{

top:0;
display:flex;
align-items:center;
background:#fff;
padding:16px 20px 6px 20px;
border-bottom:1px solid #f1f5f9;
z-index:10;
}



.cancel-cr-btn{
width:100%;
background:linear-gradient(135deg,#9ca3af,#6b7280);
color:#1f2937;
border:none;
padding:14px;
border-radius:12px;
font-size:14px;
font-weight:600;
cursor:pointer;
letter-spacing:.3px;
display:flex;
align-items:center;
justify-content:center;
transition:all .2s ease;
box-shadow:0 8px 20px rgba(107,114,128,.35);
}

.cancel-cr-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(107,114,128,.45);
}

.cancel-cr-btn:active{
transform:scale(.97);
}

.cr-section{
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:14px;
padding:16px;
margin-bottom:16px;
margin-top:16px;

}

.premium-cr-form .cr-section:first-of-type{
margin-top:6px;
}

.cr-modal-top + .cr-section{
margin-top:8px;
}

/* FILTER BUTTON */

.cock-filter-btn{

width:42px;
height:42px;

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

border-radius:50%;
border:1px solid #e5e7eb;

background:#fff;

cursor:pointer;

box-shadow:0 2px 6px rgba(0,0,0,.08);

}

.cock-filter-btn:hover{
background:#f3f4f6;
}

/* HIDDEN DROPDOWN */

.hidden-filter{
display:none;
}

.show-filter{
display:block;
margin-top:8px;
width:100%;
}


/* =========================
FORCE MOBILE TOOLBAR LAYOUT
========================= */

@media (max-width:768px){

.cr-toolbar{
display:flex;
flex-direction:column;
gap:10px;
}

/* SEARCH + FILTER */

.cr-toolbar-left{
display:flex;
gap:10px;
width:100%;
}

/* SEARCH */

.cock-search{
flex:1;
}

/* FILTER */

.cock-filter-btn{
width:42px;
height:42px;
flex-shrink:0;
}

/* BUTTON ROW */

.cr-toolbar-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

}
/* FILTER BOTTOM SHEET */

.filter-header{
font-weight:600;
font-size:16px;
margin-bottom:12px;

}

.filter-item{
padding:14px;
border-radius:10px;
font-size:15px;
cursor:pointer;

}

.filter-item:hover{
background:#f3f4f6;
}

@keyframes slideUp{

from{
transform:translateY(100%);
}

to{
transform:translateY(0);
}

}

/* OVERLAY BLUR */

.filter-overlay{
backdrop-filter: blur(10px);
background: rgba(0,0,0,.25);
}

/* SHEET */

.filter-sheet{

position:fixed;
bottom:0;
left:0;
right:0;

background:rgba(255,255,255,.9);
backdrop-filter: blur(20px);
border-radius:22px 22px 0 0;
padding:20px;
animation:sheetUp .28s cubic-bezier(.22,1,.36,1);
}

/* HANDLE */

.filter-handle{

width:40px;
height:5px;
background:#d1d5db;
border-radius:10px;
margin:0 auto 14px auto;

}

/* HEADER */

.filter-header{
font-weight:600;
font-size:16px;
margin-bottom:12px;

}

/* ITEMS */

.filter-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
border-radius:12px;
font-size:15px;
cursor:pointer;
transition:.15s;

}

.filter-item:hover{
background:#f3f4f6;
}

.filter-item.active{
font-weight:600;
}

/* ANIMATION */

@keyframes sheetUp{

from{
transform:translateY(100%);
}

to{
transform:translateY(0);
}

}

/* FLOATING FILTER BUTTON */
@media (max-width:768px){
.cock-filter-fab{
position:fixed;
bottom:90px;
right:20px;
width:52px;
height:52px;
border-radius:50%;
background:#2563eb;
color:white;
display:flex;
align-items:center;
justify-content:center;
border:none;
font-size:18px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:5000;
cursor:pointer;
transition:.2s;

}

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

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


/* =========================
FLOATING FILTER BUTTON
========================= */

.cock-filter-fab{
position:fixed;
bottom:20px;
right:20px;
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563eb;
color:#fff;
border:none;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:9999;
cursor:pointer;
transition:all .2s ease;
}

/* hover */

.cock-filter-fab:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* click */

.cock-filter-fab:active{
transform:scale(.96);
}
}

@media (max-width:768px){

/* STAT BAR */

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

/* STAT CARD */

.cr-stat-card{
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:8px 4px;
border-radius:12px;
background:white;
border:1px solid #e5e7eb;
text-align:center;
}

/* TAP EFFECT */

.cr-stat-card:active{
transform:scale(.96);
}

/* LABEL */

.cr-stat-card h4{
margin:0;
font-size:11px;
font-weight:600;
color:#6b7280;
}

/* VALUE */

.cr-stat-card p{
margin:2px 0 0 0;
font-size:18px;
font-weight:700;
}

/* COLORS */

.cr-stat-card.pending p{color:#64748b;}
.cr-stat-card.urgent p{color:#dc2626;}
.cr-stat-card.replaced p{color:#2563eb;}
.cr-stat-card.completed p{color:#16a34a;}

}

/* MOBILEEEE */ 

@media (max-width:768px){

/* SEARCH */

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

/* FILTER */

.cock-status-filter{
height:38px;
border-radius:10px;
border:1px solid #e5e7eb;
padding:0 12px;
background:white;
font-size:14px;
}

/* RIGHT TOOLBAR */

.cr-toolbar-right{
display:flex;
width:100%;
gap:10px;
}

/* MAKE BUTTONS SAME WIDTH */

.cr-toolbar-right button{
flex:1;
}

/* EXPORT BUTTON */

.export-btn{
height:38px;
border-radius:10px;
border:1px solid #16a34a;
background:#16a34a;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:14px;
font-weight:500;
color:white;
transition:.15s ease;
}

/* EXPORT ICON */

.export-btn i{
font-size:14px;
}

/* EXPORT HOVER */

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

/* EXPORT TAP */

.export-btn:active{
transform:scale(.96);
}

/* ADD BUTTON */

.primary-btn{
height:38px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:14px;
font-weight:500;
}

}

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

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

.cock-search{
flex:1;
width:100%;
max-width:100%;
}

.cock-status-filter{
height:38px;
border-radius:10px;
border:1px solid #e5e7eb;
padding:0 12px;
background:white;
font-size:14px;
}

.cr-toolbar-right{
display:flex;
gap:10px;
}


/* =========================
   VMS PREMIUM TOOLBAR
========================= */

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

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

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

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

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

.vms-filter{
height:38px;
border-radius:10px;
border:1px solid #e5e7eb;
padding:0 12px;
font-size:14px;
background:white;
cursor:pointer;
}

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

/* BUTTONS */

.vms-btn{
display:flex;
align-items:center;
gap:6px;
height:38px;
padding:0 14px;
border-radius:10px;
font-size:14px;
cursor:pointer;
border:1px solid #e5e7eb;
background:white;
transition:.15s;
}

.vms-btn:hover{
background:#f9fafb;
}

.vms-btn.primary{
background:#111827;
color:white;
border:none;
}

.vms-btn.primary:hover{
background:#000;
}

.vms-btn.ghost{
background:white;
}

@media (max-width:768px){

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

.vms-toolbar-left{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
width:100%;
}

.vms-search{
flex:1;
width:100%;
max-width:100%;
}

.vms-toolbar-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
width:100%;
}

}



@media (max-width:768px){

#cockStatusFilter{
display:none;
}

}

/* TOOLBAR BUTTON FIX */

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

.cr-toolbar-right button{
height:38px;
display:flex;
align-items:center;
gap:6px;
padding:0 14px;
border-radius:10px;
font-size:14px;
}

.export-btn{
background:#16a34a;
color:white;
border:none;
}

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

/* =========================
   COMPLETE BUTTON
========================= */

.cr-complete-wrapper{
position:sticky;
bottom:0;
padding-top:14px;
margin-top:16px;
background:linear-gradient(
to top,
#ffffff 70%,
rgba(255,255,255,0)
);
}

.cr-complete-btn{
width:100%;
height:46px;

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

background:#16a34a;
color:white;

border:none;
border-radius:12px;

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

cursor:pointer;
transition:.15s;
}

.cr-complete-btn:hover{
background:#15803d;
}

/* =========================
VMS TOOLBAR BUTTON FIX
========================= */

.vms-toolbar-right{
display:flex;
gap:10px;
}

/* BOTH BUTTONS */

.vms-toolbar-right .vms-btn{
height:38px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:0 14px;
border-radius:10px;
font-size:14px;
border:none;
cursor:pointer;
}

/* EXPORT */

.vms-toolbar-right .export-btn{
background:#16a34a;
color:white;
}

.vms-toolbar-right .export-btn:hover{
background:#15803d;
}

/* ADD COCK RATE */

.vms-toolbar-right .primary{
background:#2563eb;
color:white;
}

.vms-toolbar-right .primary:hover{
background:#1d4ed8;
}


/* =========================
MOBILE FIX
========================= */

@media (max-width:768px){

.vms-toolbar-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
width:100%;
}

.vms-toolbar-right .vms-btn{
width:100%;
}

}

.notif-badge{
background:#ef4444;
color:white;
font-size:11px;
font-weight:600;
padding:2px 6px;
border-radius:20px;
margin-left:6px;
display:none;

}

html, body{
width:100%;
overflow-x:hidden;
}

*{
min-width:0;
}
.cock-search{
overflow:hidden;
}


/* ANDROID SEARCH FIX */

@media (max-width:768px){

.vms-search{
display:flex;
align-items:center;
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
padding:0 14px;
height:42px;
width:100%;
}

.vms-search input{
flex:1;
border:none;
outline:none;
background:transparent;
min-width:0;
}

}

/* SINGLE BUTTON FIX */

.vms-toolbar-right:has(.vms-btn:only-child){
display:flex;
justify-content:center;
}

.vms-toolbar-right .vms-btn:only-child{
width:auto;
min-width:180px;
}