:root{
  --coral-50:#fff1f0;
  --coral-100:#ffe3e0;
  --coral-300:#ff9f93;
  --coral-500:#ff6b5a;
  --coral-600:#ff5644;
  --coral-700:#e64b3b;
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-200:#e2e8f0;
  --gray-300:#cbd5e1;
  --gray-400:#94a3b8;
  --gray-500:#64748b;
  --gray-900:#0f172a;
}

body{
  background: rgba(248,250,252,.6);
  color: var(--gray-900);
}

.app-shell{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  height:64px;
  background:#fff;
  border-bottom:1px solid rgba(226,232,240,.7);
}

.brand-badge{
  width:32px;height:32px;
  background: var(--coral-500);
  border-radius: .6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.page-body{
  flex:1;
  overflow:auto;
  background: rgba(248,250,252,.35);
}

.section-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color: var(--gray-500);
}

.muted{
  color: var(--gray-500);
}

.card-table{
  width:80px;height:80px;
  border-radius: .9rem;
  border:2px solid #f1f5f9;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration:none;
  color: inherit;
}
.card-table:hover{
  border-color: var(--gray-200);
  box-shadow: 0 .25rem .75rem rgba(15,23,42,.06);
  transform: translateY(-2px);
}
.card-table.is-selected{
  border-color: var(--coral-500);
  background: var(--coral-50);
  box-shadow: 0 .35rem 1.2rem rgba(255,107,90,.18);
}
.card-table .dot{
  position:absolute;
  top:.55rem;
  right:.55rem;
  width:.5rem;height:.5rem;border-radius:50%;
}
.dot.free{ background:#22c55e; }
.dot.occupied{ background:#f97316; }
.dot.stale{ background:#ef4444; }

.table-strip{
  background:#fff;
  border-top:1px solid rgba(226,232,240,.7);
  box-shadow: 0 -0.25rem 1.25rem rgba(15,23,42,.08);
}

.hscroll{
  overflow-x:auto;
  white-space:nowrap;
}
.hscroll::-webkit-scrollbar{ height:10px; }
.hscroll::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.55); border-radius: 999px; }
.hscroll::-webkit-scrollbar-track{ background: rgba(226,232,240,.55); border-radius: 999px; }

.panel{
  background:#fff;
  border:1px solid rgba(226,232,240,.8);
  border-radius: 1.1rem;
}

.btn-coral{
  background: var(--coral-500);
  border-color: var(--coral-500);
  color:#fff;
}
.btn-coral:hover{ background: var(--coral-600); border-color: var(--coral-600); color:#fff; }
.btn-coral:disabled{ background:#e2e8f0; border-color:#e2e8f0; color: var(--gray-400); }

.btn-darkish{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.btn-darkish:hover{ background:#0b1220; border-color:#0b1220; color:#fff; }
.btn-outline-soft{
  border:2px solid rgba(226,232,240,1);
  background:#fff;
}
.btn-outline-soft:hover{
  background: var(--gray-50);
  border-color: rgba(203,213,225,1);
}

.input-soft{
  background: rgba(248,250,252,1);
  border:1px solid rgba(226,232,240,1);
  border-radius: .9rem;
}
.input-soft:focus{
  border-color: var(--coral-500);
  box-shadow: 0 0 0 .2rem rgba(255,107,90,.15);
}

.note-input{
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  padding-left:0;
  padding-right:0;
  background:transparent;
  font-size:.9rem;
  color: var(--gray-500);
}
.note-input:focus{
  border-bottom-color: var(--coral-500);
  box-shadow:none;
  outline:none;
}

.row-sep{
  border-bottom:1px solid rgba(226,232,240,.7);
}
.row-sep:last-child{ border-bottom:0; }

.price{
  font-weight:600;
}

.total-lg{
  font-size: 2rem;
  font-weight: 800;
}

@media (max-width: 575.98px){
  .topbar{ height:auto; padding-top:.75rem; padding-bottom:.75rem; }
  .card-table{ width:74px; height:74px; }
  .total-lg{ font-size: 1.75rem; }
}