/* UmuTea Kitchen Dashboard — umutea-kitchen.css */

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

:root {
  --k-bg:       #0f1d13;
  --k-surface:  #182d1e;
  --k-surface2: #1e3d28;
  --k-border:   #2d5a3d;
  --k-green:    #1B4332;
  --k-green-l:  #2D6A4F;
  --k-amber:    #E07830;
  --k-text:     #e8f5e9;
  --k-muted:    #8aab9a;
  --k-red:      #FF5722;
  --k-radius:   12px;
}

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

@keyframes k-fade-up  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes k-bell     { 0%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-12deg)} 30%{transform:rotate(9deg)} 40%{transform:rotate(-7deg)} 50%{transform:rotate(0)} }
@keyframes k-pulse    { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes k-shimmer  { 0%{background-position:200% center} 100%{background-position:-200% center} }

.k-fade-up { animation: k-fade-up .35s ease both; }
.k-bell    { animation: k-bell .6s ease; }
.k-urgent  { animation: k-pulse 1.8s ease infinite; border-color: var(--k-red) !important; }

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

/* ── Header ──────────────────────────────────────────────────────────────── */
.k-header { background: var(--k-green); padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; }
.k-header-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; }
.k-header-sub   { font-size: 11px; opacity: .7; }
.k-header-right { display: flex; gap: 12px; align-items: center; }
.k-bell-wrap { position: relative; font-size: 24px; cursor: default; }
.k-bell-badge { position: absolute; top: -5px; right: -5px; background: var(--k-red); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.k-logout-btn { background: rgba(255,255,255,.15); color: white; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 6px 12px; font-size: 12px; }

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

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.k-tabs { display: flex; background: #0c1910; border-bottom: 1px solid var(--k-border); overflow-x: auto; scrollbar-width: none; }
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab  { flex-shrink: 0; padding: 11px 14px; background: none; color: var(--k-muted); border: none; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 400; transition: all .18s; text-transform: capitalize; }
.k-tab.active { color: var(--k-amber); border-bottom-color: var(--k-amber); font-weight: 700; }
.k-tab-badge { background: var(--k-red); color: white; border-radius: 8px; padding: 1px 5px; font-size: 9px; margin-left: 5px; }

/* ── Order cards ─────────────────────────────────────────────────────────── */
.k-orders { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.k-card { background: var(--k-surface); border-radius: var(--k-radius); padding: 15px; border: 1px solid var(--k-border); transition: border-color .3s; }
.k-card-top  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.k-card-id   { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.k-card-age  { font-size: 12px; color: var(--k-muted); margin-top: 2px; }
.k-card-type { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-top: 6px; }
.k-card-type.dine-in  { background: #1B4332; color: #a5d6a7; }
.k-card-type.delivery { background: #1a1a4a; color: #b0b0ff; }
.k-card-type.takeaway { background: #2d1a08; color: #ffcc80; }
.k-card-right { text-align: right; }
.k-status-badge { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.k-card-total { color: var(--k-amber); font-weight: 700; font-size: 16px; margin-top: 6px; }
.k-items-list { background: #0c1910; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.k-item-line  { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--k-border); color: #c8e6c9; }
.k-item-line:last-child { border: none; }
.k-item-price { color: var(--k-muted); }
.k-info-row   { border-radius: 7px; padding: 7px 10px; font-size: 12px; margin-bottom: 9px; }
.k-info-notes    { background: #2d3d0a; color: #d4e8a0; }
.k-info-delivery { background: #0a0a2d; color: #b0b0ff; }
.k-info-takeaway { background: #2d1a08; color: #ffcc80; }
.k-actions { display: flex; gap: 8px; }
.k-btn { padding: 11px 0; border-radius: 9px; font-size: 13px; font-weight: 700; color: white; flex: 1; }
.k-btn-accept   { background: #1E7B34; }
.k-btn-reject   { background: #B71C1C; flex: 0 0 50px; }
.k-btn-ready    { background: #0D47A1; }
.k-btn-deliver  { background: #4527A0; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.k-empty { text-align: center; padding: 50px 20px; color: var(--k-muted); }
.k-empty-icon { font-size: 52px; margin-bottom: 14px; }

/* ── Status colors ───────────────────────────────────────────────────────── */
.s-pending   { background: #FFF3E0; color: #E65100; }
.s-accepted  { background: #E8F5E9; color: #1B5E20; }
.s-rejected  { background: #FFEBEE; color: #B71C1C; }
.s-ready     { background: #E3F2FD; color: #0D47A1; }
.s-delivered { background: #F3E5F5; color: #4A148C; }