:root{
  --cream:#FFF8F3; --blush:#FBE9F0; --blush-2:#F5DCE5;
  --pink:#E8A4C0; --pink-deep:#D88AA8; --pink-soft:#FCEEF4;
  --mauve:#9C6F8A; --rose-gold:#C9A88B; --gold:#D4B996;
  --dark:#3D2533; --muted:#8B6E7A; --line:#F0DDE5;
  --sage:#A8C8A6; --warm:#E8C599; --sky:#B5D2E0;
  --surface:#FFFFFF; --bg:var(--cream); --text:var(--dark);
  /* iOS-style easing curves (Cupertino HIG-aligned) */
  --ease-ios:        cubic-bezier(0.32, 0.72, 0, 1);   /* sheet present */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);    /* quick out, slow settle */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);    /* dramatic, refined settle */
  --ease-press:      cubic-bezier(0.4, 0, 0.2, 1);     /* tap feedback */
}
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
/* ============== DARK MODE ============== */
body.dark{
  --cream:#1A1015; --blush:#2A1C24; --blush-2:#33232C;
  --pink:#D88AA8; --pink-deep:#E8A4C0; --pink-soft:#241820;
  --mauve:#C9A8BA; --rose-gold:#A88671;
  --dark:#F5E5EC; --muted:#A28E96; --line:#3A2A33;
  --surface:#231A20; --bg:#1A1015; --text:#F5E5EC;
}
body.dark .bg-white{background:var(--surface)!important}
body.dark .bg-cream{background:var(--bg)!important}
body.dark .bg-blush{background:var(--blush)!important}
body.dark .bg-pink-soft{background:var(--pink-soft)!important}
body.dark{background:var(--bg);color:var(--text)}
body.dark .text-dark{color:var(--text)}
body.dark .border-line{border-color:var(--line)}
body.dark .input{background:var(--surface);color:var(--text);border-color:var(--line)}
body.dark .modal{background:var(--surface)}
body.dark .mobile-bottom-nav{background:rgba(35,26,32,0.96)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;animation-iteration-count:1!important}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Noto Sans','Noto Sans Lao',sans-serif;background:var(--cream);color:var(--dark);min-height:100vh}
.lao{font-family:'Noto Sans Lao',sans-serif!important}
.serif{font-family:'Cormorant Garamond','Noto Serif Lao','Noto Sans Lao',serif;letter-spacing:.5px}
:lang(lo), [lang="lo"]{font-family:'Noto Sans Lao',sans-serif}
.material-symbols-outlined{font-family:'Material Symbols Outlined'!important;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;font-weight:normal!important;font-style:normal!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
[x-cloak]{display:none!important}
.shadow-pastel{box-shadow:0 4px 24px rgba(232,164,192,.12)}
.shadow-pastel-lg{box-shadow:0 12px 40px rgba(156,111,138,.15)}
.bg-cream{background:var(--cream)} .bg-blush{background:var(--blush)} .bg-pink-soft{background:var(--pink-soft)}
.text-pink-deep{color:var(--pink-deep)} .text-mauve{color:var(--mauve)} .text-muted{color:var(--muted)} .text-dark{color:var(--dark)}
.bg-pink{background:var(--pink)} .bg-pink-deep{background:var(--pink-deep)} .bg-mauve{background:var(--mauve)}
.border-line{border-color:var(--line)}
.btn-primary{background:linear-gradient(135deg,#E8A4C0 0%,#D88AA8 100%);color:white;padding:10px 20px;border-radius:14px;font-weight:600;border:none;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(216,138,168,.4)}
.btn-ghost{background:transparent;color:var(--mauve);padding:10px 16px;border-radius:14px;font-weight:600;border:1.5px solid var(--line);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{background:var(--blush);border-color:var(--pink)}
.kpi-card{background:white;border-radius:24px;padding:22px;border:1px solid var(--line);transition:all .2s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,164,192,.18)}
.sidebar-item{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;cursor:pointer;color:var(--muted);font-weight:500;transition:all .2s}
.sidebar-item:hover{background:var(--blush);color:var(--mauve)}
.sidebar-item.active{background:linear-gradient(135deg,var(--blush) 0%,var(--blush-2) 100%);color:var(--mauve);font-weight:600}
.sidebar-item.active::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3px;background:var(--pink-deep);border-radius:3px}
.tab{padding:8px 16px;border-radius:12px;font-weight:600;color:var(--muted);cursor:pointer;font-size:14px;white-space:nowrap;transition:all .2s}
.tab.active{background:var(--pink);color:white;box-shadow:0 4px 12px rgba(232,164,192,.4)}
.tab:not(.active):hover{background:var(--blush)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600}
.chip-scheduled{background:#FFF1DB;color:#A57833}
.chip-paid{background:#E5F1E2;color:#5A8A55}
.chip-walkin{background:#E1ECF3;color:#4A7993}
.chip-online{background:var(--blush);color:var(--mauve)}
.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(232,164,192,.4);border-radius:3px}
.scrollbar-thin::-webkit-scrollbar-track{background:transparent}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheetSlideDesktop{from{transform:translateY(20px) scale(0.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes toastSpring{0%{transform:translate(-50%,30px) scale(0.92);opacity:0}60%{transform:translate(-50%,-3px) scale(1.02);opacity:1}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes pillIn{from{transform:scaleY(0.3);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes staggerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes pop{0%{transform:scale(0.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes ripple{to{transform:scale(2.5);opacity:0}}

.fade-in{animation:fadeIn 380ms var(--ease-out-expo)}
.slide-up{animation:slideUp 350ms var(--ease-out-expo)}

/* Modal / sheet entrance */
.modal-backdrop{animation:backdropIn 250ms var(--ease-out-quart)}
.modal{animation:sheetSlideDesktop 380ms var(--ease-out-expo)}
@media(max-width:768px){
  .modal{animation:sheetSlideUp 420ms var(--ease-ios);transform-origin:bottom}
}

/* Generic press state — iOS button feedback */
button:not(:disabled), .service-tile, .kpi-card, .month-cell, .sidebar-item,
.mobile-nav-item, .tab, [role="button"], .cursor-pointer{
  transition:transform 200ms var(--ease-press), opacity 200ms var(--ease-press), background-color 200ms ease, border-color 200ms ease, box-shadow 220ms var(--ease-out-quart);
  -webkit-touch-callout:none;
}
button:not(:disabled):active, .service-tile:active, .kpi-card:active,
.month-cell:active, .sidebar-item:active, .mobile-nav-item:active,
.tab:active, [role="button"]:active{
  transform:scale(0.965);
  opacity:0.9;
}
.btn-primary:active{transform:scale(0.965) translateY(0)!important;box-shadow:0 4px 12px rgba(216,138,168,.25)!important}

/* Sidebar pill indicator slide-in */
.sidebar-item.active::before{animation:pillIn 380ms var(--ease-spring)}

/* Toggle: spring physics on the knob */
.toggle{transition:background 280ms var(--ease-out-quart)}
.toggle::after{transition:left 320ms var(--ease-spring), transform 200ms var(--ease-press), box-shadow 200ms ease}
.toggle:active::after{transform:scale(1.15)}

/* Mobile bottom-nav tap pop */
.mobile-nav-item.active .material-symbols-outlined{animation:pop 380ms var(--ease-spring)}

/* Stagger animation for lists — apply class to children */
.stagger-list > *{animation:staggerIn 420ms var(--ease-out-expo) backwards}
.stagger-list > *:nth-child(1){animation-delay:30ms}
.stagger-list > *:nth-child(2){animation-delay:60ms}
.stagger-list > *:nth-child(3){animation-delay:90ms}
.stagger-list > *:nth-child(4){animation-delay:120ms}
.stagger-list > *:nth-child(5){animation-delay:150ms}
.stagger-list > *:nth-child(6){animation-delay:180ms}
.stagger-list > *:nth-child(7){animation-delay:210ms}
.stagger-list > *:nth-child(8){animation-delay:240ms}
.stagger-list > *:nth-child(n+9){animation-delay:270ms}

/* FAB press */
.fab{transition:transform 220ms var(--ease-spring), box-shadow 220ms ease}
.fab:active{transform:scale(0.92)}

/* Service tile cart-toggle pop */
.service-tile.in-cart .material-symbols-outlined{animation:pop 360ms var(--ease-spring)}

/* Empty-state icon breathing */
.empty-icon{animation:pulseBreathe 3.6s ease-in-out infinite}

/* Chip/status transitions when changed */
.chip{transition:background 280ms ease, color 280ms ease}

/* Smooth chart redraws — Chart.js handles internally; this is the surface */
canvas{transition:opacity 200ms ease}

/* Form input focus — iOS-like glow ring */
.input{transition:border-color 200ms ease, background 200ms ease, box-shadow 240ms var(--ease-out-quart)}
.input:focus{outline:none;border-color:var(--pink-deep);background:white;box-shadow:0 0 0 4px rgba(216,138,168,.12)}

/* Visible focus for keyboard nav (a11y) */
button:focus-visible, .input:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--pink-deep);
  outline-offset:2px;
}

/* Native momentum scroll on iOS Safari */
.scrollbar-thin, main, .modal{-webkit-overflow-scrolling:touch}

/* Skeleton loading shimmer (use .skeleton class on placeholder boxes) */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.skeleton{background:linear-gradient(90deg,var(--blush),var(--pink-soft),var(--blush));background-size:200px 100%;background-repeat:no-repeat;animation:shimmer 1.4s infinite linear;border-radius:8px;color:transparent}

/* Working-hours overlay on calendar timeline */
.working-hours-bar{position:absolute;left:0;right:0;background:rgba(168,200,166,.1);border-left:2px solid var(--sage);pointer-events:none;border-radius:6px}

/* Drag-over highlight when dragging a booking onto a calendar slot */
.drag-over{background:var(--blush)!important;outline:2px dashed var(--pink-deep);outline-offset:-4px}
.dragging{opacity:0.5;transform:scale(0.96)}

/* Context menu (long-press) */
.context-menu{position:fixed;z-index:55;background:white;border-radius:14px;padding:6px;box-shadow:0 12px 40px rgba(61,37,51,.18);min-width:180px;animation:pop 220ms var(--ease-spring);transform-origin:top left}
.context-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:10px;text-align:left;font-size:13px;color:var(--dark);font-weight:500;border:none;background:transparent;cursor:pointer}
.context-menu button:hover{background:var(--blush)}
.context-menu button.danger{color:#C45050}

/* Pull-to-refresh indicator */
.ptr-indicator{position:fixed;top:-50px;left:50%;transform:translateX(-50%);z-index:30;width:40px;height:40px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.1);transition:top 220ms var(--ease-out-quart)}
.ptr-indicator.show{top:20px}
.ptr-indicator.refreshing .material-symbols-outlined{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============== PREMIUM DROPDOWN ============== */
.psel{position:relative;width:100%}
.psel-trigger{
  width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:12px;background:white;
  font-size:14px;color:var(--dark);cursor:pointer;
  transition:border-color 200ms ease, box-shadow 220ms var(--ease-out-quart), transform 200ms var(--ease-press);
  text-align:left;
}
.psel-trigger:hover{border-color:var(--pink)}
.psel-trigger:active{transform:scale(0.985)}
.psel.open .psel-trigger{border-color:var(--pink-deep);box-shadow:0 0 0 4px rgba(216,138,168,.12)}
.psel-trigger .ico{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;background:var(--pink)}
.psel-trigger .label{flex:1;font-weight:600;truncate:true;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel-trigger .chev{color:var(--muted);transition:transform 280ms var(--ease-out-quart)}
.psel.open .psel-trigger .chev{transform:rotate(180deg);color:var(--pink-deep)}
.psel-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:white;border:1px solid var(--line);border-radius:14px;
  padding:6px;box-shadow:0 16px 48px rgba(61,37,51,.16), 0 4px 12px rgba(61,37,51,.06);
  max-height:280px;overflow-y:auto;
  transform-origin:top;animation:dropDown 280ms var(--ease-out-expo);
}
.psel-menu-title{display:none}
@keyframes dropDown{from{opacity:0;transform:translateY(-8px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes psheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes psheetBackdrop{from{opacity:0}to{opacity:1}}

@media(max-width:768px){
  /* Mobile: dropdown becomes a bottom sheet with backdrop */
  .psel.open::before{
    content:'';position:fixed;inset:0;background:rgba(61,37,51,.42);backdrop-filter:blur(3px);z-index:48;
    animation:psheetBackdrop 240ms var(--ease-out-quart);
  }
  .psel-menu{
    position:fixed!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    border-radius:24px 24px 0 0;
    padding:8px 8px calc(20px + env(safe-area-inset-bottom));
    max-height:70vh;
    z-index:49;
    border:none;
    box-shadow:0 -10px 40px rgba(61,37,51,.18);
    animation:psheet 380ms var(--ease-ios);
    transform-origin:bottom;
  }
  .psel-menu::before{
    content:'';display:block;width:48px;height:5px;border-radius:999px;
    background:var(--line);margin:6px auto 12px;
  }
  .psel-menu-title{
    display:block;text-align:center;font-weight:700;color:var(--dark);
    font-size:14px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line);
  }
  .psel-item{padding:14px 12px;font-size:15px}
}
.psel-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  cursor:pointer;font-size:13px;color:var(--dark);font-weight:500;
  transition:background 180ms ease, transform 160ms var(--ease-press);
  border:none;background:transparent;width:100%;text-align:left;
}
.psel-item:hover{background:var(--pink-soft)}
.psel-item.selected{background:var(--blush);color:var(--mauve);font-weight:600}
.psel-item:active{transform:scale(0.98)}
.psel-item .ico{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white}
.psel-item .check{margin-left:auto;color:var(--pink-deep);font-size:18px}
.psel-search{padding:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.psel-search input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;outline:none}
.psel-search input:focus{border-color:var(--pink-deep)}
body.dark .psel-trigger,body.dark .psel-menu{background:var(--surface);color:var(--text)}

/* ============== PREMIUM CHECKBOX ============== */
.pchk{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.pchk input{position:absolute;opacity:0;pointer-events:none}
.pchk-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:white;display:flex;align-items:center;justify-content:center;transition:all 220ms var(--ease-out-quart);flex-shrink:0}
.pchk-box .check{color:white;font-size:14px;transform:scale(0);transition:transform 280ms var(--ease-spring)}
.pchk input:checked + .pchk-box{background:var(--pink-deep);border-color:var(--pink-deep)}
.pchk input:checked + .pchk-box .check{transform:scale(1)}
.pchk:hover .pchk-box{border-color:var(--pink)}
.pchk input:focus-visible + .pchk-box{box-shadow:0 0 0 3px rgba(216,138,168,.25)}

/* ============== PREMIUM SEGMENTED CONTROL ============== */
.pseg{display:inline-flex;background:var(--blush);border-radius:12px;padding:3px;gap:2px;position:relative}
.pseg button{padding:7px 14px;font-size:12px;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:9px;cursor:pointer;transition:color 200ms ease, transform 160ms var(--ease-press);position:relative;z-index:2}
.pseg button.active{color:var(--mauve)}
.pseg button:active{transform:scale(0.96)}
.pseg-thumb{position:absolute;top:3px;bottom:3px;background:white;border-radius:9px;box-shadow:0 2px 6px rgba(216,138,168,.18);transition:left 320ms var(--ease-spring), width 320ms var(--ease-spring);z-index:1}

/* ============== VIP / POPULAR BADGES ============== */
.vip-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;background:linear-gradient(135deg,#D4B996,#C9A88B);color:white;box-shadow:0 2px 8px rgba(201,168,139,.4)}
.vip-badge-gold{background:linear-gradient(135deg,#E8C599,#D4B996)}
.vip-badge-platinum{background:linear-gradient(135deg,#9C6F8A,#6B4860)}
.popular-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;background:var(--pink-deep);color:white}

/* ============== STATUS DOT (working now / offline) ============== */
.live-dot{width:8px;height:8px;border-radius:50%;background:#A8C8A6;box-shadow:0 0 0 3px rgba(168,200,166,.35);animation:livePulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(168,200,166,.35)}50%{box-shadow:0 0 0 6px rgba(168,200,166,.12)}}
.live-dot.off{background:var(--muted);box-shadow:0 0 0 3px rgba(139,110,122,.2);animation:none}

/* ============== INSIGHT CALLOUT ============== */
.insight-card{display:flex;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--pink-soft) 0%, var(--blush) 100%);border:1px solid var(--line)}
.insight-card .ico{width:36px;height:36px;border-radius:12px;background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--pink-deep)}

/* ============== DECORATIVE BRAND ARC (Dashboard hero) ============== */
.brand-arc{position:absolute;pointer-events:none;width:400px;height:400px;border-radius:50%;border:80px solid var(--blush);opacity:.4;filter:blur(0.5px)}

/* ============== PREMIUM CALENDAR ============== */
.cal-weekday{
  font-size:10px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
  text-align:center;padding:14px 4px;color:var(--mauve);
  background:linear-gradient(180deg, var(--blush) 0%, var(--pink-soft) 100%);
  border-bottom:1px solid var(--line);
}
.cal-weekday.weekend{color:var(--pink-deep)}

.month-cell{position:relative;cursor:pointer;transition:background 200ms ease, transform 220ms var(--ease-press)}
.month-cell.is-selected{
  background:linear-gradient(180deg, var(--pink-soft) 0%, var(--blush) 100%)!important;
  box-shadow:inset 0 0 0 2px var(--pink-deep);
}
.month-cell.is-today{
  background:linear-gradient(135deg, rgba(232,164,192,.18) 0%, rgba(216,138,168,.10) 100%);
}
.month-cell.is-today .month-cell-day{
  background:linear-gradient(135deg, var(--pink-deep), var(--mauve));
  color:white;border-radius:8px;padding:1px 6px;display:inline-block;
  box-shadow:0 4px 10px rgba(216,138,168,.35);
}
.month-cell.has-revenue::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, var(--pink), var(--pink-deep));
  border-radius:0 0 0 0;
}
.month-cell.high-revenue::after{height:5px;background:linear-gradient(90deg, var(--pink-deep), var(--mauve))}
.month-cell.is-filler{background:repeating-linear-gradient(45deg, var(--cream), var(--cream) 6px, transparent 6px, transparent 12px);opacity:0.5}

.cal-nav-btn{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  transition:all 220ms var(--ease-out-quart);
}
.cal-nav-btn:hover{background:var(--blush)}
.cal-nav-btn:active{transform:scale(0.92)}

.day-detail-hero{
  background:linear-gradient(135deg, var(--blush), var(--pink-soft));
  border-radius:18px;padding:14px 16px;margin:-4px -4px 12px;
}

.kanban-day{position:relative;transition:transform 240ms var(--ease-out-quart)}
.kanban-day.kanban-active{transform:translateY(-3px);box-shadow:0 12px 30px rgba(216,138,168,.25)}
.kanban-day.kanban-busy::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:4px;
  background:linear-gradient(90deg, var(--pink), var(--pink-deep), var(--mauve));
  border-radius:24px 24px 0 0;
}

/* ============== VIEW & MODAL TRANSITIONS ============== */
@keyframes viewIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes viewOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}
@keyframes sheetExit{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0.7}}
@keyframes sheetExitDesktop{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(20px) scale(0.97);opacity:0}}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@keyframes toastOut{from{transform:translate(-50%,0) scale(1);opacity:1}to{transform:translate(-50%,30px) scale(0.92);opacity:0}}

/* Calendar month/week navigation slide (applied via JS-set inline transition) */
.cal-grid-slide-out-l{animation:slideOutLeft 280ms var(--ease-out-quart) forwards}
.cal-grid-slide-in-r{animation:slideInRight 320ms var(--ease-out-expo)}
.cal-grid-slide-out-r{animation:slideOutRight 280ms var(--ease-out-quart) forwards}
.cal-grid-slide-in-l{animation:slideInLeft 320ms var(--ease-out-expo)}
@keyframes slideOutLeft{to{opacity:0;transform:translateX(-30px)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{to{opacity:0;transform:translateX(30px)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* New Booking step transitions */
.step-slide-fwd{animation:stepFwd 360ms var(--ease-out-expo)}
.step-slide-back{animation:stepBack 360ms var(--ease-out-expo)}
@keyframes stepFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes stepBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}

/* Status chip flip (paid/no-show/cancelled celebration) */
@keyframes chipFlip{0%{transform:scale(1)}50%{transform:scale(1.18) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
.chip.flip{animation:chipFlip 480ms var(--ease-spring)}

/* Booking row "just inserted" highlight */
@keyframes rowHighlight{0%,100%{background:transparent}30%{background:rgba(168,200,166,.25)}}
.row-highlight{animation:rowHighlight 1200ms ease-out}

/* Cart bar slide */
@keyframes cartIn{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes cartOut{from{transform:translateY(0);opacity:1}to{transform:translateY(120%);opacity:0}}
.cart-bar.visible{animation:cartIn 420ms var(--ease-spring)}

/* Long-press progress ring */
@keyframes lpRing{from{stroke-dashoffset:113}to{stroke-dashoffset:0}}
.lp-ring{position:fixed;width:48px;height:48px;pointer-events:none;z-index:53;transform:translate(-50%,-50%)}
.lp-ring circle{fill:none;stroke:var(--pink-deep);stroke-width:3;stroke-dasharray:113;stroke-dashoffset:113;transform:rotate(-90deg);transform-origin:center;animation:lpRing 500ms linear forwards}

/* Drag start lift + rotate */
.dragging{opacity:0.6;transform:scale(1.04) rotate(-1.5deg);box-shadow:0 16px 40px rgba(61,37,51,.25)!important;cursor:grabbing}

/* Cell ripple */
.cell-ripple{position:absolute;border-radius:50%;background:rgba(232,164,192,.4);pointer-events:none;animation:ripple 600ms var(--ease-out-quart) forwards}

/* List filter FLIP fade */
@keyframes listEnter{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.list-enter{animation:listEnter 320ms var(--ease-out-expo)}

/* Service tile hover lift */
.service-tile{transition:transform 220ms var(--ease-out-quart), border-color 220ms ease, background 220ms ease, box-shadow 220ms var(--ease-out-quart)}
.service-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(216,138,168,.18)}

/* Insight sparkle on the auto_awesome icon */
.insight-card .ico .material-symbols-outlined{animation:sparkle 4s ease-in-out infinite}
@keyframes sparkle{0%,100%{transform:rotate(0) scale(1);filter:drop-shadow(0 0 0 transparent)}25%{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 6px rgba(216,138,168,.6))}50%{transform:rotate(0) scale(1)}75%{transform:rotate(8deg) scale(1.08);filter:drop-shadow(0 0 6px rgba(216,138,168,.6))}}

/* VIP badge entry pulse (one-time on appear) */
@keyframes vipPulse{0%{transform:scale(0.6);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.vip-badge,.popular-badge{animation:vipPulse 540ms var(--ease-spring)}

/* Bottom sheet drag-to-dismiss support */
.modal.dragging-sheet{transition:none!important}

/* Confetti for booking confirmation success */
@keyframes confettiBurst{from{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(8);opacity:0}}
.confetti-burst{position:fixed;top:50%;left:50%;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--pink) 0%,transparent 70%);pointer-events:none;z-index:60;animation:confettiBurst 700ms ease-out forwards}

/* Range segmented sliding thumb (for Today/Week/Month) */
.range-seg{position:relative;display:inline-flex;background:var(--blush);border-radius:14px;padding:3px;gap:0}
.range-seg button{position:relative;z-index:2;padding:8px 16px;font-size:13px;font-weight:700;color:var(--muted);background:transparent;border:none;border-radius:11px;cursor:pointer;transition:color 200ms ease, transform 160ms var(--ease-press);white-space:nowrap}
.range-seg button.active{color:var(--mauve)}
.range-seg button:active{transform:scale(0.96)}
.range-seg-thumb{position:absolute;top:3px;bottom:3px;background:white;border-radius:11px;box-shadow:0 2px 8px rgba(216,138,168,.22);transition:left 360ms var(--ease-spring), width 360ms var(--ease-spring);z-index:1}

/* Skeleton in real use — for view-switch flash */
.view-loading{position:relative;min-height:200px}
.view-loading::before{content:'';position:absolute;inset:0;background:var(--cream);z-index:5;animation:viewLoadFade 600ms ease-out forwards;pointer-events:none}
@keyframes viewLoadFade{from{opacity:1}to{opacity:0}}

/* "Quiet day" hint with add affordance */
.quiet-day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 8px;text-align:center;border-radius:12px;
  background:repeating-linear-gradient(135deg, transparent, transparent 8px, var(--blush) 8px, var(--blush) 9px);
  color:var(--muted);font-size:11px;font-style:italic;
  transition:all 220ms ease;cursor:pointer;
}
.quiet-day:hover{background:var(--blush);color:var(--mauve);font-style:normal;font-weight:600}
.modal-backdrop{position:fixed;inset:0;background:rgba(61,37,51,.4);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal{background:white;border-radius:28px;max-width:560px;width:100%;max-height:90vh;overflow:auto;animation:slideUp .3s ease-out}
.modal-lg{max-width:900px}
@media(max-width:768px){
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{max-height:92vh;border-radius:28px 28px 0 0;width:100%;max-width:100%!important;padding:20px!important;padding-bottom:calc(20px + 80px)!important}
  .modal h3.serif{font-size:1.25rem!important}
  .modal .serif.text-2xl{font-size:1.5rem!important}
  .modal .serif.text-xl{font-size:1.125rem!important}
  .grip-handle{display:block!important}
}
/* Inputs: tight 8px radius creates visual contrast against 24-28px card containers */
.input{width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:8px;background:white;font-family:inherit;font-size:14px;color:var(--dark);transition:all .2s}
.input:focus{outline:none;border-color:var(--pink-deep);background:var(--pink-soft)}
.label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:.5px}
.avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:white;flex-shrink:0;font-size:14px}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-lg{width:56px;height:56px;font-size:18px}
.timeline-line{position:absolute;left:60px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blush),var(--line),var(--blush))}
.service-tile{background:white;border:1.5px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px}
.service-tile:hover{border-color:var(--pink);background:var(--pink-soft);transform:translateY(-2px)}
.service-tile.in-cart{border-color:var(--pink-deep);background:var(--blush);box-shadow:0 8px 20px rgba(216,138,168,.2)}
.role-pill{padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.role-manager{background:#FFF1DB;color:#A57833}
.role-reception{background:#E1ECF3;color:#4A7993}
.role-stylist{background:var(--blush);color:var(--mauve)}
.toggle{position:relative;width:44px;height:24px;background:var(--line);border-radius:999px;cursor:pointer;transition:all .2s}
.toggle.on{background:var(--pink-deep)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:white;border-radius:50%;transition:all .2s;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.toggle.on::after{left:22px}
@media(max-width:768px){
  .desktop-only{display:none!important}
  .mobile-bottom-nav{display:flex!important}
}
@media(min-width:769px){
  .mobile-only{display:none!important}
}
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.96);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line);padding:8px 4px;padding-bottom:max(8px,env(safe-area-inset-bottom));z-index:40;box-shadow:0 -4px 20px rgba(156,111,138,.08);will-change:transform}
.fab{position:fixed;right:18px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:35;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#E8A4C0,#9C6F8A);color:white;display:none;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(156,111,138,.4);border:none;cursor:pointer;transition:transform .2s}
.fab:active{transform:scale(.94)}
.cart-bar{position:fixed;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:35;background:white;border:1px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:0 12px 30px rgba(156,111,138,.18);display:none;align-items:center;gap:10px}
@media(max-width:768px){
  .fab.visible{display:flex}
  .cart-bar.visible{display:flex}
}
.mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);font-size:10px;font-weight:600;border-radius:10px;cursor:pointer;background:none;border:none}
.mobile-nav-item.active{color:var(--pink-deep)}
.mobile-nav-item.active .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 500}
.grip-handle{display:none}
@media(max-width:768px){
  .grip-handle{display:block!important;width:48px;height:5px;border-radius:999px;background:var(--line);margin:0 auto 12px}
}
/* ===== Generic table -> card pattern (mobile only) ===== */
.tbl-cards td.cell-header{padding:0}
@media(max-width:768px){
  .tbl-cards{display:block;width:100%}
  .tbl-cards thead{display:none}
  .tbl-cards tbody{display:block;width:100%}
  .tbl-cards tr{
    display:flex;flex-direction:column;gap:6px;
    background:white;border:1px solid var(--line);border-radius:20px;
    padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 10px rgba(232,164,192,.06);
  }
  .tbl-cards td{display:flex;justify-content:space-between;align-items:center;padding:4px 0!important;border:none!important;text-align:left;width:100%;white-space:normal!important}
  .tbl-cards td.cell-header{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)!important;padding-bottom:10px!important;margin-bottom:4px}
  .tbl-cards td[data-label]::before{
    content:attr(data-label);
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
    margin-right:12px;flex-shrink:0;
  }
  .tbl-cards td.cell-actions{justify-content:flex-end;border-top:1px solid var(--line)!important;padding-top:10px!important;margin-top:4px}
  /* Kanban stacking */
  .kanban-grid{grid-template-columns:1fr!important;min-width:0!important;gap:10px!important}
  .kanban-day{min-height:auto!important}
  .kanban-day .kanban-list{display:flex!important;flex-direction:column;gap:8px}
}
@media(max-width:768px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  main{padding-bottom:96px!important}
  .modal-backdrop{padding-bottom:0!important}
  /* Reduce header sizes for mobile */
  h1.serif{font-size:1.875rem!important;line-height:1.05!important}
  h1.serif.text-3xl{font-size:1.75rem!important}
  /* Italic name in dashboard greeting */
  h1.serif.italic{font-size:1.875rem!important}
  /* Tighter section spacing on mobile */
  section.fade-in{padding:18px 16px!important}
  /* KPI grid responsive */
  .kpi-card{padding:14px;border-radius:18px}
  .kpi-card .serif{font-size:1.25rem!important}
  /* Tabs scroll smoothly */
  .scrollbar-thin{scroll-behavior:smooth}
  /* Sidebar items in mobile drawer */
  .modal .sidebar-item{padding:14px 12px}
  /* Calendar month — compress cells on mobile */
  .month-cell{min-height:54px!important;padding:4px 3px!important}
  .month-cell .month-preview{display:none!important}
  .month-cell .month-count{display:flex!important}
  .month-cell .month-todaylabel{display:none!important}
  .month-cell-day{font-size:13px!important}
  /* Service tile padding tighter */
  .service-tile{padding:12px}
  /* Tables overflow-scroll already, ensure tap targets */
  table th, table td{white-space:nowrap}
  /* Cards generally use less padding */
  .bg-white.rounded-3xl.shadow-pastel{border-radius:22px}
  /* Charts canvas: contain height */
  canvas{max-width:100%!important}
  /* Eyebrow labels: ensure readable */
  .text-\[10px\], .text-\[11px\]{font-size:11px!important}
  /* Settings hero card */
  .lg\:col-span-2 > div > .relative > div.flex{flex-wrap:wrap}
  /* Heatmap: smaller cells */
  table.heatmap-table td > div{height:24px!important;font-size:9px!important}
  /* Stack filter bar items */
  .grid.sm\:grid-cols-2.lg\:grid-cols-5{grid-template-columns:1fr 1fr!important}
  .grid.sm\:grid-cols-2.lg\:grid-cols-5 > .flex.items-end{grid-column:span 2}
  /* Force avatar and headings to stay aligned */
  .modal .avatar-lg{width:48px!important;height:48px!important;font-size:16px!important}
  /* Reduce gap on grids on phones */
  .gap-5{gap:14px!important}
  .gap-4{gap:12px!important}
}