/* Pawpular Palace V220 — contained, responsive grid.
   All booking and drag/reschedule handlers remain in their original scripts. */
:root{--v220-olive:#203d32;--v220-olive-light:#315746;--v220-cream:#faf9f5;--v220-gold:#caa45c;--v220-border:#e4e8e2}
body.pp-portal-active #workspace:has(.pp-cal-head){
  box-sizing:border-box!important;display:block!important;min-width:0!important;
  width:100%!important;max-width:100%!important;overflow-x:clip!important
}
#workspace .pp-cal-head{
  min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  margin-bottom:14px!important;padding:20px!important;
  background:#fff!important;border:1px solid var(--v220-border)!important;
  border-radius:18px!important;box-shadow:0 4px 18px rgba(26,55,41,.035)!important
}
#workspace .pp-cal-head .pp-cal-head-row{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:12px!important
}
#workspace .pp-cal-heading{min-width:0!important;flex:1 1 230px}
#workspace .pp-cal-heading h2{
  color:var(--v220-olive)!important;font-size:clamp(23px,2.4vw,28px)!important;
  letter-spacing:-.035em!important;line-height:1.18!important;margin-bottom:6px!important
}
#workspace .pp-cal-heading .muted{font-size:13px!important;line-height:1.55!important;color:#68796f!important}
#workspace .pp-cal-range-switcher{
  display:flex!important;gap:4px!important;padding:4px!important;
  width:max-content;max-width:100%!important;margin:16px 0 12px!important;
  border-radius:12px!important;background:#f3f5f1!important;border:1px solid #e5e9e3!important
}
#workspace .pp-cal-range-switcher .btn{
  border-radius:9px!important;border:0!important;min-height:39px!important;min-width:70px!important;
  font-weight:750!important;box-shadow:none!important
}
#workspace .pp-cal-range-switcher .btn.dark,
#workspace .pp-cal-source-switcher .btn.dark{
  color:#fff!important;background:var(--v220-olive)!important
}
#workspace .pp-cal-head .pp-cal-nav{
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;
  gap:10px!important;width:100%!important;padding-top:12px!important;
  border-top:1px solid #eff0ec!important;box-sizing:border-box!important
}
#workspace .pp-cal-nav .btn{min-height:40px!important;border-radius:10px!important}
#workspace .pp-cal-range-title{
  color:var(--v220-olive)!important;font-weight:750!important;
  font-size:15px!important;overflow-wrap:anywhere;min-width:0!important
}
#workspace .pp-cal-nav-secondary{display:flex!important;gap:8px!important;flex-wrap:wrap!important}

/* Day view: authentic rows, compact booking cards, unobstructed drag targets. */
#workspace.pp-v220-calendar-workspace .pp-cal-day-timeline{
  padding:0!important;margin:0 0 18px!important;min-width:0!important;
  border:1px solid var(--v220-border)!important;border-radius:17px!important;
  background:#fff!important;overflow:hidden!important
}
#workspace .pp-cal-day-timeline > .muted{
  margin:0!important;padding:14px 17px!important;background:#fafbf8!important;
  border-bottom:1px solid var(--v220-border)!important;font-size:12px!important;
  line-height:1.55!important;overflow-wrap:anywhere!important
}
#workspace .pp-cal-day-timeline > .stack{gap:0!important}
#workspace .pp-cal-day-timeline .pp-v136-slot-row{
  box-sizing:border-box!important;min-height:88px!important;margin:0!important;padding:0!important;
  border-radius:0!important;border:0!important;border-bottom:1px solid #e8e9e5!important;
  border-left:0!important;background:#fff!important;box-shadow:none!important
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row:nth-child(even){background:#fafbf9!important}
#workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title{
  display:grid!important;grid-template-columns:80px minmax(0,1fr)!important;
  min-height:88px!important;align-items:stretch!important;gap:0!important;margin:0!important
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title>b{
  display:flex!important;align-items:flex-start!important;justify-content:center!important;
  background:#f3f5f2!important;border-right:1px solid #e7ebe6!important;
  padding:13px 3px!important;color:#64746c!important;font-size:12px!important;
  font-weight:800!important;font-variant-numeric:tabular-nums
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title>span{
  display:block!important;min-width:0!important;padding:8px!important;overflow-wrap:anywhere!important
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row.is-available .section-title>span{
  display:flex!important;align-items:center!important;color:#65846c!important;
  font-size:12px!important;font-weight:600!important
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row.pp-v136-open-slot:hover{
  background:#ecf5eb!important
}
#workspace .pp-cal-day-timeline .pp-v136-slot-row.pp-v202-target{
  background:#dceccd!important;outline:2px dashed #698b68!important;outline-offset:-3px!important
}
#workspace .pp-v220-ongoing{
  display:inline-flex!important;align-items:center!important;min-height:36px;
  padding:6px 13px!important;color:#7b8a80!important;font-size:12px!important;
  border-left:3px solid #bfccbd!important;background:#f5f7f3!important;
  border-radius:0 9px 9px 0!important
}

/* Cards retain onclick, onkeydown, tel links and drag selectors. */
#workspace .pp-cal-appointment{
  box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
  background:#fff!important;border:1px solid #dce4db!important;
  border-left:4px solid #70967a!important;border-radius:10px!important;
  overflow:hidden!important;box-shadow:0 2px 8px rgba(25,49,34,.055)!important;
  cursor:grab!important
}
#workspace .pp-cal-appointment:active{cursor:grabbing!important}
#workspace .pp-cal-appointment:focus-visible,
#workspace .pp-v220-day-tab:focus-visible{outline:3px solid #a5bf91!important;outline-offset:1px!important}
#workspace .pp-cal-appt-top{
  background:var(--v220-olive)!important;color:#fff!important;display:flex!important;
  gap:7px!important;align-items:center!important;justify-content:space-between!important;
  padding:9px 12px!important;flex-wrap:wrap!important;font-size:12px!important
}
#workspace .pp-cal-appt-top strong{
  color:#d7edcb!important;font-size:11px!important;font-weight:800!important;text-transform:capitalize!important
}
#workspace .pp-cal-appt-content{
  display:flex!important;flex-direction:column!important;gap:5px!important;
  color:#51665a!important;font-size:12px!important;padding:11px 12px!important;
  min-width:0!important;overflow-wrap:anywhere!important
}
#workspace .pp-cal-appt-content>b{
  color:#1c392c!important;font-size:16px!important;line-height:1.25!important;font-weight:800!important
}
#workspace .pp-cal-appt-actions{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;margin-top:6px!important;padding-top:8px!important;
  color:#315b42!important;font-weight:750!important;font-size:12px!important;
  border-top:1px solid #edf0eb!important;flex-wrap:wrap!important
}
#workspace .pp-cal-card-call{
  min-height:37px!important;display:inline-flex!important;align-items:center!important;
  padding:7px 13px!important;background:#e7f0e7!important;border:1px solid #c7dcca!important;
  border-radius:8px!important;color:#1c4633!important;font-size:12px!important;text-decoration:none!important
}

/* Week view: seven contained desktop columns, never expand #workspace itself. */
#workspace .pp-v220-week-shell{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  min-width:0!important;overflow:hidden!important;margin:0 0 16px!important;
  border:1px solid #e2e7df!important;border-radius:16px!important;
  background:#f7f9f6!important;padding:10px!important
}
#workspace .pp-v220-week-tabs{display:none!important}
#workspace .pp-v220-week-grid{
  display:grid!important;grid-template-columns:repeat(7,minmax(180px,1fr))!important;
  align-items:stretch!important;gap:8px!important;width:100%!important;
  min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
  padding:2px 0 8px!important;scrollbar-width:thin;box-sizing:border-box!important
}
#workspace .pp-v220-week-panel{
  display:block!important;min-width:0!important;max-width:none!important;
  height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;
  background:#fff!important;border:1px solid #e3e7e1!important;border-radius:12px!important;
  box-shadow:0 2px 6px rgba(25,49,34,.035)!important;overflow:hidden!important
}
#workspace .pp-v220-week-panel .pp-v220-day-head{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  gap:6px!important;margin:0!important;padding:11px!important;
  background:#f9faf7!important;border-bottom:1px solid #e7ebe4!important
}
#workspace .pp-v220-week-panel .pp-v220-day-head h3{
  font-size:14px!important;line-height:1.3!important;color:var(--v220-olive)!important;margin:0!important
}
#workspace .pp-v220-week-panel .pp-v220-day-head .muted{
  font-size:11px!important;line-height:1.5!important;white-space:normal!important;color:#65766c!important
}
#workspace .pp-v220-week-panel .pp-cal-appointment{
  display:block!important;margin:10px!important;max-width:calc(100% - 20px)!important
}
#workspace .pp-v220-week-panel .pp-cal-appt-content>b{font-size:14px!important}
#workspace .pp-v220-week-panel .pp-cal-appt-content{font-size:12px!important;padding:9px!important}
#workspace .pp-v220-week-panel .pp-cal-appt-top{padding:7px 8px!important}
#workspace .pp-v220-week-panel>.muted{padding:15px!important;font-size:12px!important}
#workspace .pp-v220-week-panel>.btn{margin:10px!important}

/* Month view: calendar cells fit a phone; no 644px forced minimum. */
#workspace .pp-v220-month-days{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;padding:0 0 7px!important;min-width:0!important
}
#workspace .pp-v220-month-days>span{
  display:block!important;text-align:center!important;font-weight:800!important;
  font-size:11px!important;color:#708176!important
}
#workspace .pp-v220-month-grid{
  box-sizing:border-box!important;width:100%!important;min-width:0!important;
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;overflow:visible!important
}
#workspace .pp-v220-month-grid button.item{
  box-sizing:border-box!important;width:100%!important;min-width:0!important;
  min-height:83px!important;padding:6px!important;border-radius:9px!important;
  border-top:1px solid #e4e8e1!important;border-right:1px solid #e4e8e1!important;
  border-bottom:1px solid #e4e8e1!important;background:#fffdf9!important;
  font-size:12px!important;line-height:1.35!important;overflow:hidden!important
}
#workspace .pp-v220-month-grid button.item .muted{font-size:11px!important;line-height:1.3!important}
#workspace .pp-v220-month-grid button.item:hover{background:#e9f2e8!important}

/* Compact phone/tablet view: seven-day strip + one full-width day's cards. */
@media(max-width:740px){
  body.pp-portal-active #workspace:has(.pp-cal-head){padding-left:12px!important;padding-right:12px!important}
  #workspace .pp-cal-head{padding:14px!important}
  #workspace .pp-cal-heading h2{font-size:22px!important}
  #workspace .pp-cal-head .pp-cal-head-row{gap:7px!important}
  #workspace .pp-cal-range-switcher{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}
  #workspace .pp-cal-range-switcher .btn{min-width:0!important}
  #workspace .pp-cal-head .pp-cal-nav{
    display:grid!important;grid-template-columns:43px minmax(0,1fr) 43px!important;
    gap:7px!important;align-items:center!important
  }
  #workspace .pp-cal-nav>.pp-cal-prev{grid-column:1!important;grid-row:1!important;min-width:0!important}
  #workspace .pp-cal-nav>.pp-cal-next{grid-column:3!important;grid-row:1!important;min-width:0!important}
  #workspace .pp-cal-nav>.pp-cal-range-title{
    grid-column:2!important;grid-row:1!important;text-align:center!important;
    font-size:12px!important;line-height:1.4!important
  }
  #workspace .pp-cal-nav>.pp-cal-nav-secondary{
    grid-column:1/-1!important;grid-row:2!important;justify-content:center!important;
    margin-top:4px!important
  }
  #workspace .pp-cal-nav .pp-cal-btn-label{display:none!important}
  #workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title{
    grid-template-columns:57px minmax(0,1fr)!important
  }
  #workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title>b{
    font-size:10px!important;padding:12px 2px!important
  }
  #workspace .pp-cal-day-timeline .pp-v136-slot-row .section-title>span{padding:6px!important}
  #workspace .pp-cal-appt-top{padding:8px!important}
  #workspace .pp-cal-appt-content{padding:9px!important}
  #workspace .pp-cal-appt-content>b{font-size:15px!important}
  #workspace .pp-v220-week-shell{padding:9px!important}
  #workspace .pp-v220-week-tabs{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    display:grid!important;grid-template-columns:repeat(7,minmax(68px,1fr))!important;
    gap:5px!important;overflow-x:auto!important;scrollbar-width:thin!important;
    padding:0 0 10px!important
  }
  #workspace .pp-v220-day-tab{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:3px!important;justify-content:center!important;
    border-radius:10px!important;border:1px solid #dbe4d8!important;
    background:#fff!important;color:#607469!important;min-height:66px!important;
    padding:5px 3px!important;cursor:pointer!important
  }
  #workspace .pp-v220-day-tab span{font-size:11px!important;font-weight:750!important}
  #workspace .pp-v220-day-tab strong{font-size:18px!important;color:#244733!important}
  #workspace .pp-v220-day-tab small{font-size:10px!important;white-space:nowrap!important}
  #workspace .pp-v220-day-tab.is-selected{
    color:#fff!important;border-color:var(--v220-olive)!important;background:var(--v220-olive)!important
  }
  #workspace .pp-v220-day-tab.is-selected strong{color:#fff!important}
  #workspace .pp-v220-week-grid{
    display:block!important;min-width:0!important;overflow:visible!important;
    max-width:100%!important;padding:0!important
  }
  #workspace .pp-v220-week-panel{display:none!important;height:auto!important;width:100%!important}
  #workspace .pp-v220-week-panel.is-selected{display:block!important}
  #workspace .pp-v220-week-panel .pp-v220-day-head{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
  #workspace .pp-v220-week-panel .pp-v220-day-head h3{font-size:17px!important}
  #workspace .pp-v220-week-panel .pp-cal-appointment{margin:10px!important}
  #workspace .pp-v220-month-grid{gap:3px!important}
  #workspace .pp-v220-month-days{gap:3px!important}
  #workspace .pp-v220-month-grid button.item{
    min-height:57px!important;padding:4px 3px!important;border-radius:5px!important;
    font-size:11px!important
  }
  #workspace .pp-v220-month-grid button.item .muted{
    font-size:9px!important;white-space:normal!important;line-height:1.13!important
  }
  #workspace .pp-v220-month-days>span{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){#workspace .pp-v220-day-tab,#workspace .pp-cal-appointment{transition:none!important}}
/* V220 finish: usable calendar controls and legible monthly status markers. */
#workspace .pp-v220-week-panel .pp-v220-day-head .btn{
  border-radius:8px!important;border-color:#dae5d8!important;color:#315740!important;
  background:#fff!important;min-height:36px!important;font-size:12px!important
}
@media(max-width:740px){
  #workspace .pp-cal-head .pp-cal-nav > .pp-cal-nav-secondary{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important
  }
  #workspace .pp-cal-head .pp-cal-nav > .pp-cal-nav-secondary .btn{
    display:block!important;min-width:0!important;width:100%!important;margin:0!important
  }
  #workspace .pp-v220-month-grid button.item .muted{display:none!important}
  #workspace .pp-v220-month-grid button.item:after{
    box-sizing:border-box;display:flex;justify-content:center;align-items:center;
    width:17px;height:17px;margin:4px 0 0;border-radius:50%;
    line-height:1;font-size:11px;font-weight:800
  }
  #workspace .pp-v220-month-grid button.item[data-pp-v220-month-count]:after{
    content:attr(data-pp-v220-month-count);
    color:white;background:#315d45
  }
  #workspace .pp-v220-month-grid button.item[data-pp-v220-month-open]:after{
    content:'•';color:#779d80;background:#edf4ec;font-size:16px
  }
  #workspace .pp-v220-month-grid button.item[data-pp-v220-month-off]:after{
    content:'–';color:#a3aaa4;background:#f0f0ed
  }
}