/* app.css — สไตล์เฉพาะแอปนี้ (skin.css คือ house-style ต้นฉบับ ไม่แก้) */
body{padding:0 0 60px}
.shell{max-width:980px;margin:0 auto;padding:24px 16px}
select{width:100%;max-width:340px;border:1px solid rgb(var(--line)/.16);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff;color:rgb(var(--ink))}
.sec-title{font-size:13px;color:rgb(var(--muted));font-weight:600;margin:22px 0 8px}
.todo{background:#fff7ed;border:1px dashed #f59e0b;color:#92400e;font-size:12.5px;padding:10px 14px;border-radius:10px;margin-bottom:18px}
.viewas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgb(59 130 246/.06);border:1px solid rgb(59 130 246/.25);border-radius:12px;padding:10px 12px;margin-bottom:16px;font-size:13px}
.viewas select{max-width:280px}

/* top bar */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;background:rgb(var(--card));border-bottom:1px solid rgb(var(--line)/.1);position:sticky;top:0;z-index:20}
.tb-home{font-family:"Bai Jamjuree";font-weight:700;text-decoration:none;color:rgb(var(--ink))}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.topbar nav a{font-size:13px;text-decoration:none;color:rgb(var(--muted));padding:6px 10px;border-radius:8px}
.topbar nav a.on{background:rgb(var(--line)/.06);color:rgb(var(--ink));font-weight:600}
.tb-user{font-size:13px;display:flex;align-items:center;gap:6px}
.tb-out{padding:6px 12px;font-size:13px}

/* booking card */
.bk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bk-card{background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-radius:14px;box-shadow:var(--sh-sm);padding:14px 16px}
.bk-card.is-cancelled{opacity:.75;background:rgb(var(--line)/.02)}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bk-pills{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.bk-ref{margin-bottom:6px}
.bk-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid rgb(var(--line)/.06);font-size:13.5px}
.bk-row span:first-child{color:rgb(var(--muted));flex-shrink:0}
.bk-row span:last-child{text-align:right;overflow-wrap:anywhere}
.bk-cancel-note{margin-top:8px;font-size:12.5px;color:#7a2e26;background:rgb(220 38 38/.05);border-radius:8px;padding:8px 10px}
.bk-card .btn-danger{width:100%;margin-top:10px}
.btn-danger{color:#b3261e;border-color:rgb(220 38 38/.35)}
.btn-danger:hover{background:rgb(220 38 38/.06);border-color:rgb(220 38 38/.6)}
.btn-danger:disabled,.btn:disabled{opacity:.55;cursor:wait}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}

/* slots */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.slot{border:1px solid rgb(var(--line)/.16);border-radius:11px;padding:10px;text-align:center;font-size:13px;background:#fff}
.slot.locked{background:rgb(var(--line)/.04);color:rgb(var(--faint))}
.slot b{display:block;font-family:"Bai Jamjuree";font-size:14px}

/* dialog */
.dlg{margin:auto;border:none;border-radius:16px;padding:22px;width:min(440px,calc(100vw - 32px));box-shadow:var(--sh-md)}
.dlg::backdrop{background:rgb(26 32 50/.35)}
.dlg h3{font-size:18px}
.dlg-warn{font-size:13px;background:rgb(234 179 8/.1);border:1px solid rgb(234 179 8/.35);color:#7a5a06;border-radius:10px;padding:8px 10px;margin-top:10px}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

/* auth (index) */
.role-pick{display:flex;gap:8px;margin-top:4px}
.role-pick label{flex:1;margin:0;display:flex;align-items:center;gap:6px;border:1px solid rgb(var(--line)/.16);border-radius:10px;padding:9px 10px;cursor:pointer;color:rgb(var(--ink));font-size:14px}
.role-pick input{width:auto}
.auth-note{font-size:12px;color:rgb(var(--muted));margin-top:14px;line-height:1.5}

@media(max-width:640px){
  .tb-home{flex:1}
  .tb-user{order:3;flex-basis:100%}
  .topbar nav{order:4;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto}
  .topbar nav a{white-space:nowrap}
  .dlg-actions{flex-direction:column-reverse}
  .dlg-actions .btn{width:100%}
}