/* Scope the wider workspace to the app, leaving public profile templates intact. */
.app-shell .upcoming-reminders { border: 2px solid #71924c; background: #f0f6e5; margin-bottom: 24px; }
.upcoming-reminders .heading { margin-bottom: 12px; flex-wrap: wrap; }
.upcoming-reminders .eyebrow { margin-top: 0; }
.upcoming-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 16px; }
.upcoming-item { min-width: 0; border-radius: 12px; padding: 18px; background: #ffffffb3; overflow-wrap: anywhere; }
.upcoming-item p { margin: 8px 0; }
.upcoming-countdown { color: #345414; }
.app-shell .upcoming-reminders.has-urgent { border-color: #b07722; background: #fff5df; }
:root[data-color-mode="dark"] .app-shell .upcoming-reminders { background: #263721; border-color: #779958; }
:root[data-color-mode="dark"] .upcoming-item { background: #172719; }
:root[data-color-mode="dark"] .upcoming-countdown { color: #c1e58f; }
:root[data-color-mode="dark"] .app-shell .upcoming-reminders.has-urgent { background: #3c301c; border-color: #c08c3c; }
.notifications-panel { margin-bottom: 24px; }
.notifications-panel .heading { flex-wrap: wrap; }
#notifications-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 16px; max-height: 620px; overflow: auto; }
.notification-item { min-width: 0; padding: 16px; border: 1px solid #87998b66; border-radius: 12px; overflow-wrap: anywhere; }
.notification-item.unread { border-inline-start: 4px solid #68933f; }
.notification-item .preserve { max-height: 150px; overflow: auto; }
.app-shell > header, .app-shell > main { max-width: 1800px; padding-inline: clamp(18px, 3vw, 56px); }
.app-shell > main { padding-top: 30px; }
.app-shell .auth-layout { max-width: 1200px; margin-inline: auto; }
.app-shell .workspace { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.workspace-group { display: contents; }
.app-shell .workspace > .workspace-group > .card { margin-bottom: 0; }
.profile-editor-layout, .profile-preview-panel { min-width: 0; }
.profile-preview-panel .template-preview-heading { margin-top: 0; }
.profile-preview-panel { margin-top: 24px; }
.app-shell #profile-form .template-fieldset { min-width: 0; }
.app-shell #profile-form > button { justify-self: start; align-self: start; }
.app-shell :is(#links-list, #services-list, #sections-list, #inbox, #daily, #bookings-list) {
  max-height: 420px; overflow: auto; scrollbar-gutter: stable; overflow-wrap: anywhere;
}
.app-shell :is(#links-list, #services-list, #sections-list, #inbox, #daily, #bookings-list):empty { display: none; }
.app-shell #qr-box { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 16px; align-items: center; }
.app-shell #qr-box img { grid-column: 1; grid-row: 1 / 3; width: 80px; height: 80px; }
.app-shell #qr-box h3, .app-shell #qr-box a { grid-column: 2; margin: 0; }
.booking-management-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.booking-management-grid > * { min-width: 0; }
.app-shell .booking-inbox .heading { flex-wrap: wrap; }
.app-shell .booking-inbox h3 { margin-top: 0; }
@media (min-width: 1000px) {
  .app-shell .workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "account account" "profile profile" "links services" "landing inbox" "landing analytics";
  }
  .app-shell #account { grid-area:account; }
  #profile-editor { grid-area: profile; }
  #links-editor { grid-area: links; }
  #services-editor { grid-area: services; }
  #landing-editor { grid-area: landing; }
  #inbox-panel { grid-area: inbox; }
  #analytics-panel { grid-area: analytics; }
  .profile-editor-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 32px; align-items: start; }
  .profile-preview-panel { margin-top: 0; }
  .app-shell .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .app-shell .workspace {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "account account account" "profile profile profile" "links services inbox" "landing landing analytics";
  }
  .profile-editor-layout { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
  .app-shell #profile-form { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px 28px; align-content: start; }
  .app-shell #profile-form > label { grid-column: 1; margin-top: 0; }
  .app-shell #profile-form > .template-fieldset { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .app-shell #profile-form > button { grid-column: 1; margin-top: 0; }
  .app-shell #profile-form .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .template-thumbnail { height: 80px; padding: 8px 14px; }
  .app-shell #landing-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .app-shell #landing-editor > h2, .app-shell #landing-editor > p { grid-column: 1 / -1; }
  .app-shell #sections-list { grid-column: 1; max-height: 680px; }
  .app-shell #section-form { grid-column: 2; }
}
.engagement-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.engagement-stats strong { display:block; font-size:26px; }
.engagement-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
.engagement-groups .day-row span { overflow-wrap:anywhere; min-width:0; }
.account-security { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.account-security-copy { min-width:0; overflow-wrap:anywhere; }
.account-security h2 { margin:0 0 8px; }
.account-security p { margin:4px 0; }
.account-security > button { flex-shrink:0; }
@media (max-width: 599px) {
  .engagement-stats,.engagement-groups { grid-template-columns:minmax(0,1fr); }
  .app-shell .stats { grid-template-columns: minmax(0, 1fr); }
  .app-shell .stats .card { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
  .app-shell .stats { margin-bottom: 24px; }
  .app-shell .stats strong { font-size: 28px; margin-top: 0; }
  .app-shell .heading h1 { font-size: 30px; }
  .app-shell > header { flex-wrap: wrap; gap: 12px; }
}