/* ══════════════════════════════════════════════════════════════
   THE ROCKET · หน้าจองสนาม — ตารางแนวนอนสไตล์ Sterling
   โหลดต่อจาก app.css (override เฉพาะตาราง ไม่แตะส่วนอื่น)
   ══════════════════════════════════════════════════════════════ */

.gcard{
  --ccol:132px;            /* ความกว้างคอลัมน์ชื่อคอร์ท */
  --cellw:78px;            /* ความกว้างขั้นต่ำของช่องเวลา */
  padding:14px 13px 15px;
}
@media(max-width:700px){
  .gcard{ --ccol:96px; --cellw:64px }
}

/* ---------- ตัวตาราง: เลื่อนแนวนอนได้ ---------- */
.gcard .grid{
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
  overscroll-behavior-x:contain;
  background:
    linear-gradient(to left, var(--surface) 40%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 100% 50%, rgba(20,32,26,.16), rgba(20,32,26,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 11px 100%;
  background-attachment:local, scroll;
}
.gcard .grid::-webkit-scrollbar{height:7px}
.gcard .grid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.gcard .grid::-webkit-scrollbar-track{background:transparent}

/* ---------- คอลัมน์ซ้ายติดขอบตอนเลื่อน ---------- */
.gcard .grid .gcorner,
.gcard .grid .gh{
  position:sticky;
  left:0;
  background:var(--surface);
  box-shadow:1px 0 0 var(--line);
}
.gcard .grid .gcorner{ z-index:4 }
.gcard .grid .gh{ z-index:3 }
.gcard .grid .gt{ z-index:2 }

/* ---------- มุมซ้ายบน ---------- */
.gcard .grid .gcorner{
  display:flex; align-items:flex-end;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  padding:0 10px 9px 2px;
}

/* ---------- หัวคอลัมน์เวลา ---------- */
.gcard .grid .gt{
  display:flex; align-items:flex-end; justify-content:center;
  position:relative;
  padding:0 2px 9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  text-align:center; white-space:nowrap;
}
.gcard .grid .gt.now{ color:var(--brand); font-weight:600 }
.gcard .grid .gt.now::after{
  content:""; position:absolute; left:50%; bottom:3px;
  width:4px; height:4px; margin-left:-2px; margin-top:0; top:auto; right:auto;
  border-radius:50%; background:var(--brand);
}

/* ---------- หัวแถว = ชื่อคอร์ท ---------- */
.gcard .grid .gh{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  gap:1px; padding:8px 12px 8px 2px;
  border:0; text-align:left;
}
.gcard .grid .gh .cico{ display:none }
.gcard .grid .gh > span{
  font-size:13.5px; font-weight:600; color:var(--ink);
  line-height:1.25; letter-spacing:-.01em;
}
.gcard .grid .gh .free{
  font-family:var(--mono); font-size:10px; font-weight:400;
  color:var(--ink-3); letter-spacing:.01em;
}
.gcard .grid .gh .free.hot{ color:var(--gold) }
.gcard .grid .gh .free.full{ color:var(--ink-3); opacity:.6 }

/* ---------- ช่องเวลา ---------- */
.gcard .grid .slot{
  min-height:54px;
  border-radius:9px;
  padding:7px 4px;
  gap:2px;
  border:1px solid var(--line);
  background:var(--surface);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.gcard .grid .slot .t{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2;
}
.gcard .grid .slot .p{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
@media(hover:hover){
  .gcard .grid .slot:not(:disabled):hover{
    border-color:var(--brand); background:var(--brand-soft);
  }
}

/* จองแล้ว / ปิด / ผ่านไปแล้ว */
.gcard .grid .slot.busy{
  background:var(--surface-3); border-color:var(--surface-3);
}
.gcard .grid .slot.busy .t{ font-size:14px; font-weight:400; color:var(--ink-3) }
.gcard .grid .slot.past{
  background:transparent; border-color:transparent; box-shadow:inset 0 0 0 1px var(--surface-2);
}
.gcard .grid .slot.past .t{ font-size:14px; font-weight:400; color:var(--line-2) }
.gcard .grid .slot.ev{ background:var(--court-soft); border-color:var(--court-soft) }
.gcard .grid .slot.ev .t{ font-size:10.5px; font-weight:500; color:var(--court) }

/* ที่เลือกอยู่ — ต่อกันแนวนอน */
.gcard .grid .slot.sel{
  background:var(--brand); border-color:var(--brand);
}
.gcard .grid .slot.sel .t,
.gcard .grid .slot.sel .p{ color:var(--on-brand) }
.gcard .grid .slot.sel .p{ color:rgba(255,255,255,.72) }
.gcard .grid .slot.sel.jl{ border-radius:9px 3px 3px 9px }
.gcard .grid .slot.sel.jm{ border-radius:3px }
.gcard .grid .slot.sel.jr{ border-radius:3px 9px 9px 3px }

/* โครงร่างตอนโหลด */
.gcard .grid .skel{ min-height:54px; border-radius:9px }
.gcard .grid .skel-t{ min-height:54px; background:var(--surface-2) }
.gcard .grid .skel-h{ min-height:20px; border-radius:6px; background:none; animation:none }

/* ---------- คำอธิบายสี ---------- */
.gcard .legend{
  align-items:center; gap:8px 14px;
  font-size:11.5px; color:var(--ink-2);
}
.gcard .legend span{ display:inline-flex; align-items:center; gap:6px }
.gcard .legend .lnote{
  margin-left:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  color:var(--ink-3);
}
@media(max-width:520px){
  .gcard .legend .lnote{ margin-left:0; width:100% }
}

/* ══════════════════════════════════════════════════════════════
   หลังบ้าน — ผังคอร์ททั้งวัน (ใช้ตารางชุดเดียวกับฝั่งลูกค้า)
   ══════════════════════════════════════════════════════════════ */

/* ช่องที่มีคนจองแล้ว */
.gcard .grid .slot.a-ok{
  background:var(--brand-soft); border-color:var(--brand);
  box-shadow:inset 3px 0 0 var(--brand);
}
.gcard .grid .slot.a-ok .t{ font-family:var(--body); font-size:12px; font-weight:600; color:var(--brand) }
.gcard .grid .slot.a-ok .p{ font-size:9.5px; color:var(--brand-2) }

.gcard .grid .slot.a-wait{
  background:var(--gold-soft); border-color:var(--gold);
  box-shadow:inset 3px 0 0 var(--gold);
}
.gcard .grid .slot.a-wait .t{ font-family:var(--body); font-size:12px; font-weight:600; color:var(--gold) }
.gcard .grid .slot.a-wait .p{ font-size:9.5px; color:var(--gold) }

.gcard .grid .slot.a-ok:hover,
.gcard .grid .slot.a-wait:hover{ filter:brightness(.97); cursor:pointer }

/* ช่องว่างในหลังบ้าน — อ่านง่าย ไม่ต้องกด */
.gcard .grid .slot:disabled{ cursor:default }
.gcard .grid .slot:disabled:not(.busy):not(.past):not(.ev) .t{
  color:var(--ink-3); font-family:var(--body); font-size:12px; font-weight:400;
}

/* สีในคำอธิบายของหลังบ้าน */
.l-ok{ background:var(--brand-soft); border-color:var(--brand) }
.l-wait{ background:var(--gold-soft); border-color:var(--gold) }

/* แถบบอกว่ากำลังอัปเดตอัตโนมัติ */
.livebar{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  white-space:nowrap;
}
.livedot{
  width:6px; height:6px; border-radius:50%; background:var(--brand);
  animation:livepulse 2s ease-in-out infinite;
}
@keyframes livepulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* แถบแจ้งของใหม่ในหน้าคิว */
.newbar{
  display:block; width:100%; margin:0 0 14px;
  padding:12px 14px; border-radius:12px;
  background:var(--brand); color:var(--on-brand);
  font-size:13.5px; font-weight:600; border:0; cursor:pointer;
  box-shadow:0 4px 16px -8px rgba(20,32,26,.6);
  animation:newbarin .25s ease;
}
@keyframes newbarin{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ไฮไลต์การ์ดที่กระโดดมาจากผัง */
.rowcard.flash{ animation:cardflash 1.6s ease }
@keyframes cardflash{
  0%,100%{ box-shadow:none }
  12%{ box-shadow:0 0 0 3px var(--brand-soft), 0 0 0 4px var(--brand) }
  70%{ box-shadow:0 0 0 3px var(--brand-soft), 0 0 0 4px var(--brand) }
}