/* ── Variables ── */
:root {
  --pink:          #C2185B;
  --pink-dark:     #880E4F;
  --pink-light:    #FCE4EC;
  --pink-mid:      #F48FB1;
  --pink-grad:     linear-gradient(135deg, #B5174F 0%, #D81B60 50%, #E91E8C 100%);
  --white:         #FFFFFF;
  --surface:       #FFFBFD;
  --gray-50:       #FAFAFA;
  --gray-100:      #F5F5F5;
  --gray-200:      #EEEEEE;
  --gray-400:      #BDBDBD;
  --gray-600:      #757575;
  --gray-800:      #424242;
  --red:           #D32F2F;
  --green:         #2E7D32;
  --nav-h:         64px;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.06);
  --shadow:        0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-pink:   0 6px 24px rgba(194,24,91,.28);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface);
  color: var(--gray-800);
  min-height: 100dvh;
  padding-bottom: var(--nav-h);
}
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Layout ── */
.view { display: none; padding: 0 16px 24px; max-width: 480px; margin: 0 auto; }
.view.active { display: block; }

/* ── Bottom Nav ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--white);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 0;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nav-item.active { color: var(--pink); }
.nav-item.active::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 32px; height: 3px;
  background: var(--pink-grad);
  border-radius: 0 0 3px 3px;
}
.nav-item svg { width: 22px; height: 22px; stroke-width: 1.8; }

/* ── Dashboard Hero Header ── */
#view-dashboard .page-header {
  background: var(--pink-grad);
  margin: 0 -16px 20px;
  padding: 20px 20px 28px;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--shadow-pink);
}
#view-dashboard .page-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.3px;
}
#view-dashboard .page-header .text-muted {
  color: rgba(255,255,255,.80);
  font-size: 13px;
  font-weight: 500;
}
#view-dashboard .page-header button#settings-btn {
  color: rgba(255,255,255,.90);
  font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* ── Page Header (non-dashboard) ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--pink-dark);
  letter-spacing: -.2px;
}

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.035);
}
.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* ── Stat Chips (Reports) ── */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.stat-chip {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(0,0,0,.035);
}
.stat-chip .label { font-size: 11px; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-chip .value { font-size: 26px; font-weight: 700; color: var(--pink-dark); letter-spacing: -.5px; }

/* ── Appointment Row ── */
.appt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
.appt-item:last-child { border-bottom: none; }
.appt-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  min-width: 44px;
}
.appt-info { flex: 1; }
.appt-info .name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.appt-info .service { font-size: 13px; color: var(--gray-600); font-weight: 400; }
.appt-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .2px;
}
.badge-scheduled { background: #FFF3E0; color: #BF360C; }
.badge-completed  { background: #E8F5E9; color: #1B5E20; }
.badge-cancelled  { background: var(--gray-100); color: var(--gray-600); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: none;
  font-size: 15px;
  font-weight: 600;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  letter-spacing: -.1px;
}
.btn:active { transform: scale(.96); opacity: .88; }
.btn-primary {
  background: var(--pink-grad);
  color: var(--white);
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(194,24,91,.35); }
.btn-secondary { background: var(--gray-100); color: var(--gray-800); }
.btn-danger { background: var(--red); color: var(--white); }
.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-full { width: 100%; }

/* ── FAB ── */
.fab {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  right: 16px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--pink-grad);
  color: var(--white);
  border: none;
  font-size: 28px;
  line-height: 1;
  box-shadow: var(--shadow-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transition: transform .15s, box-shadow .15s;
}
.fab:active { transform: scale(.90); }

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--white);
  color: var(--gray-800);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-weight: 400;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(194,24,91,.10);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.form-actions .btn { flex: 1; }

/* ── Search Bar ── */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0 14px;
  margin-bottom: 14px;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.04);
}
.search-bar svg { color: var(--gray-400); flex-shrink: 0; width: 18px; height: 18px; }
.search-bar input {
  border: none;
  outline: none;
  font-size: 15px;
  padding: 13px 0;
  flex: 1;
  background: transparent;
  font-weight: 400;
}

/* ── Client List ── */
.client-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
}
.client-item:last-child { border-bottom: none; }
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light), #F8BBD0);
  color: var(--pink-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.client-info { flex: 1; }
.client-info .name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.client-info .phone { font-size: 13px; color: var(--gray-600); font-weight: 400; }
.client-item .chevron { color: var(--gray-400); }

/* ── Inventory Cards ── */
.inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inv-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border: 1px solid rgba(0,0,0,.035);
}
.inv-card.low-stock { border: 2px solid var(--red); }
.inv-card .inv-name { font-size: 14px; font-weight: 600; margin-bottom: 3px; letter-spacing: -.1px; }
.inv-card .inv-cat { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; font-weight: 600; }
.inv-card .qty-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.qty-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-800);
  font-weight: 600;
  transition: background .12s;
}
.qty-btn:active { background: var(--gray-200); }
.qty-val { font-size: 20px; font-weight: 700; color: var(--pink-dark); }
.low-badge { font-size: 10px; background: #FFEBEE; color: var(--red); padding: 3px 8px; border-radius: 99px; font-weight: 700; display: inline-block; margin-top: 8px; letter-spacing: .3px; }

/* ── Date Picker Row ── */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.04);
}
.date-nav button {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--pink);
  padding: 4px 10px;
  font-weight: 700;
}
.date-nav .date-label { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }

/* ── Reports ── */
.toggle-row {
  display: flex;
  background: var(--gray-100);
  border-radius: 99px;
  padding: 4px;
  margin-bottom: 16px;
}
.toggle-btn {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  background: none;
  color: var(--gray-600);
  transition: background .2s, color .2s, box-shadow .2s;
}
.toggle-btn.active {
  background: var(--white);
  color: var(--pink-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { font-size: 12px; color: var(--gray-600); min-width: 70px; text-align: right; font-weight: 500; }
.bar-track { flex: 1; height: 18px; background: var(--gray-100); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--pink-grad); border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.bar-val { font-size: 12px; font-weight: 700; color: var(--pink-dark); min-width: 42px; }

/* ── Modal / Drawer ── */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.40);
  z-index: 200;
  align-items: flex-end;
  backdrop-filter: blur(2px);
}
.overlay.open { display: flex; }
.drawer {
  background: var(--white);
  width: 100%;
  max-height: 92dvh;
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  padding: 8px 16px 36px;
  animation: slideUp .28s cubic-bezier(.34,1.3,.64,1);
}
.drawer::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: var(--gray-200);
  border-radius: 99px;
  margin: 8px auto 16px;
}
@keyframes slideUp {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.drawer-title { font-size: 18px; font-weight: 700; color: var(--pink-dark); letter-spacing: -.2px; }
.close-btn {
  background: var(--gray-100);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600);
  font-weight: 600;
  transition: background .12s;
}
.close-btn:active { background: var(--gray-200); }

/* ── Empty State ── */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-400);
}
.empty .icon { font-size: 52px; margin-bottom: 12px; }
.empty p { font-size: 15px; font-weight: 500; }

/* ── Misc ── */
.divider { height: 1px; background: var(--gray-100); margin: 12px 0; }
.text-muted { color: var(--gray-600); font-size: 13px; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ── No-show badge ── */
.badge-no-show { background: #FFEBEE; color: var(--red); }

/* ── Visit chip on client row ── */
.visit-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  background: var(--pink-light);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  margin-left: 4px;
  letter-spacing: .2px;
}

/* ── Loyalty bar ── */
.loyalty-section { margin: 12px 0; }
.loyalty-label { font-size: 13px; color: var(--gray-600); margin-bottom: 6px; display: flex; justify-content: space-between; font-weight: 500; }
.loyalty-track { height: 10px; background: var(--gray-200); border-radius: 99px; overflow: hidden; }
.loyalty-fill { height: 100%; background: var(--pink-grad); border-radius: 99px; transition: width .5s; }
.loyalty-reward { font-size: 12px; color: var(--green); font-weight: 700; margin-top: 4px; }

/* ── Photo grid ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.photo-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
}
.photo-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.photo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--gray-400);
  background: var(--gray-50);
  font-size: 13px;
  color: var(--gray-600);
  cursor: pointer;
  font-weight: 500;
}
.photo-preview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.photo-preview-thumb {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 10px;
  position: relative;
}
.photo-preview-wrap { position: relative; }
.photo-remove-btn {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  border: none;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}

/* ── Lightbox ── */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 90dvh; border-radius: 10px; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,.15);
  border: none;
  color: white;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}

/* ── Services management ── */
.service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-100);
}
.service-row:last-child { border-bottom: none; }
.service-info { flex: 1; }
.service-info .svc-name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.service-info .svc-meta { font-size: 12px; color: var(--gray-600); margin-top: 2px; font-weight: 400; }
.service-actions { display: flex; gap: 6px; }

/* ── Settings overlay ── */
.settings-section { margin-bottom: 28px; }
.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 14px;
}

/* ── Booking request card ── */
.request-card {
  background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
  border: 1.5px solid #FFD54F;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(255,213,79,.20);
}
.request-card .req-icon { font-size: 24px; }
.request-card .req-info { flex: 1; }
.request-card .req-title { font-size: 14px; font-weight: 700; color: #BF360C; }
.request-card .req-sub { font-size: 12px; color: var(--gray-600); margin-top: 2px; font-weight: 500; }

/* ── Dashboard timeline ── */
.timeline-slot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-100);
}
.timeline-slot:last-child { border-bottom: none; }
.timeline-times { min-width: 56px; text-align: right; }
.timeline-times .t-start { font-size: 13px; font-weight: 700; color: var(--pink); }
.timeline-times .t-end { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.timeline-info { flex: 1; }
.timeline-info .t-name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.timeline-info .t-svc { font-size: 13px; color: var(--gray-600); margin-top: 1px; }

/* ── Reports lost revenue ── */
.lost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.lost-row:last-child { border-bottom: none; }

/* ── Book page (public) ── */
.book-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  background: var(--surface);
  min-height: 100dvh;
}
.book-header {
  text-align: center;
  margin-bottom: 28px;
  padding: 28px 20px 24px;
  background: var(--pink-grad);
  margin: -24px -16px 28px;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--shadow-pink);
}
.book-header .logo { font-size: 36px; }
.book-header h1 { font-size: 24px; font-weight: 800; color: var(--white); margin-top: 8px; letter-spacing: -.3px; }
.book-header p { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 6px; font-weight: 400; }
.book-success { text-align: center; padding: 48px 20px; }
.book-success .s-icon { font-size: 60px; margin-bottom: 16px; }
.book-success h2 { font-size: 22px; font-weight: 700; color: var(--pink-dark); letter-spacing: -.3px; }
.book-success p { font-size: 14px; color: var(--gray-600); margin-top: 8px; font-weight: 400; }