/* ===== CASHIER STYLES - برجر كينج ===== */
/* Fully responsive - adapts to desktop, tablet, and mobile */
:root{--primary:#DA291C;--primary-dark:#B71C1C;--accent:#FF8C00;--accent-light:#FFC72C;--bg:#0f0f1a;--bg-card:#1a1a2e;--bg-card-hover:#222240;--text:#e0e0e0;--text-light:#9e9e9e;--text-muted:#6b6b80;--border:#2a2a45;--success:#4CAF50;--info:#00A6ED;--font:'Tajawal',sans-serif;--radius:16px;--radius-sm:10px;--radius-full:50px;--shadow:0 4px 20px rgba(0,0,0,0.3)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;direction:rtl;overflow-anchor:none}
a{text-decoration:none;color:inherit}

.cashier-container{height:100vh;display:flex;flex-direction:column}
.cashier-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;gap:12px;flex-wrap:wrap}
.cashier-header-left{display:flex;align-items:center;gap:12px}
.cashier-back{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:50%;color:var(--text-light)}
.cashier-header-left h1{font-size:clamp(0.9rem,2vw,1.1rem);font-weight:800}
.cashier-title-light{font-weight:400;color:var(--text-light);font-size:clamp(0.7rem,1.5vw,0.9rem)}
.cashier-header-center .cashier-time{font-size:clamp(0.9rem,2.5vw,1.2rem);font-weight:700;color:var(--accent);font-family:monospace}
.cashier-header-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cashier-header-right select{padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:clamp(0.7rem,1.5vw,0.85rem);max-width:120px}
.cashier-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;border-radius:var(--radius-sm);font-family:var(--font);font-weight:700;font-size:clamp(0.7rem,1.5vw,0.85rem);cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text);white-space:nowrap}
.cashier-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.cashier-btn-danger{background:rgba(218,41,28,0.15);color:var(--primary);border-color:rgba(218,41,28,0.3)}
.cashier-btn-outline{background:transparent;color:var(--text-light);border-color:var(--border)}

.cashier-content{flex:1;display:flex;overflow:hidden}
.cashier-sidebar-backdrop{display:none}
.cashier-sidebar{width:clamp(200px,18vw,240px);flex-shrink:0;background:var(--bg-card);border-left:1px solid var(--border);padding:clamp(10px,1.5vw,16px);display:flex;flex-direction:column;gap:clamp(8px,1.2vw,16px);overflow-y:auto}
.cashier-sidebar-header h3{font-size:clamp(0.8rem,1.5vw,1rem);font-weight:700}
.cashier-sidebar-header h3 i{color:var(--accent)}
.cashier-stats{display:flex;gap:clamp(6px,1vw,10px);flex-wrap:wrap}
.cashier-stat{flex:1;text-align:center;padding:clamp(8px,1vw,12px) clamp(6px,1vw,8px);background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--border);min-width:60px}
.cashier-stat-label{display:block;font-size:clamp(0.6rem,1.2vw,0.75rem);color:var(--text-light)}
.cashier-stat-value{display:block;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:800}
.cashier-divider{border:none;border-top:1px solid var(--border)}
.cashier-sidebar-section label{display:block;font-size:clamp(0.7rem,1.2vw,0.8rem);color:var(--text-light);margin-bottom:6px}
.cashier-sidebar-section select{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:clamp(0.7rem,1.2vw,0.85rem)}
.cashier-sidebar-actions{display:flex;flex-direction:column;gap:6px}
.cashier-sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--border)}

.cashier-main{flex:1;overflow-y:auto;padding:clamp(8px,1.5vw,16px)}
.cashier-loading,.cashier-empty{text-align:center;padding:clamp(30px,5vw,60px) 20px;color:var(--text-muted)}
.cashier-loading i,.cashier-empty i{font-size:clamp(1.5rem,4vw,2.5rem);display:block;margin-bottom:12px;color:var(--border)}
.cashier-empty p{font-size:clamp(0.9rem,2vw,1.1rem);color:var(--text-light)}
.cashier-empty span{font-size:clamp(0.7rem,1.5vw,0.85rem)}

.cashier-orders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:clamp(8px,1.2vw,14px);contain:content}
.cashier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:120px}
.cashier-card.cashier-card-active{border-color:var(--accent)}
.cashier-card.cashier-card-done{opacity:0.6}
.cashier-card-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(8px,1.2vw,12px) clamp(10px,1.5vw,16px);background:var(--bg-card-hover);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:4px}
.cashier-card-header .cashier-card-id{font-size:clamp(0.65rem,1.2vw,0.8rem);color:var(--text-muted);font-family:monospace;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cashier-card-header .cashier-card-time{font-size:clamp(0.7rem,1.2vw,0.85rem);color:var(--accent);font-weight:700}
.cashier-card-items{padding:clamp(8px,1.2vw,12px) clamp(10px,1.5vw,16px)}
.cashier-card-item{display:flex;align-items:center;gap:clamp(6px,1vw,10px);padding:clamp(4px,0.6vw,6px) 0;border-bottom:1px solid var(--border);font-size:clamp(0.7rem,1.3vw,0.85rem)}
.cashier-card-item:last-child{border-bottom:none}
.cashier-card-item img{width:clamp(28px,3vw,36px);height:clamp(28px,3vw,36px);border-radius:6px;object-fit:cover;background:var(--bg)}
.cashier-card-item .cashier-item-name{flex:1;font-weight:700;font-size:clamp(0.7rem,1.2vw,0.85rem)}
.cashier-card-item .cashier-item-qty{color:var(--text-light);font-size:clamp(0.65rem,1.1vw,0.8rem)}
.cashier-card-item .cashier-item-total{color:var(--accent);font-weight:700;font-size:clamp(0.7rem,1.2vw,0.85rem);white-space:nowrap}
.cashier-card-footer{display:flex;align-items:center;justify-content:space-between;padding:clamp(8px,1.2vw,12px) clamp(10px,1.5vw,16px);border-top:1px solid var(--border);background:var(--bg-card-hover);flex-wrap:wrap;gap:6px}
.cashier-card-total{font-weight:800;font-size:clamp(0.9rem,1.8vw,1.1rem);color:var(--accent)}
.cashier-card-actions{display:flex;gap:4px;flex-wrap:wrap}
.cashier-card-actions button{padding:clamp(4px,0.8vw,6px) clamp(8px,1.2vw,14px);border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:clamp(0.65rem,1.2vw,0.8rem);font-weight:700;cursor:pointer}
.cashier-complete-btn{background:var(--success);color:#fff}
.cashier-delete-btn{background:rgba(218,41,28,0.15);color:var(--primary)}
.cashier-btn-edit{background:rgba(255,140,0,0.15);color:var(--accent)}
.cashier-status-badge{padding:clamp(2px,0.5vw,4px) clamp(6px,1vw,10px);border-radius:var(--radius-full);font-size:clamp(0.55rem,1vw,0.7rem);font-weight:700;white-space:nowrap}
.status-new{background:rgba(0,166,237,0.15);color:var(--info)}
.status-active{background:rgba(255,140,0,0.15);color:var(--accent)}
.status-done{background:rgba(76,175,80,0.15);color:var(--success)}
.cashier-done-badge{background:var(--success);color:#fff;padding:clamp(2px,0.5vw,4px) clamp(6px,1vw,10px);border-radius:var(--radius-full);font-size:clamp(0.55rem,1vw,0.7rem);font-weight:700}

/* Tablet: 768px - 1024px */
@media(max-width:1024px){
    .cashier-sidebar{width:200px}
    .cashier-orders-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
}

/* Small tablet / Large phone: 480px - 768px */
@media(max-width:768px){
    .cashier-sidebar{position:fixed;top:0;right:-280px;width:280px;height:100vh;z-index:100}
    .cashier-sidebar.open{right:0}
    .cashier-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99}
    .cashier-sidebar-backdrop.active{display:block}
    .cashier-orders-grid{grid-template-columns:1fr}
    .cashier-header{padding:8px 12px}
    .cashier-header-left h1{font-size:0.85rem}
    .cashier-card-header{flex-direction:column;align-items:flex-start}
    .cashier-card-footer{flex-direction:column;align-items:stretch}
    .cashier-card-actions{justify-content:stretch}
    .cashier-card-actions button{flex:1;text-align:center}
}

/* Phone: <480px */
@media(max-width:480px){
    .cashier-header{padding:6px 8px;gap:6px}
    .cashier-header-left{gap:6px}
    .cashier-header-right{gap:4px}
    .cashier-header-right select{max-width:80px;padding:4px 6px;font-size:0.7rem}
    .cashier-btn{padding:4px 6px;font-size:0.65rem}
    .cashier-main{padding:4px}
    .cashier-card{border-radius:12px;min-height:100px}
    .cashier-orders-grid{gap:6px}
    .cashier-stat{padding:6px 4px}
    .cashier-stat-value{font-size:1.1rem}
    .cashier-card-item img{width:24px;height:24px}
    .cashier-card-total{font-size:0.85rem}
    .cashier-card-actions button{padding:6px 8px;font-size:0.7rem}
}

/* Desktop detection - larger screens get more columns */
@media(min-width:1400px){
    .cashier-orders-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}
}

@media(min-width:1800px){
    .cashier-orders-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
}