/* ==========================================================================
   COMANDA — Cards
   ========================================================================== */

.card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}
.card-body{ padding:1.4rem; }
.card-header{
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--ink-100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.card-header-title{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink-900); }
.card-header-sub{ font-size:.78rem; color:var(--ink-500); margin-top:.1rem; }
.card-footer{
  padding:1rem 1.4rem;
  border-top:1px solid var(--ink-100);
  background:transparent;
}

/* ---------------------------------------------------------------------- */
/* KPI / stat card                                                        */
/* ---------------------------------------------------------------------- */

.stat-card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);
  padding:1.3rem 1.4rem;
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.stat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.stat-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:1rem;
}
.stat-icon{
  width:44px; height:44px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  flex-shrink:0;
}
.stat-icon.bg-accent{ background:var(--accent-100); color:var(--accent-600); }
.stat-icon.bg-navy{ background:var(--navy-100); color:var(--navy-700); }
.stat-icon.bg-success{ background:var(--success-100); color:var(--success-600); }
.stat-icon.bg-info{ background:var(--info-100); color:var(--info-600); }

.stat-trend{
  font-size:.76rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .55rem;
  border-radius:var(--radius-pill);
}
.stat-trend.up{ color:var(--success-600); background:var(--success-100); }
.stat-trend.down{ color:var(--danger-600); background:var(--danger-100); }

/* ---------------------------------------------------------------------- */
/* Order ticket — signature component                                     */
/* Styled like a kitchen / receipt ticket, torn edge + perforation         */
/* ---------------------------------------------------------------------- */

.ticket-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.ticket{
  position:relative;
  background:var(--paper);
  border:1px dashed var(--ink-200);
  border-radius:var(--radius-sm);
  padding:.9rem 1rem .9rem 1.1rem;
}
.ticket::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  background:var(--accent-500);
}
.ticket.state-new::before{ background:var(--accent-500); }
.ticket.state-preparing::before{ background:var(--info-500); }
.ticket.state-ready::before{ background:var(--success-500); }
.ticket.state-late::before{ background:var(--danger-500); }

.ticket-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.45rem;
}
.ticket-code{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.88rem;
  color:var(--ink-900);
}
.ticket-time{
  font-family:var(--font-mono);
  font-size:.74rem;
  color:var(--ink-500);
}
.ticket-meta{
  font-size:.8rem;
  color:var(--ink-700);
  margin-bottom:.5rem;
}
.ticket-meta strong{ color:var(--ink-900); }
.ticket-items{
  font-size:.78rem;
  color:var(--ink-500);
  border-top:1px dashed var(--ink-200);
  padding-top:.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ---------------------------------------------------------------------- */
/* Ranked list card — e.g. Top Selling Items                              */
/* ---------------------------------------------------------------------- */

.rank-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--ink-100);
}
.rank-row:last-child{ border-bottom:0; padding-bottom:0; }
.rank-row:first-child{ padding-top:0; }
.rank-index{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  color:var(--ink-300);
  width:20px;
  flex-shrink:0;
}
.rank-thumb{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--navy-100);
  color:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}
.rank-body{ flex:1; min-width:0; }
.rank-title{ font-size:.85rem; font-weight:600; color:var(--ink-900); }
.rank-sub{ font-size:.74rem; color:var(--ink-500); }
.rank-value{ font-family:var(--font-mono); font-weight:700; font-size:.85rem; color:var(--ink-900); flex-shrink:0; }

.progress-thin{
  height:5px;
  border-radius:var(--radius-pill);
  background:var(--ink-100);
  overflow:hidden;
  margin-top:.35rem;
}
.progress-thin > span{
  display:block;
  height:100%;
  background:var(--accent-500);
  border-radius:var(--radius-pill);
}

/* ---------------------------------------------------------------------- */
/* Menu item card — grid card for dish management                        */
/* ---------------------------------------------------------------------- */

.menu-card{
  background:var(--white);
  border:1px solid var(--ink-100);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.menu-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.menu-card-media{
  height:120px;
  background:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5);
  font-size:1.8rem;
}
.menu-card-body{ padding:1rem 1.1rem; }
.menu-card-title{ font-weight:700; font-size:.92rem; color:var(--ink-900); }
.menu-card-cat{ font-size:.74rem; color:var(--ink-500); margin-bottom:.5rem; }
.menu-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.6rem; margin-top:.6rem;
  border-top:1px solid var(--ink-100);
}