/* Target Path: style.css */
/* เขียนโค้ดจาก agent version: .agents-3.5 */

/* -------------------------------------------------------------
 * 🎨 Barber Queue Modern Minimalist & Organic Asymmetric Design
 * ------------------------------------------------------------- */

/* 🌌 1. Design Tokens & Root Variables */
:root {
  --bg-main: #f9f6f0;         /* ครีม/เบจ สว่างธรรมชาติ */
  --bg-card: #ffffff;         /* ขาวบริสุทธิ์ */
  --bg-input: #fcfbfa;        /* ขาวนวล */
  --color-primary: #1b3d2f;    /* เขียวป่าลึกพรีเมียม */
  --color-primary-hover: #132c22;
  --color-accent: #c29d5b;     /* สีทองเมทัลลิก/เบจทองประกาย */
  --color-success: #2e7d32;    /* เขียวสว่างสำหรับการจอง */
  --color-success-bg: #e8f5e9; /* พื้นเขียวสล๊อตว่าง */
  --color-danger: #b71c1c;     /* แดงสำหรับการยกเลิก */
  --color-danger-bg: #ffebee;
  --color-text-main: #2b332f;  /* สีข้อความหลักเทาเข้มปนเขียว */
  --color-text-muted: #6e7974; /* สีข้อความรอง */
  --color-border: #eae3d8;     /* เส้นขอบสีเบจอ่อน */
  --font-main: 'Noto Sans Thai', 'Outfit', sans-serif;
  --shadow-organic: 0 12px 30px rgba(27, 61, 47, 0.04), 0 4px 12px rgba(0, 0, 0, 0.015);
  --shadow-hover: 0 16px 36px rgba(27, 61, 47, 0.08);
}

/* 🧼 2. Reset & General Standards */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-main);
  color: var(--color-text-main);
  font-size: 16px; /* กฎข้อ 66: Font >= 16px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ลบ Scrollbar ดิบ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 10px;
}

/* 🌌 3. Single Page Application Layout */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 480px; /* จำกัดความกว้างสไตล์ Mobile-First Screen */
  margin: 0 auto;
  background-color: var(--bg-main);
  position: relative;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
}

/* 🏠 Header (แถบบน) */
.app-header {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 8px; /* Organic Intentional Asymmetry: โค้งซ้ายขวาไม่เท่ากัน */
  box-shadow: 0 4px 20px rgba(27, 61, 47, 0.15);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  font-size: 24px;
  color: var(--color-accent);
}

.app-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* สถานะแอดมินหรือผู้ใช้ */
.user-badge {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-badge {
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
}

/* 🖥️ Main Content Body */
.app-content {
  flex: 1;
  padding: 24px 20px 100px 20px; /* ด้านล่างเว้นพื้นที่ให้ Bottom Nav */
  overflow-y: auto;
}

.content-view {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.content-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-intro {
  margin-bottom: 24px;
  /* Intentional Asymmetry: หัวข้อชิดซ้าย เยื้องและมีเส้นประดับด้านขวา */
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
}

.view-intro h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.view-intro p {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* 🧱 4. Premium Cards (Organic Design) */
.detail-card {
  background-color: var(--bg-card);
  border-radius: 28px 12px 24px 16px; /* Organic: มุมโค้งไม่เท่ากัน เพื่อความพรีเมียม */
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-organic);
  border: 1px solid rgba(234, 227, 216, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* 📝 5. Premium Form Elements */
.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.required-label {
  color: var(--color-danger);
  font-size: 12px;
  font-weight: normal;
}

.input-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: -6px;
  margin-bottom: 12px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background-color: var(--bg-input);
  font-family: var(--font-main);
  font-size: 16px; /* กฎข้อ 66 */
  color: var(--color-text-main);
  outline: none;
  transition: all 0.25s ease;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 61, 47, 0.08);
  background-color: #ffffff;
}

/* จัดรูปแบบปุ่มปฏิทินในตัวรับข้อมูล */
.date-input-wrapper {
  position: relative;
  display: flex;
}

.date-input-wrapper .form-control {
  padding-right: 48px;
  cursor: pointer;
}

.calendar-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-primary);
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.calendar-btn:hover {
  background-color: rgba(27, 61, 47, 0.05);
}

.date-input-native {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  opacity: 0; /* ซ่อน native calendar ไว้เบื้องหลัง (ตามกฎข้อ 23) */
  cursor: pointer;
  z-index: 2;
}

/* 📅 6. Time Slots (Grid System) */
.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.time-slot-btn {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: 12px 4px;
  border-radius: 12px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px; /* กฎข้อ 69: ปุ่มโมบาย >= 44px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-slot-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background-color: rgba(27, 61, 47, 0.03);
}

/* รอบเวลาที่ถูกเลือก */
.time-slot-btn.selected {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(27, 61, 47, 0.2);
}

/* รอบเวลาที่ไม่ว่าง/ถูกจอง */
.time-slot-btn.booked {
  background-color: #f1ebd9;
  color: #9c9586;
  border-color: #e2dbcd;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* รอบเวลาที่โดนช่างปิดสล็อต */
.time-slot-btn.blocked {
  background-color: var(--color-danger-bg);
  color: #a87e7e;
  border-color: #f3d4d4;
  cursor: not-allowed;
  position: relative;
}

.time-slot-btn.blocked::after {
  content: "ปิด";
  position: absolute;
  bottom: 2px;
  font-size: 8px;
  font-weight: normal;
  text-decoration: none;
}

/* 🛠️ 7. Admin Dashboard Slot Grid */
.admin-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.admin-slot-toggle-btn {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid #c8e6c9;
  padding: 12px 4px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admin-slot-toggle-btn.is-blocked {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: #ffcdd2;
}

.admin-slot-toggle-btn.is-booked-by-customer {
  background-color: #eae3d8;
  color: #5c554a;
  border-color: #dbd2c2;
  cursor: not-allowed;
}

.slot-status-label {
  font-size: 9px;
  font-weight: normal;
  margin-top: 2px;
}

/* 🚨 8. Alert / Feedbacks */
.error-feedback {
  color: var(--color-danger);
  font-size: 13px;
  display: block;
  margin-top: 5px;
  font-weight: 500;
}

.no-data-alert {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--bg-card);
  border-radius: 20px;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.no-data-alert i {
  font-size: 36px;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* 📋 9. Bookings Lists & Cards (Customer / Admin views) */
.bookings-list, .admin-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking-item-card {
  background-color: var(--bg-card);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-organic);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease;
}

/* ตกแต่งแถบสีสถานะที่ขอบการ์ดแบบ Organic Asymmetric */
.booking-item-card::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 4px;
  height: 50%;
  border-radius: 0 4px 4px 0;
  background-color: var(--color-accent);
}

.booking-item-card.status-booked::before {
  background-color: var(--color-primary);
}

.booking-item-card.status-done::before {
  background-color: var(--color-success);
}

.booking-item-card.status-cancelled::before {
  background-color: var(--color-danger);
}

.booking-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.booking-time-badge {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.booking-status-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

.status-badge-booked {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge-done {
  background-color: #e0f2f1;
  color: #00796b;
}

.status-badge-cancelled {
  background-color: #ffebee;
  color: #c62828;
}

.booking-card-body p {
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-card-body p i {
  color: var(--color-accent);
  width: 16px;
  text-align: center;
}

.booking-id-tag {
  font-size: 12px;
  background-color: var(--bg-main);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
}

/* ⚙️ Textarea auto-expand & scroll standard as per rules */
textarea.form-control {
  resize: none;
  overflow-y: auto;
  max-height: 200px; /* กฎข้อ 10: บังคับใส่ CSS max-height: 200px */
}

/* 🖱️ 10. Buttons Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-size: 16px; /* กฎข้อ 66: Font >= 16px */
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  width: auto;
  text-align: center;
  min-height: 48px; /* กฎข้อ 69: ปุ่มโมบาย >= 44px */
  padding: 10px 20px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.btn-danger {
  background-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger-light {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.btn-danger-light:hover {
  background-color: #ffcdd2;
}

.btn-sm {
  min-height: 38px;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 10px;
}

.btn:disabled {
  background-color: #d8d4cd;
  color: #9c9891;
  cursor: not-allowed;
}

/* 🧭 11. Bottom Navigation UI */
.app-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background-color: #ffffff;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 24px rgba(27, 61, 47, 0.05);
}

.nav-btn {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 500;
  height: 100%;
}

.nav-btn i {
  font-size: 20px;
}

.nav-btn:hover {
  color: var(--color-primary);
}

.nav-btn.active {
  color: var(--color-primary);
  font-weight: 700;
  position: relative;
}

/* ขีดล่างเล็กๆ เพื่อความพรีเมียมแบบ Asymmetric */
.nav-btn.active::after {
  content: "";
  position: absolute;
  bottom: 8px;
  width: 14px;
  height: 3px;
  border-radius: 10px;
  background-color: var(--color-accent);
}

/* 🔒 12. Authentication View PIN box style */
.admin-login-card {
  text-align: center;
  padding: 40px 24px;
}

.admin-login-header i {
  font-size: 40px;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.admin-login-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.admin-login-header p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.pin-input {
  text-align: center;
  letter-spacing: 12px;
  font-size: 22px;
  font-weight: bold;
}

.admin-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border);
}

.admin-dashboard-header h2 {
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 700;
}

.admin-dashboard-header p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-filter-card {
  padding: 16px 20px;
}

/* ☠️ 13. Skeleton Loader Animation */
.slots-skeleton-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.skeleton-slot {
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eae3d8 25%, #f6f1eb 50%, #eae3d8 75%);
  background-size: 200% 100%;
  animation: loading-animation 1.5s infinite;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-card {
  height: 120px;
  border-radius: 20px;
  background: linear-gradient(90deg, #eae3d8 25%, #f6f1eb 50%, #eae3d8 75%);
  background-size: 200% 100%;
  animation: loading-animation 1.5s infinite;
}

@keyframes loading-animation {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* SweetAlert Custom styling override เพื่อคุมธีมร้านตัดผม */
.swal2-popup {
  border-radius: 24px !important;
  font-family: var(--font-main) !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--color-primary) !important;
  border-radius: 14px !important;
}

.swal2-styled.swal2-cancel {
  border-radius: 14px !important;
}