@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --navy-900:#061325; --navy-800:#0B2240; --navy-700:#0E2A47;
  --navy-600:#163D63; --navy-500:#2A5689; --navy-100:#DDE7F2; --navy-50:#EEF3F9;
  --yellow-600:#D69915; --yellow-500:#F5B82E; --yellow-400:#FFD15C;
  --yellow-100:#FDE9A9; --yellow-50:#FFF7DD;
  --cream:#FAF7F0; --paper:#F4F0E6; --bone:#ECE6D6;
  --ink:#0E1726; --steel:#4B5563; --mist:#94A3B8;
  --hairline:rgba(14,23,38,.10); --hair2:rgba(14,23,38,.06);
  --green:#1E7F5C; --red:#C2410C;
  --th:"IBM Plex Sans Thai",system-ui,sans-serif;
  --en:"Manrope",-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{font-family:var(--th);background:#e5e7eb;color:var(--ink);min-height:100dvh}
#app{max-width:430px;margin:0 auto;min-height:100dvh;background:#fff;position:relative;box-shadow:0 0 40px rgba(0,0,0,.15)}

/* Typography helpers */
.mono{font-family:var(--mono)}
.eng{font-family:var(--en)}
.label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}

/* Bottom nav */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:#fff;border-top:1px solid var(--hairline);
  padding:10px 0 20px;
  display:flex;justify-content:space-around;z-index:100;
}
.nav-btn{
  background:none;border:0;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--mist);padding:4px 12px;cursor:pointer;
}
.nav-btn.active{color:var(--navy-800)}
.nav-btn span{font-size:10px;font-weight:500}
.nav-btn.active span{font-weight:600}

/* Page wrapper */
.page{padding-bottom:90px}

/* Cards & surfaces */
.card{background:#fff;border-radius:16px;border:1px solid var(--hairline)}
.surface{background:var(--cream);border-radius:14px;padding:14px 16px}

/* Buttons */
.btn-primary{
  background:var(--navy-800);color:#fff;border:0;
  border-radius:14px;font-family:var(--th);font-weight:700;
  font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-secondary{
  background:var(--cream);color:var(--navy-800);
  border:1px solid var(--hairline);border-radius:14px;
  font-family:var(--th);font-weight:600;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-yellow{
  background:var(--yellow-500);color:var(--navy-900);border:0;
  border-radius:10px;font-family:var(--th);font-weight:700;
  font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}

/* Status badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.badge-pending   {background:var(--yellow-50);color:var(--yellow-600)}
.badge-confirmed {background:var(--navy-50);color:var(--navy-700)}
.badge-progress  {background:#d1fae5;color:#065f46}
.badge-completed {background:#dcfce7;color:#14532d}
.badge-cancelled {background:#fee2e2;color:var(--red)}

/* Form inputs */
.input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--hairline);font-family:var(--th);
  font-size:14px;background:#fff;outline:none;
  transition:border-color .15s;
}
.input:focus{border-color:var(--navy-700)}
textarea.input{resize:none}

/* Progress bar */
.progress-bar{display:flex;gap:4px;padding:12px 16px 0}
.progress-seg{flex:1;height:3px;border-radius:2px;background:var(--bone)}
.progress-seg.done{background:var(--navy-800)}

/* Service card */
.svc-card{
  border:1.5px solid var(--hairline);background:var(--cream);
  border-radius:14px;padding:14px;cursor:pointer;
  display:flex;gap:12px;align-items:center;position:relative;
  transition:border-color .15s;
}
.svc-card.selected{border-color:var(--navy-800);background:#fff}
.svc-icon{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--hairline);display:grid;place-items:center;flex-shrink:0;color:var(--navy-700)}
.svc-card.selected .svc-icon{background:var(--navy-800);border:none;color:var(--yellow-400)}
.selected-badge{position:absolute;top:-8px;right:12px;background:var(--yellow-500);color:var(--navy-900);font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}

/* Qty stepper */
.qty{display:flex;align-items:center;border:1px solid var(--hairline);border-radius:8px;background:#fff}
.qty-btn{width:30px;height:30px;border:0;background:transparent;color:var(--navy-700);font-size:18px;cursor:pointer}
.qty-val{width:30px;text-align:center;font-size:13px;font-weight:700;color:var(--navy-800)}

/* Date strip */
.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.date-cell{aspect-ratio:1/1.3;border-radius:12px;border:1px solid var(--hairline);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.date-cell.sel{background:var(--navy-800);border:none;color:#fff}
.date-cell .day{font-size:9px;opacity:.7}
.date-cell .num{font-family:var(--en);font-size:16px;font-weight:700}

/* Time slots */
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{padding:13px 14px;border-radius:12px;border:1px solid var(--hairline);
  background:#fff;font-family:var(--en);font-size:13px;font-weight:600;
  color:var(--navy-800);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.slot.sel{background:var(--navy-800);border:none;color:#fff}

/* Admin header */
.admin-header{padding:52px 16px 16px;background:var(--navy-800);color:#fff}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.kpi-card{background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}

/* Booking list item */
.booking-item{background:#fff;border-radius:16px;border:1px solid var(--hairline);overflow:hidden;margin-bottom:10px}
.booking-header{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.booking-detail{border-top:1px solid var(--hairline);padding:14px 16px;background:var(--cream);display:none}
.booking-detail.open{display:block}

/* Filter tabs */
.filter-tabs{background:#fff;border-bottom:1px solid var(--hairline);padding:10px 12px;display:flex;gap:6px;overflow-x:auto}
.filter-tab{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;border:none;white-space:nowrap;background:var(--cream);color:var(--steel);cursor:pointer}
.filter-tab.active{background:var(--navy-800);color:#fff}

/* Export dropdown menu item */
.export-item{display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;font-weight:500;color:var(--navy-800);background:none;border:none;cursor:pointer}
.export-item:hover{background:var(--cream)}

/* Sticky bottom action */
.bottom-action{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  padding:12px 16px 28px;background:#fff;border-top:1px solid var(--hairline);z-index:90;
}

/* Confirm screen */
.confirm-hero{padding:60px 22px 28px;background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.confirm-card{background:#fff;color:var(--ink);border-radius:28px 28px 0 0;padding:24px 20px;flex:1}

/* Confirm wrapper — mobile: full-height column; desktop: centered card */
.confirm-wrap  { display:flex;flex-direction:column;min-height:100dvh }
.confirm-inner { display:flex;flex-direction:column;flex:1 }

/* =====================================================
   PANEL VISIBILITY — JS toggles .panel-active class
   ===================================================== */
[id^="panel-"]            { display:none }
[id^="panel-"].panel-active { display:block }

/* Side nav — hidden on mobile */
.side-nav  { display:none }
.side-links{ display:flex;flex-direction:column;gap:2px }

/* =====================================================
   DESKTOP  ≥ 900px
   ===================================================== */
@media (min-width:900px) {

  body { background:var(--navy-900) }

  #app {
    max-width:none;
    margin-left:240px;
    box-shadow:none;
  }

  /* ---- Side nav ---- */
  .side-nav {
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    width:240px;
    background:var(--navy-900);
    border-right:1px solid rgba(255,255,255,.07);
    padding:32px 14px 28px;
    z-index:200;
    overflow-y:auto;
  }
  .side-logo {
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .side-btn {
    display:flex;align-items:center;gap:10px;
    padding:11px 12px;border-radius:10px;
    border:none;background:transparent;
    color:rgba(255,255,255,.5);
    font-family:var(--th);font-size:14px;font-weight:500;
    cursor:pointer;width:100%;text-align:left;
    transition:background .15s,color .15s;
  }
  .side-btn:hover  { background:rgba(255,255,255,.07);color:rgba(255,255,255,.85) }
  .side-btn.active { background:rgba(255,255,255,.11);color:#fff;font-weight:700 }
  .side-dot {
    width:5px;height:5px;border-radius:999px;
    background:transparent;margin-left:auto;flex-shrink:0;
  }
  .side-btn.active .side-dot { background:var(--yellow-500) }

  /* ---- Hide mobile nav ---- */
  .bottom-nav { display:none !important }

  /* ---- Page padding (no fixed bottom overlay) ---- */
  .page { padding-bottom:28px !important }

  /* ---- Admin header (no mobile status-bar gap) ---- */
  .admin-header { padding-top:32px !important }

  /* ---- Booking bottom-action bar ---- */
  .bottom-action {
    left:240px !important;right:0 !important;
    width:auto !important;max-width:none !important;
    transform:none !important;
  }

  /* ---- Admin: 2-column booking list ---- */
  #booking-list {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
  }
  .booking-item { margin-bottom:0 }

  /* ---- Booking page: 2-col service cards ---- */
  #svc-list { grid-template-columns:1fr 1fr !important }

  /* ---- Time slots: 3 cols ---- */
  .slot-grid { grid-template-columns:repeat(3,1fr) }

  /* ---- Home: stats 4-in-a-row ---- */
  .stats-grid { grid-template-columns:repeat(4,1fr) !important }

  /* ---- Booking step-2 (contact): form + sticky summary ---- */
  #panel-2.panel-active {
    display:grid !important;
    grid-template-columns:1fr 300px;
    gap:28px;
    align-items:start;
  }
  #summary-box { position:sticky;top:16px }

  /* ---- Confirm screen: centered card on dark background ---- */
  .confirm-wrap {
    background:var(--navy-900);
    align-items:center;
    justify-content:center;
    padding:56px 32px;
  }
  .confirm-inner {
    flex:none;                          /* don't fill full height on desktop */
    width:100%;
    max-width:520px;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  }
  .confirm-hero { padding-top:44px !important }
  .confirm-card { flex:none !important; border-radius:0 !important }
}