/* UmuTea Counter / Cashier Dashboard — umutea-counter.css */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --cc-bg:      #0d1a2e;
  --cc-surface: #162236;
  --cc-surface2:#1c2d45;
  --cc-border:  #2a4060;
  --cc-green:   #1B4332;
  --cc-gl:      #2D6A4F;
  --cc-amber:   #E07830;
  --cc-blue:    #1565C0;
  --cc-text:    #e8f0fe;
  --cc-muted:   #8aabcc;
  --cc-gold:    #f5c842;
  --cc-red:     #ef5350;
  --cc-radius:  12px;
}

#umutea-counter-app,#umutea-counter-app *{box-sizing:border-box}
#umutea-counter-app{font-family:'DM Sans',sans-serif;background:var(--cc-bg);color:var(--cc-text);min-height:100vh}
#umutea-counter-app button{cursor:pointer;border:none;font-family:inherit;transition:opacity .15s,transform .1s}
#umutea-counter-app button:active{transform:scale(.96)}
#umutea-counter-app input,#umutea-counter-app select{font-family:inherit}
#umutea-counter-app ::-webkit-scrollbar{width:4px}
#umutea-counter-app ::-webkit-scrollbar-thumb{background:#2a4060;border-radius:2px}

@keyframes cc-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cc-cash{0%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.cc-fade{animation:cc-fade .35s ease both}
.cc-cash{animation:cc-cash .4s ease}

/* ── Login ──────────────────────────────────────────────────────────────── */
.cc-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.cc-login-card{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:20px;padding:32px 28px;width:100%;max-width:340px;text-align:center}
.cc-login-logo{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:#c8e6c9;margin-bottom:4px}
.cc-login-sub{color:var(--cc-muted);font-size:13px;margin-bottom:24px}
.cc-pin{width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--cc-border);background:var(--cc-bg);color:var(--cc-text);font-size:22px;text-align:center;letter-spacing:8px;margin-bottom:14px}
.cc-pin:focus{outline:2px solid var(--cc-gl)}
.cc-login-btn{width:100%;padding:13px;border-radius:10px;background:var(--cc-blue);color:white;font-size:15px;font-weight:700}
.cc-login-err{color:#ef9a9a;font-size:13px;margin:8px 0;display:none}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cc-header{background:var(--cc-blue);padding:13px 18px;display:flex;align-items:center;justify-content:space-between}
.cc-header-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700}
.cc-header-sub{font-size:11px;opacity:.7}
.cc-logout-btn{background:rgba(255,255,255,.18);color:white;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 12px;font-size:12px}

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.cc-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#0a1525;border-bottom:1px solid var(--cc-border)}
.cc-stat{padding:12px 6px;text-align:center;border-right:1px solid var(--cc-border)}
.cc-stat:last-child{border-right:none}
.cc-stat-val{font-size:22px;font-weight:700;line-height:1}
.cc-stat-lbl{font-size:10px;color:var(--cc-muted);margin-top:3px}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.cc-tabs{display:flex;background:#0a1525;border-bottom:1px solid var(--cc-border);overflow-x:auto;scrollbar-width:none}
.cc-tabs::-webkit-scrollbar{display:none}
.cc-tab{flex-shrink:0;padding:11px 18px;background:none;color:var(--cc-muted);border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:400;cursor:pointer;text-transform:capitalize;transition:color .15s}
.cc-tab.active{color:var(--cc-gold);border-bottom-color:var(--cc-gold);font-weight:700}
.cc-tab-badge{background:#FF3D00;color:white;border-radius:8px;padding:1px 5px;font-size:9px;margin-left:5px}

/* ── Orders list ────────────────────────────────────────────────────────── */
.cc-orders{padding:14px;display:flex;flex-direction:column;gap:12px}
.cc-card{background:var(--cc-surface);border-radius:var(--cc-radius);padding:16px;border:1px solid var(--cc-border)}
.cc-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.cc-card-id{font-weight:700;font-size:16px;letter-spacing:.5px}
.cc-card-time{font-size:12px;color:var(--cc-muted);margin-top:2px}
.cc-card-type{display:inline-block;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:600;margin-top:6px}
.cc-type-dine{background:#1B4332;color:#a5d6a7}
.cc-type-delivery{background:#1a1a4a;color:#b0b0ff}
.cc-type-takeaway{background:#2d1a08;color:#ffcc80}
.cc-status{padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700}
.cs-ready{background:#E3F2FD;color:#0D47A1}
.cs-paid{background:#E8F5E9;color:#1B5E20}
.cs-pending{background:#FFF3E0;color:#E65100}
.cs-accepted{background:#EDE7F6;color:#4527A0}
.cc-total{color:var(--cc-gold);font-weight:700;font-size:20px;margin-top:6px;text-align:right}

/* ── Items breakdown ────────────────────────────────────────────────────── */
.cc-items{background:#0a1525;border-radius:8px;padding:10px 12px;margin-bottom:10px}
.cc-item-line{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px solid var(--cc-border);color:#b0c4de}
.cc-item-line:last-child{border:none}
.cc-item-price{color:var(--cc-muted)}

/* ── Customer info ──────────────────────────────────────────────────────── */
.cc-info{border-radius:7px;padding:7px 10px;font-size:12px;margin-bottom:9px}
.cc-info-delivery{background:#0a0a2d;color:#b0b0ff}
.cc-info-takeaway{background:#2d1a08;color:#ffcc80}
.cc-info-notes{background:#1a2d0a;color:#b0d48a}

/* ── Payment section ────────────────────────────────────────────────────── */
.cc-pay-section{background:var(--cc-surface2);border-radius:10px;padding:14px;border:1px solid var(--cc-border)}
.cc-pay-label{font-size:12px;font-weight:600;color:var(--cc-muted);margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}
.cc-pay-methods{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cc-pay-btn{flex:1;min-width:80px;padding:10px 8px;border-radius:9px;font-size:13px;font-weight:600;background:var(--cc-surface);color:var(--cc-text);border:2px solid var(--cc-border);transition:all .15s}
.cc-pay-btn.selected{background:var(--cc-blue);color:white;border-color:var(--cc-blue)}
.cc-pay-btn:hover{border-color:var(--cc-gold)}
.cc-confirm-pay-btn{width:100%;padding:14px;border-radius:10px;background:var(--cc-gl);color:white;font-size:15px;font-weight:700;letter-spacing:.3px}
.cc-confirm-pay-btn:hover{background:#1B4332}
.cc-confirm-pay-btn:disabled{background:#2d4a38;color:#4a7a5a;cursor:not-allowed}

/* ── Paid badge ─────────────────────────────────────────────────────────── */
.cc-paid-badge{background:#E8F5E9;color:#1B5E20;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;text-align:center}

/* ── Summary / history tab ──────────────────────────────────────────────── */
.cc-summary-card{background:var(--cc-surface);border-radius:var(--cc-radius);padding:16px;border:1px solid var(--cc-border);margin-bottom:12px}
.cc-summary-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--cc-border);font-size:14px}
.cc-summary-row:last-child{border:none;font-weight:700;font-size:16px;color:var(--cc-gold)}
.cc-method-tag{background:var(--cc-surface2);color:var(--cc-muted);padding:2px 8px;border-radius:6px;font-size:11px;margin-left:8px}

/* ── Empty state ────────────────────────────────────────────────────────── */
.cc-empty{text-align:center;padding:50px 20px;color:#2a4060}
.cc-empty-icon{font-size:52px;margin-bottom:14px}