/* ===== สีของแบรนด์ (ดึงมาจากโลโก้ STADIUM.in.th) ===== */
:root{
  --brand:#0b3f72;          /* น้ำเงินกรมท่า */
  --brand-dark:#082c50;
  --brand-teal:#10a0a8;     /* ฟ้าเทอร์ควอยซ์ */
  --brand-orange:#f26a21;   /* ส้ม */
  --bs-primary:#0b3f72;
  --bs-primary-rgb:11,63,114;
  --bs-link-color:#0b3f72;
  --bs-link-color-rgb:11,63,114;
  --bs-link-hover-color:#082c50;
}
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-bg:var(--brand); --bs-btn-active-border-color:var(--brand);
}
.bg-primary{background-color:var(--brand)!important}
.btn-accent{
  --bs-btn-color:#fff; --bs-btn-bg:var(--brand-orange); --bs-btn-border-color:var(--brand-orange);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#d9591a; --bs-btn-hover-border-color:#d9591a;
  --bs-btn-active-bg:#d9591a; --bs-btn-active-border-color:#d9591a;
}
.text-primary{color:var(--brand)!important}
.badge.bg-primary{background-color:var(--brand)!important}
.list-group-item.active{background-color:var(--brand);border-color:var(--brand)}
.form-control:focus,.form-select:focus{border-color:#7ba3d0;box-shadow:0 0 0 .2rem rgba(11,63,114,.15)}
.btn-check:checked+.btn-outline-primary{background-color:var(--brand);border-color:var(--brand)}
.progress-bar{background-color:var(--brand)}
.table-primary{--bs-table-bg:#e3ecf7}
.alert-primary{--bs-alert-bg:#e8f0f9;--bs-alert-border-color:#c9dbef;--bs-alert-color:#0b3f72}
.bg-primary-subtle{background-color:#e3ecf7!important}
.text-primary-emphasis{color:var(--brand-dark)!important}

/* ===== โลโก้ ===== */
.site-navbar{border-bottom:1px solid #e6eaf0}
.site-navbar .nav-link{color:#3a4557;font-weight:500}
.site-navbar .nav-link:hover,.site-navbar .nav-link:focus{color:var(--brand)}
.site-logo{height:44px;width:auto;display:block}
.footer-logo{height:46px;width:auto}
.auth-logo{height:104px;width:auto}
@media (max-width:576px){
  .site-logo{height:34px}
  .auth-logo{height:84px}
}
body{
  font-family:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#f4f6fa;
  color:#20242c;
  padding-bottom:env(safe-area-inset-bottom);
}
.navbar-brand{letter-spacing:.2px}
.card{border:0;border-radius:14px;box-shadow:0 2px 10px rgba(20,30,60,.06)}
.card-header{background:#fff;border-bottom:1px solid #eef1f6;font-weight:600;border-radius:14px 14px 0 0!important}
.table{--bs-table-bg:transparent}
.table>:not(caption)>*>*{padding:.65rem .6rem}
.badge{font-weight:500}
a{text-decoration:none}

/* ---------- Slot grid ---------- */
.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:.5rem;
}
.slot{
  border:1.5px solid #d7dee9;
  border-radius:11px;
  background:#fff;
  padding:.5rem .4rem;
  text-align:center;
  cursor:pointer;
  transition:.14s;
  user-select:none;
  position:relative;
}
.slot .t{font-weight:600;font-size:.95rem;line-height:1.15}
.slot .p{font-size:.78rem;color:#6c7a90}
.slot:hover:not(.disabled){border-color:var(--brand);transform:translateY(-1px)}
.slot.selected{background:var(--brand);border-color:var(--brand);color:#fff}
.slot.selected .p{color:#dbe7ff}
.slot.disabled{cursor:not-allowed;opacity:.62}
.slot.taken{background:#ffe9e9;border-color:#f3c2c2;color:#a33}
.slot.reserved{background:#fff6e0;border-color:#f0dca5;color:#8a6d1f}
.slot.mine{background:#e3f7ea;border-color:#a8dfbc;color:#1c6b3a}
.slot.past{background:#eef0f4;border-color:#e2e5eb;color:#98a1b0}
.slot input{display:none}

/* ---------- Sport pills ---------- */
.sport-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  border:1.5px solid #dde3ec;background:#fff;border-radius:999px;
  padding:.35rem .85rem;font-size:.9rem;color:#3d475a;
}
.sport-pill.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- Sub navigation ---------- */
.subnav{background:#fff;border-bottom:1px solid #e7ebf2;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.subnav .nav-link{color:#48536b;font-size:.93rem;padding:.65rem .85rem;display:inline-block}
.subnav .nav-link.active{color:var(--brand);border-bottom:2.5px solid var(--brand);font-weight:600}

.stat-card{border-radius:14px;padding:1rem 1.1rem;color:#fff}
.stat-card .n{font-size:1.6rem;font-weight:700;line-height:1.1}
.stat-card .l{font-size:.85rem;opacity:.92}
.bg-g1{background:linear-gradient(135deg,#2f6cae,#0b3f72)}
.bg-g2{background:linear-gradient(135deg,#19b8bf,#0d8188)}
.bg-g3{background:linear-gradient(135deg,#ff9147,#f26a21)}
.bg-g4{background:linear-gradient(135deg,#a06bf5,#7239ce)}

.court-card img,.court-card .ph{height:120px;object-fit:cover;width:100%;
  background:linear-gradient(135deg,#dfe7f5,#c8d6ee);display:flex;align-items:center;
  justify-content:center;font-size:2.4rem;color:#5b7bb5}

.slip-thumb{max-height:70px;border-radius:8px;border:1px solid #dde3ec}
.table-responsive{border-radius:12px}

@media (max-width:576px){
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.4rem}
  .slot .t{font-size:.88rem}
  .slot .p{font-size:.72rem}
  h1,.h1{font-size:1.5rem}
  .card-body{padding:.9rem}
}


/* ---------- แกลเลอรีรูปภาพ/เอกสาร ---------- */
.media-thumb{width:100%;height:130px;object-fit:cover;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:#eef1f6;color:#6b7a90}
.media-doc{text-decoration:none}
.media-item{background:#fff}
.gallery-main{width:100%;max-height:420px;object-fit:cover;border-radius:14px}
.gallery-strip img{width:100%;height:86px;object-fit:cover;border-radius:9px;cursor:pointer;
  border:2px solid transparent;transition:.15s}
.gallery-strip img:hover,.gallery-strip img.active{border-color:var(--brand)}
.map-frame{width:100%;height:320px;border:0;border-radius:14px}
.avatar-lg{width:120px;height:120px;object-fit:cover;border-radius:50%;border:3px solid #fff;
  box-shadow:0 2px 10px rgba(20,30,60,.14)}
.avatar-sm{width:46px;height:46px;object-fit:cover;border-radius:50%}
.avatar-ph{display:flex;align-items:center;justify-content:center;background:#e3ecf7;color:var(--brand)}
.court-hero{width:100%;height:260px;object-fit:cover;border-radius:14px}
@media (max-width:576px){
  .gallery-main{max-height:250px}
  .court-hero{height:180px}
  .map-frame{height:250px}
}


/* =====================================================================
   รองรับการใช้งานบนมือถือ (Mobile)
   ===================================================================== */

/* ---------- ปุ่ม/ช่องกรอก : ขนาดนิ้วแตะได้สบาย + ไม่ให้ iOS ซูมเอง ---------- */
@media (max-width:767.98px){
  /* iOS จะซูมหน้าจอเองถ้าตัวอักษรในช่องกรอกเล็กกว่า 16px */
  .form-control,.form-select,input,select,textarea{font-size:16px}
  .form-control-sm,.form-select-sm{font-size:16px;min-height:44px;padding:.5rem .75rem}
  .btn{min-height:44px;padding-top:.55rem;padding-bottom:.55rem}
  .btn-sm{min-height:40px;padding:.45rem .75rem;font-size:.9rem}
  .btn-lg{min-height:52px}
  .form-check-input{width:1.3em;height:1.3em;margin-top:.15em}
  a,button,.btn,.nav-link,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(11,63,114,.12)}
}

/* ---------- แถบเมนูย่อย (หลังบ้าน) : เลื่อนแนวนอนได้ลื่น + บอกว่ายังมีต่อ ---------- */
.subnav{position:relative}
.subnav .container{
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.subnav .container::-webkit-scrollbar{display:none}
.subnav .nav-link{scroll-snap-align:start}
@media (max-width:767.98px){
  .subnav{
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,#000 88%,transparent 100%);
  }
  .subnav .nav-link{padding:.7rem .8rem;font-size:.92rem}
}

/* ---------- ตารางข้อมูล : บนมือถือแปลงเป็นการ์ดทีละรายการ ---------- */
/* ป้ายกำกับของแต่ละช่องถูกเติมให้อัตโนมัติจากหัวตารางด้วย assets/js/app.js */
@media (max-width:767.98px){
  .table-cards{border-collapse:separate}
  .table-cards thead{display:none}
  .table-cards,.table-cards tbody,.table-cards tr{display:block;width:100%}
  .table-cards td{display:block;width:auto;min-width:0}
  .table-cards tr{
    border:1px solid #e6eaf0;border-radius:12px;background:#fff;
    margin:0 0 .6rem;padding:.55rem .8rem;box-shadow:0 1px 4px rgba(20,30,60,.05);
  }
  .table-cards tr:last-child{margin-bottom:0}
  .table-cards td{
    border:0!important;padding:.32rem 0!important;background:none!important;
    display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;
    text-align:right!important;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .table-cards td > *{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .table-cards td::before{
    content:attr(data-label);
    flex:0 0 34%;text-align:left;font-weight:600;color:#6b7a90;font-size:.82rem;
    padding-top:.1rem;
  }
  /* ช่องแรกของแต่ละแถว = ชื่อรายการ แสดงเป็นหัวการ์ดเต็มความกว้าง */
  .table-cards tbody tr:not(.row-group):not(.row-empty) > td:first-child{
    display:block;text-align:left!important;font-size:1rem;
    border-bottom:1px solid #f0f3f8!important;
    padding-bottom:.45rem!important;margin-bottom:.2rem;
  }
  .table-cards tbody tr:not(.row-group):not(.row-empty) > td:first-child::before{content:none}
  .table-cards td[data-label=""]::before,
  .table-cards td:not([data-label])::before{content:none}
  /* ช่องที่ไม่มีหัวข้อ (มักเป็นแถวปุ่มจัดการ) ให้เต็มความกว้าง */
  .table-cards td[data-label=""],.table-cards td:not([data-label]){
    justify-content:flex-end;flex-wrap:wrap;gap:.35rem;
    border-top:1px dashed #eef1f6!important;margin-top:.35rem;padding-top:.55rem!important;
  }
  .table-cards td .btn,.table-cards td form{margin-bottom:.25rem}
  .table-cards td form.d-inline{display:inline-flex!important;gap:.35rem;flex-wrap:wrap}
  /* แถวหัวกลุ่ม (colspan) แสดงเป็นแถบคั่น */
  .table-cards tr.row-group{
    background:#eef3fa;border-color:#dbe5f2;font-weight:600;padding:.5rem .8rem;
  }
  .table-cards tr.row-group td{display:block;text-align:left!important}
  .table-cards tr.row-group td::before{content:none}
  /* แถว "ไม่มีข้อมูล" */
  .table-cards tr.row-empty{border-style:dashed;color:#8a94a6}
  .table-cards tr.row-empty td{display:block;text-align:center!important}
  .table-cards tr.row-empty td::before{content:none}
  .table-responsive{overflow-x:visible}
}

/* ---------- แถบเมนูล่างสำหรับมือถือ (App-like bottom bar) ---------- */
.mobile-tabbar{display:none}
@media (max-width:767.98px){
  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1035;
    background:#fff;border-top:1px solid #e6eaf0;
    box-shadow:0 -2px 12px rgba(20,30,60,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-tabbar a{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.15rem;padding:.45rem .2rem .5rem;text-decoration:none;color:#6b7a90;
    font-size:.68rem;line-height:1.15;text-align:center;min-height:56px;
  }
  .mobile-tabbar a i{font-size:1.18rem}
  .mobile-tabbar a.active{color:var(--brand);font-weight:600}
  .mobile-tabbar a.active i{color:var(--brand)}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  footer{margin-bottom:0}
}

/* ---------- แถบสรุปการจองแบบติดขอบล่าง (หน้าจองสนาม) ---------- */
@media (max-width:767.98px){
  .booking-sticky{
    position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:1030;
    background:#fff;border:1px solid #e6eaf0;border-radius:14px;
    box-shadow:0 -3px 14px rgba(20,30,60,.12);padding:.75rem;margin-top:.75rem;
  }
}

/* ---------- ปรับองค์ประกอบอื่น ๆ ให้พอดีจอเล็ก ---------- */
@media (max-width:767.98px){
  main.container{padding-left:.75rem;padding-right:.75rem}
  .card-body{padding:.9rem}
  .sport-pill{padding:.5rem .85rem;font-size:.88rem;display:inline-block}
  .stat-card{padding:.8rem .9rem}
  .stat-card .n{font-size:1.35rem}
  .stat-card .l{font-size:.78rem}
  .media-thumb{height:110px}
  .gallery-strip img{height:64px}
  .site-navbar .navbar-collapse{max-height:76vh;overflow-y:auto}
  .dropdown-menu{max-height:70vh;overflow-y:auto}
  /* ฟอร์มกรองข้อมูล : ปุ่มเต็มความกว้าง กดง่าย */
  form .row > [class*="col-"] > .btn{width:100%}
  h4,.h4{font-size:1.2rem}
  h5,.h5{font-size:1.05rem}
  table.table{font-size:.92rem}
}

/* ---------- พิมพ์เอกสาร : ซ่อนเมนูล่าง ---------- */
@media print{ .mobile-tabbar{display:none!important} }

/* ---------- ปุ่มเลือกช่วงเวลาแบบ walk-in (หลังบ้าน) ให้แตะง่ายบนมือถือ ---------- */
.slot-pick{cursor:pointer;display:inline-block}
.slot-pick .badge{padding:.6rem .7rem;font-size:.85rem;font-weight:600}
@media (max-width:767.98px){
  .slot-pick .badge{padding:.7rem .55rem;min-width:92px;text-align:center}
}

/* ---------- เมนูบนสุดเมื่อกางบนมือถือ : แตะง่ายขึ้น ---------- */
@media (max-width:991.98px){
  .navbar-toggler{padding:.45rem .7rem;min-height:44px}
  .site-navbar .navbar-nav .nav-link{padding:.7rem .3rem;font-size:1rem}
  .site-navbar .dropdown-menu{border:0;box-shadow:none;padding-left:.5rem}
  .site-navbar .dropdown-item{padding:.6rem .75rem}
  .site-navbar .navbar-nav .btn{margin-top:.5rem}
}