/* =====================================================================
   ระบบตารางนัดคลินิกแพทย์แผนไทย — Public/User Theme
   ===================================================================== */
:root {
  --clinic-50:  #e8f5ef;
  --clinic-100: #cfead9;
  --clinic-200: #a4d6b9;
  --clinic-300: #6ec199;
  --clinic-400: #3da97a;
  --clinic-500: #1f8a70;
  --clinic-600: #167158;
  --clinic-700: #0f5e4a;
  --clinic-800: #0b4b3b;
  --clinic-900: #073329;
  --bg-app:     #f3f7f5;
  --ink-1:      #1c2622;
  --ink-2:      #475852;
  --muted:      #7a8c87;
  --line:       #e2ebe6;
  --soft-shadow: 0 6px 20px rgba(15, 94, 74, .08);
}

* { font-family: 'IBM Plex Sans Thai','Tahoma','Segoe UI',sans-serif; }
html, body { color: var(--ink-1); }
body.bg-app { background: var(--bg-app); min-height: 100vh; }

a { color: var(--clinic-600); text-decoration: none; }
a:hover { color: var(--clinic-800); text-decoration: underline; }

.text-clinic { color: var(--clinic-600) !important; }
.bg-clinic   { background: var(--clinic-500) !important; color:#fff; }
.bg-clinic-soft { background: var(--clinic-50) !important; }
.shadow-soft  { box-shadow: var(--soft-shadow) !important; }

/* Buttons */
.btn-clinic {
  background: var(--clinic-500); color:#fff; border:1px solid var(--clinic-500);
  font-weight: 500; border-radius: 10px;
  transition: all .15s ease;
}
.btn-clinic:hover, .btn-clinic:focus {
  background: var(--clinic-700); border-color: var(--clinic-700); color:#fff;
  box-shadow: 0 4px 14px rgba(15,94,74,.25);
}
.btn-outline-clinic {
  color: var(--clinic-600); border:1px solid var(--clinic-300); background:#fff; border-radius:10px;
}
.btn-outline-clinic:hover, .btn-outline-clinic.active {
  background: var(--clinic-50); border-color: var(--clinic-500); color: var(--clinic-700);
}

.form-control, .form-select { border-radius: 10px; border-color: var(--line); }
.form-control:focus, .form-select:focus {
  border-color: var(--clinic-300);
  box-shadow: 0 0 0 .2rem rgba(31,138,112,.18);
}

/* Brand */
.brand-mark {
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--clinic-400), var(--clinic-700));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(15,94,74,.25);
}
.brand-mark-sm { width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--clinic-400), var(--clinic-700));
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }

/* Hero */
.hero-banner {
  background: linear-gradient(135deg, #ffffff 0%, var(--clinic-50) 100%);
  border-radius: 18px;
  padding: 28px 28px;
  box-shadow: var(--soft-shadow);
}

/* Footer */
.footer-app { background:#fff; border-top: 1px solid var(--line); }

/* Stat cards */
.stat-card { border-radius: 14px; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--clinic-700); line-height: 1; }

.feature-card {
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--soft-shadow); }
.feature-icon {
  width:44px; height:44px; border-radius:12px;
  background: var(--clinic-50); color: var(--clinic-700);
  display:inline-flex; align-items:center; justify-content:center; font-size:20px;
  margin-bottom: 10px;
}

/* Slot tiles */
.slot-tile {
  border:1px solid var(--line); border-radius:12px; padding:14px 12px; text-align:center;
  background:#fff; transition: all .15s ease;
}
.slot-tile.slot-available  { border-color: var(--clinic-200); background: var(--clinic-50); color: var(--clinic-800); }
.slot-tile.slot-partial    { border-color: #ffdf7d; background: #fffbe6; color: #826600; }
.slot-tile.slot-full       { border-color: #f1b0b7; background: #fdecee; color: #842029; }
.slot-tile.slot-pick { cursor:pointer; user-select:none; }
.slot-tile.slot-pick:hover:not(.slot-full) {
  border-color: var(--clinic-500); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31,138,112,.18);
}
.btn-check:checked + .slot-tile.slot-pick {
  background: var(--clinic-500); color:#fff; border-color: var(--clinic-700);
}
.btn-check:disabled + .slot-tile.slot-pick { cursor: not-allowed; opacity: .85; }

/* Empty / misc */
.empty-state { border-radius: 14px; }

/* Print helpers */
@media print {
  .navbar, .footer-app, .btn { display: none !important; }
  .container { max-width: 100% !important; }
}

/* Mobile spacing */
@media (max-width: 575.98px) {
  .hero-banner { padding: 20px 18px; border-radius: 14px; }
  .stat-value { font-size: 1.4rem; }
}