:root {
  --salon-pink: #d96c93;
  --salon-pink-soft: #fff0f6;
  --salon-plum: #7d4e68;
  --salon-plum-soft: #f5edf2;
  --salon-gold: #d8a85f;
  --salon-gold-soft: #fff7e8;
  --salon-green: #3da977;
  --salon-green-soft: #edf9f3;
}

body {
  background: linear-gradient(135deg, #fff7fb 0%, #fff1f6 45%, #fffaf2 100%);
}

.navbar.bg-dark {
  background: linear-gradient(90deg, var(--salon-plum), #a05c7a) !important;
}

.btn-primary {
  background: linear-gradient(90deg, var(--salon-pink), #c44d7e);
  border-color: #c44d7e;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(90deg, #c44d7e, #b13e6d);
  border-color: #b13e6d;
}

.btn-outline-primary {
  color: var(--salon-plum);
  border-color: #cfa1b5;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--salon-pink-soft);
  color: var(--salon-plum);
  border-color: #cfa1b5;
}

.card, .metric-card {
  border: 1px solid #f1d5e0;
}

.metric-card {
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(125,78,104,.08);
}

.metric-card-pink { background: linear-gradient(135deg, #ffffff 0%, var(--salon-pink-soft) 100%); }
.metric-card-gold { background: linear-gradient(135deg, #ffffff 0%, var(--salon-gold-soft) 100%); }
.metric-card-plum { background: linear-gradient(135deg, #ffffff 0%, var(--salon-plum-soft) 100%); }
.metric-card-green { background: linear-gradient(135deg, #ffffff 0%, var(--salon-green-soft) 100%); }

.metric-label {
  color: #7b6a74;
  font-size: .9rem;
  font-weight: 600;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #2f2430;
}

.appt-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f2d3df;
  background: #fff;
  flex: 0 0 56px;
}

.appt-photo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--salon-plum);
  background: linear-gradient(135deg, #f8dbe7, #f8e9cc);
  border: 3px solid #f2d3df;
  flex: 0 0 56px;
}

.appt-name { color: #2f2430; }
.appt-time-line { color: #6d5866; font-weight: 600; }

.appt-day-section { margin-bottom: .25rem; }

.appt-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 700;
  color: var(--salon-plum);
  padding: .55rem .85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff5f9 0%, #fff8ed 100%);
  border: 1px solid #f1d5e0;
}

.appt-day-header-today {
  background: linear-gradient(135deg, #ffe5ee 0%, #fff0f4 100%);
  border-color: #efb3c8;
}

.upcoming-card {
  background: linear-gradient(135deg, #ffffff 0%, #fff9fc 100%);
}

.upcoming-card-today {
  border-color: #efb3c8 !important;
  background: linear-gradient(135deg, #fff7fa 0%, #fff1f5 100%);
}

.upcoming-card-next {
  border: 2px solid #f0c25e !important;
  background: linear-gradient(135deg, #fffdf5 0%, #fff8e2 100%);
  box-shadow: 0 8px 20px rgba(216, 168, 95, 0.18);
}

.stylist-tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid transparent;
}

.stylist-tag-amy {
  background: linear-gradient(135deg, #ffe6f0 0%, #ffd6e8 100%);
  color: #a03267;
  border-color: #f0b7cf;
}

.stylist-tag-lauren {
  background: linear-gradient(135deg, #e8f0ff 0%, #d8e6ff 100%);
  color: #355fa8;
  border-color: #b6cdf7;
}

.stylist-tag-admin {
  background: linear-gradient(135deg, #f4ecff 0%, #e7d8ff 100%);
  color: #6b42a8;
  border-color: #cfbbf1;
}

.stylist-tag-default {
  background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
  color: #555;
  border-color: #d5d5d5;
}

.service-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.service-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  border-radius: 14px;
  border: 1px solid #efd4e0;
  background: linear-gradient(135deg, #fff8fb 0%, #fffdf7 100%);
  cursor: pointer;
}

.service-chip input[type="checkbox"] {
  margin: 0;
}

.service-chip-name {
  font-weight: 700;
  color: #5f4251;
}

.service-chip-time {
  font-size: .82rem;
  color: #7c6a75;
  background: #fff;
  border: 1px solid #eed6df;
  border-radius: 999px;
  padding: .15rem .5rem;
}

.service-total-box {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff2f7 0%, #fff8eb 100%);
  border: 1px solid #efd4e0;
  font-weight: 700;
  color: #6b4255;
}


.calendar-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: #5f5059;
}
.calendar-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.stylist-dot-amy { background: #d96c93; }
.stylist-dot-lauren { background: #6f95df; }
.stylist-dot-admin { background: #9d78d8; }
.stylist-dot-default { background: #9b9b9b; }

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.85rem;
}
.calendar-day-col {
  border: 1px solid #efd4e0;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdfd 0%, #fff8fb 100%);
  min-height: 280px;
  overflow: hidden;
}
.calendar-day-head {
  padding: 0.85rem;
  background: linear-gradient(135deg, #fff2f7 0%, #fff9ee 100%);
  border-bottom: 1px solid #efd4e0;
}
.calendar-day-name {
  font-weight: 800;
  color: #684958;
}
.calendar-day-date {
  font-size: 0.9rem;
  color: #7f6c76;
}
.calendar-day-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.calendar-event {
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
}
.calendar-event-time {
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.calendar-event-customer {
  font-weight: 700;
  line-height: 1.2;
}
.calendar-event-service,
.calendar-event-stylist {
  font-size: 0.84rem;
  opacity: 0.92;
}
.calendar-event-amy {
  background: linear-gradient(135deg, #ffe7f0 0%, #ffdcec 100%);
  border-color: #f1bbd0;
  color: #93315f;
}
.calendar-event-lauren {
  background: linear-gradient(135deg, #eaf1ff 0%, #deebff 100%);
  border-color: #bfd2f8;
  color: #345eaa;
}
.calendar-event-admin {
  background: linear-gradient(135deg, #f3edff 0%, #ebe2ff 100%);
  border-color: #d5c3f4;
  color: #6a47a1;
}
.calendar-event-default {
  background: linear-gradient(135deg, #f4f4f4 0%, #ececec 100%);
  border-color: #d6d6d6;
  color: #555;
}
.calendar-empty {
  color: #a08d97;
  font-size: 0.9rem;
  padding: 0.65rem 0.25rem;
}
.calendar-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.calendar-month-head-cell {
  text-align: center;
  font-weight: 800;
  color: #705362;
  padding: 0.45rem 0.25rem;
}
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
}
.calendar-month-cell {
  min-height: 150px;
  border: 1px solid #efd4e0;
  border-radius: 14px;
  padding: 0.55rem;
  background: #fff;
}
.calendar-out-month {
  opacity: 0.45;
}
.calendar-today-cell {
  background: linear-gradient(135deg, #fff7fa 0%, #fff3f8 100%);
  border-color: #eeb8ce;
}
.calendar-month-date {
  font-weight: 800;
  color: #684958;
  margin-bottom: 0.35rem;
}
.calendar-month-events {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.calendar-mini-event {
  border-radius: 10px;
  padding: 0.22rem 0.4rem;
  font-size: 0.76rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.calendar-mini-time {
  font-weight: 800;
}
.calendar-more {
  font-size: 0.75rem;
  color: #7a6771;
  padding: 0.2rem 0.1rem;
}
@media (max-width: 1200px) {
  .calendar-week-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .calendar-month-grid,
  .calendar-month-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Compact calendar sizing */
#calendarContainer {
  font-size: 0.9rem;
}
.calendar-week-grid {
  gap: 0.55rem !important;
}
.calendar-day-col {
  min-height: 200px !important;
  border-radius: 12px !important;
}
.calendar-day-head {
  padding: 0.55rem 0.65rem !important;
}
.calendar-day-body {
  padding: 0.5rem !important;
  gap: 0.4rem !important;
}
.calendar-event {
  padding: 0.45rem 0.55rem !important;
  border-radius: 10px !important;
}
.calendar-event-time {
  font-size: 0.74rem !important;
}
.calendar-event-customer {
  font-size: 0.82rem !important;
}
.calendar-event-service,
.calendar-event-stylist {
  font-size: 0.74rem !important;
}
.calendar-month-grid {
  gap: 0.4rem !important;
}
.calendar-month-cell {
  min-height: 110px !important;
  border-radius: 10px !important;
  padding: 0.4rem !important;
}
.calendar-month-date {
  margin-bottom: 0.2rem !important;
  font-size: 0.92rem !important;
}
.calendar-mini-event {
  font-size: 0.68rem !important;
  padding: 0.16rem 0.32rem !important;
}
.calendar-legend {
  font-size: 0.84rem !important;
}


/* Dashboard compact POS-style layout */
.dashboard-topbar {
  margin-bottom: 0.6rem !important;
}
.dashboard-title {
  font-size: 1.35rem;
  letter-spacing: 0.1px;
}
.dashboard-main-grid {
  align-items: stretch;
}
.dashboard-panel,
.dashboard-calendar-card {
  border-radius: 16px !important;
}
.dashboard-card-body {
  padding: 0.9rem !important;
}
.dashboard-section-title {
  font-size: 0.96rem !important;
  font-weight: 800;
  letter-spacing: 0.15px;
  color: #5e4454;
}
.metric-card {
  padding: 0.8rem !important;
  border-radius: 14px !important;
}
.metric-label {
  font-size: 0.8rem !important;
}
.metric-value {
  font-size: 1.45rem !important;
  line-height: 1.1;
}
.appt-day-header {
  padding: 0.4rem 0.65rem !important;
  border-radius: 10px !important;
  font-size: 0.88rem;
}
.appt-photo,
.appt-photo-placeholder {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-width: 2px !important;
}
.appt-name {
  font-size: 0.92rem;
  line-height: 1.15;
}
.appt-time-line {
  font-size: 0.78rem !important;
}
.upcoming-card {
  border-radius: 12px !important;
}
.upcoming-card .small {
  line-height: 1.2;
}
.stylist-tag {
  padding: 0.16rem 0.42rem !important;
  font-size: 0.7rem !important;
}
#calendarToolbar {
  margin-bottom: 0.6rem !important;
}
#calendarTitle {
  font-size: 0.96rem;
}
.calendar-week-grid {
  gap: 0.45rem !important;
}
.calendar-day-col {
  min-height: 165px !important;
}
.calendar-day-head {
  padding: 0.45rem 0.55rem !important;
}
.calendar-day-name {
  font-size: 0.82rem !important;
}
.calendar-day-date {
  font-size: 0.78rem !important;
}
.calendar-day-body {
  padding: 0.4rem !important;
  gap: 0.32rem !important;
}
.calendar-event {
  padding: 0.38rem 0.45rem !important;
  border-radius: 8px !important;
}
.calendar-event-time {
  font-size: 0.68rem !important;
}
.calendar-event-customer {
  font-size: 0.76rem !important;
}
.calendar-event-service,
.calendar-event-stylist {
  font-size: 0.68rem !important;
}
.calendar-month-grid {
  gap: 0.32rem !important;
}
.calendar-month-cell {
  min-height: 88px !important;
  padding: 0.32rem !important;
}
.calendar-month-date {
  font-size: 0.82rem !important;
  margin-bottom: 0.16rem !important;
}
.calendar-mini-event {
  font-size: 0.62rem !important;
  border-radius: 8px !important;
}
.calendar-legend {
  font-size: 0.78rem !important;
}
.card .table td,
.card .table th {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
@media (max-width: 992px) {
  .dashboard-card-body {
    padding: 0.8rem !important;
  }
}



.block-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff3e8 0%, #ffe7da 100%);
  color: #9a4c22;
  border: 1px solid #f2c3a7;
}


.draggable-event {
  cursor: grab;
}
.draggable-event:active {
  cursor: grabbing;
}
.calendar-drop-target {
  outline: 2px dashed #d96c93;
  outline-offset: -4px;
  background: linear-gradient(135deg, #fff4f8 0%, #fff8ee 100%) !important;
}


.hover-edit-wrap {
  position: relative;
}
.calendar-edit-link {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  color: #5f4251;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  z-index: 3;
}
.calendar-edit-link-mini {
  top: 3px;
  right: 3px;
  font-size: 0.6rem;
  padding: 0.08rem 0.35rem;
}
.hover-edit-wrap:hover .calendar-edit-link,
.hover-edit-wrap:focus-within .calendar-edit-link {
  opacity: 1;
  transform: translateY(0);
}
.calendar-edit-link:hover {
  color: #b13e6d;
  border-color: rgba(177,62,109,0.24);
}


.pos-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 1rem;
}
.pos-product-btn {
  border: 1px solid #efd4e0 !important;
  background: linear-gradient(135deg, #fff9fc 0%, #fffdf8 100%) !important;
  border-radius: 14px !important;
  padding: 0.85rem !important;
  min-height: 90px;
}
.pos-product-btn:hover {
  border-color: #d96c93 !important;
}
.pos-cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.6rem;
  align-items: center;
  border: 1px solid #efd4e0;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  background: #fff;
}
.pos-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
@media (max-width: 992px){
  .pos-grid {
    grid-template-columns: 1fr;
  }
}


.pos-service-btn {
  border: 1px solid #efd4e0 !important;
  background: linear-gradient(135deg, #fff4fb 0%, #fffaf0 100%) !important;
  border-radius: 14px !important;
  padding: 0.85rem !important;
  min-height: 90px;
}
.pos-service-btn:hover {
  border-color: #d96c93 !important;
}


.pos-usage-box {
  background: linear-gradient(135deg, #fff7f0 0%, #fffdf9 100%);
  border: 1px solid #efdccf !important;
  border-radius: 16px;
}
.pos-usage-btn {
  border: 1px solid #efd4e0 !important;
  background: linear-gradient(135deg, #fff8f3 0%, #fffefb 100%) !important;
  border-radius: 14px !important;
  padding: 0.85rem !important;
  min-height: 90px;
}
.pos-usage-btn:hover {
  border-color: #d8a85f !important;
}
.pos-usage-item {
  background: linear-gradient(135deg, #fffaf6 0%, #fff 100%);
}


.inventory-card {
  border-radius: 18px !important;
}
.inventory-section-title {
  font-size: 1rem;
  font-weight: 800;
  color: #5e4454;
}
.inventory-item-card {
  border: 1px solid #efd4e0;
  border-radius: 14px;
  padding: 0.85rem;
  background: linear-gradient(135deg, #fffdfd 0%, #fff9fc 100%);
}
.inventory-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.inventory-save-btn,
.inventory-delete-btn {
  min-height: 38px;
}


/* Global compact UI */
body {
  font-size: 0.94rem;
}
.app-navbar {
  margin-bottom: 0.6rem !important;
}
.app-shell {
  max-width: 1800px;
}
.compact-card {
  border-radius: 16px !important;
}
.compact-card-body {
  padding: 0.8rem !important;
}
.section-title {
  font-weight: 800 !important;
  letter-spacing: 0.1px;
}
.card .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6b5864;
}
.card .form-control,
.card .form-select {
  padding: 0.45rem 0.65rem;
  min-height: 36px;
  font-size: 0.9rem;
}
.card .btn {
  padding: 0.42rem 0.75rem;
}
.card .table th,
.card .table td {
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
  font-size: 0.88rem;
}
.row.g-2 {
  --bs-gutter-x: 0.65rem;
  --bs-gutter-y: 0.65rem;
}
.row.g-1 {
  --bs-gutter-x: 0.45rem;
  --bs-gutter-y: 0.45rem;
}
.inventory-item-card {
  padding: 0.65rem !important;
}
.inventory-item-header {
  margin-bottom: 0.35rem !important;
}
.action-btn-row .btn {
  min-height: 34px;
}
.pos-grid {
  gap: 0.7rem !important;
}
.pos-product-btn,
.pos-service-btn,
.pos-usage-btn {
  min-height: 72px !important;
  padding: 0.6rem !important;
}
.pos-cart-item {
  padding: 0.45rem 0.55rem !important;
  gap: 0.45rem !important;
}
.pos-cart-item .btn.btn-sm {
  padding: 0.1rem 0.42rem;
}
.badge {
  font-size: 0.72rem;
}
.border.rounded-3.p-3 {
  padding: 0.7rem !important;
}
.vstack.gap-2 { gap: 0.5rem !important; }
.vstack.gap-1 { gap: 0.35rem !important; }
h1.h5, h1.h6, h2.h5, h2.h6 {
  margin-bottom: 0.35rem !important;
}
.table-responsive {
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .compact-card-body {
    padding: 0.7rem !important;
  }
}


.upcoming-card-link {
  display: block;
  color: inherit;
}
.upcoming-card-link:hover {
  box-shadow: 0 0 0 2px rgba(217,108,147,0.15);
  transform: translateY(-1px);
}


.upcoming-card-completed {
  opacity: 0.82;
  background: linear-gradient(135deg, #f7fbf7 0%, #fdfdfd 100%);
}
.upcoming-card-completed .appt-name,
.upcoming-card-completed .appt-time-line {
  color: #4f5b4f;
}


.customer-mini-card {
  text-align: center;
}
.customer-mini-photo,
.customer-mini-photo-placeholder {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.35rem;
  border: 2px solid #f1d3df;
  background: linear-gradient(135deg, #fff4f8 0%, #fffdf6 100%);
  color: #8d5b72;
}
.customer-mini-name {
  font-size: 0.96rem;
  line-height: 1.2;
}
.customer-mini-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.appt-photo,
.appt-photo-placeholder {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
}

.customer-mini-photo,
.customer-mini-photo-placeholder {
  width: 92px !important;
  height: 92px !important;
  font-size: 1.6rem !important;
}


.customer-lookup-input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}


.customer-picker {
  position: relative;
}
.customer-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-radius: 12px;
}


.customer-picker {
  position: relative;
}
.customer-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
}
.customer-search-results .active {
  background: #f7d9e5;
  border-color: #f1bfd1;
  color: #5c3f4d;
}


.customer-picker {
  position: relative;
}
.customer-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2000;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border-radius: 12px;
  background: #fff;
}


.inventory-collapsible-item {
  padding: 0.55rem 0.65rem !important;
}
.inventory-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.inventory-name-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1 1 280px;
  text-align: left;
  border: 1px solid #ead2dd !important;
  background: linear-gradient(135deg, #fff8fb 0%, #fffdfd 100%) !important;
  border-radius: 12px !important;
  padding: 0.45rem 0.7rem !important;
  color: #624b58 !important;
}
.inventory-name-btn:hover {
  border-color: #d69ab3 !important;
  background: linear-gradient(135deg, #fff3f8 0%, #fffdfd 100%) !important;
}
.inventory-name-text {
  font-weight: 800;
}
.inventory-name-hint {
  font-size: 0.76rem;
  opacity: 0.72;
  white-space: nowrap;
}
.inventory-list-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inventory-mini-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #efdee6;
  font-size: 0.78rem;
  color: #6e5a65;
}
.compact-detail-form {
  padding-top: 0.2rem;
  border-top: 1px dashed #ecd6e0;
}
.service-collapsible-item .inventory-name-btn {
  background: linear-gradient(135deg, #fffaf7 0%, #fffdfd 100%) !important;
}
@media (max-width: 768px) {
  .inventory-name-btn {
    flex-basis: 100%;
  }
  .inventory-list-meta {
    justify-content: flex-start;
  }
}


/* iPad dashboard optimization */
.dashboard-main-grid{
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .75rem;
}
.upcoming-card{
  padding: .65rem .75rem !important;
}
.upcoming-card-link{
  transition: transform .12s ease, box-shadow .12s ease;
}
.upcoming-card-link:hover{
  transform: translateY(-1px);
}
.dashboard-calendar-card .calendar-legend{
  padding: .18rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid #efd4e0;
}
#calendarToolbar{
  gap: .5rem;
}
#calendarTitle{
  text-align: center;
}

@media (max-width: 1200px) {
  .calendar-week-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .calendar-day-col {
    min-height: 185px !important;
  }
  .calendar-month-cell {
    min-height: 120px !important;
  }
}

@media (max-width: 992px) {
  .dashboard-main-grid{
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .6rem;
  }
  .appointments-chart{
    min-height: 150px !important;
  }
  .appointments-chart-track{
    height: 100px !important;
  }
  .calendar-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .calendar-month-head,
  .calendar-month-grid {
    gap: .35rem !important;
  }
  .calendar-month-cell {
    min-height: 108px !important;
    padding: .32rem !important;
  }
  .calendar-mini-event {
    font-size: .66rem !important;
  }
}

@media (max-width: 768px) {
  .dashboard-card-body {
    padding: .7rem !important;
  }
  .appt-day-header {
    padding: .36rem .55rem !important;
  }
  .upcoming-card {
    padding: .55rem .6rem !important;
  }
  .appt-photo,
  .appt-photo-placeholder {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  .calendar-week-grid {
    grid-template-columns: 1fr;
  }
  .calendar-month-grid,
  .calendar-month-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dashboard neutral icon shortcut navigation */
.dashboard-icon-actions .dashboard-top-icon-btn {
  width: 44px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dashboard-top-icon-btn svg,
.dashboard-icon-tile svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-top-icon-btn svg {
  width: 21px;
  height: 21px;
}
.dashboard-shortcuts-card {
  border: 1px solid rgba(94, 68, 84, 0.10);
  background: linear-gradient(180deg, #fff 0%, #fcf9fb 100%);
}
.dashboard-shortcuts-body {
  padding: .75rem !important;
}
.dashboard-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: .65rem;
}
.dashboard-icon-tile {
  min-height: 88px;
  border-radius: 16px;
  border: 1px solid rgba(94, 68, 84, 0.13);
  background: rgba(255,255,255,.82);
  color: #5e4454;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(94,68,84,.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.dashboard-icon-tile:hover,
.dashboard-icon-tile:focus-visible {
  color: #4d2c3d;
  background: #fff;
  border-color: rgba(94, 68, 84, 0.25);
  box-shadow: 0 10px 24px rgba(94,68,84,.12);
  transform: translateY(-2px);
  outline: none;
}
.dashboard-icon-tile svg {
  width: 31px;
  height: 31px;
  opacity: .92;
}
.dashboard-icon-tile span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12px;
  color: #6b4d5a;
}
@media (max-width: 820px) {
  .dashboard-icon-grid {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: .5rem;
  }
  .dashboard-icon-tile {
    min-height: 78px;
    border-radius: 14px;
  }
  .dashboard-icon-tile svg {
    width: 28px;
    height: 28px;
  }
  .dashboard-icon-tile span {
    font-size: .68rem;
  }
}
@media (max-width: 520px) {
  .dashboard-icon-grid {
    grid-template-columns: repeat(3, minmax(76px, 1fr));
  }
}

/* Global top navigation icon buttons - replaces text nav labels on every page */
.app-navbar .salon-icon-nav {
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.app-navbar .salon-top-icon-link {
  width: 42px;
  height: 38px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.app-navbar .salon-top-icon-link svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-navbar .salon-top-icon-link:hover,
.app-navbar .salon-top-icon-link:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
  outline: none;
}
.app-navbar .salon-top-icon-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.13);
}
@media (max-width: 991px) {
  .app-navbar .salon-icon-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
    margin-bottom: .75rem;
  }
  .app-navbar .salon-top-icon-link {
    width: 100%;
    height: 44px;
  }
}

/* Inventory category management update - SalonApp052926 */
.inventory-page .sticky-xl-top { top: 0.75rem; z-index: 5; }
.inventory-top-actions .btn { border-radius: 999px; }
.inventory-stat-card {
  border: 1px solid #efdee6;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdfd 0%, #fff8fb 100%);
  padding: 0.7rem 0.85rem;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.inventory-stat-card span {
  color: #7c6673;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inventory-stat-card strong {
  color: #563e4e;
  font-size: 1.15rem;
  line-height: 1.1;
}
.inventory-stat-warning {
  border-color: #e6c369;
  background: linear-gradient(135deg, #fff9e8 0%, #fffdf8 100%);
}
.inventory-tabs .nav-link {
  border-radius: 999px;
  color: #684f5d;
  font-weight: 800;
}
.inventory-tabs .nav-link.active {
  background: linear-gradient(135deg, #6f4c63 0%, #9a637d 100%);
}
.inventory-category-card {
  border: 1px solid #edd9e2;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(80, 48, 67, 0.04);
}
.inventory-category-header {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #fff8fb 0%, #fffdfd 100%) !important;
  padding: 0.8rem 0.95rem !important;
  color: #563e4e !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}
.inventory-category-title {
  display: block;
  font-weight: 900;
  font-size: 1rem;
}
.inventory-category-subtitle {
  display: block;
  color: #8a7280;
  font-size: 0.78rem;
  font-weight: 700;
}
.inventory-category-count {
  border: 1px solid #ead4df;
  background: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  color: #6d5563;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.inventory-low-stock {
  border-color: #e5c66f !important;
  background: linear-gradient(135deg, #fffdf7 0%, #fff9e8 100%) !important;
}
.inventory-pill-warning {
  border-color: #e5c66f !important;
  background: #fff7df !important;
  color: #735b14 !important;
  font-weight: 800;
}
.inventory-name-btn > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inventory-name-detail {
  color: #806a76;
  font-size: 0.76rem;
  white-space: normal;
}
.inventory-add-form .form-label,
.compact-detail-form .form-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #6e5866;
  margin-bottom: 0.2rem;
}
@media (max-width: 768px) {
  .inventory-category-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .inventory-category-count {
    align-self: flex-start;
  }
}

/* Inventory count / SKU scan workflow */
.inventory-count-session {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.75);
  color: inherit;
}
.inventory-count-session:hover { background: rgba(13,110,253,.06); }
.inventory-count-table th { white-space: nowrap; font-size: .82rem; color: #6c757d; }
.inventory-count-table td { vertical-align: middle; }
.inventory-pill-success { background: rgba(25,135,84,.12); color: #198754; border-color: rgba(25,135,84,.25); }
.inventory-count-page .form-control-lg, .inventory-count-page .form-select-lg { border-radius: .9rem; }
@media (max-width: 768px) {
  .inventory-count-session { align-items: flex-start; flex-direction: column; }
  .inventory-count-table-wrap { font-size: .88rem; }
}

/* 052926B Friendly Salon Layout Refresh
   Keeps the original salon palette while improving usability and visibility. */
:root {
  --salon-bg: #fff8fb;
  --salon-surface: rgba(255,255,255,0.94);
  --salon-border: #efd4e0;
  --salon-text: #332631;
  --salon-muted: #755f6d;
  --salon-shadow: 0 14px 32px rgba(125, 78, 104, 0.10);
  --salon-shadow-soft: 0 8px 18px rgba(125, 78, 104, 0.08);
}

body {
  color: var(--salon-text);
  min-height: 100vh;
}

.app-navbar {
  border: 0;
  box-shadow: 0 10px 28px rgba(125, 78, 104, 0.18);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 850 !important;
  letter-spacing: .01em;
}

.navbar-brand::before {
  content: "✦";
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.22);
  color: #fff8e8;
}

.salon-icon-nav {
  align-items: center;
  gap: .35rem;
}

.salon-top-icon-link {
  width: auto !important;
  min-width: 76px !important;
  height: 48px !important;
  padding: .45rem .65rem !important;
  border-radius: 16px !important;
  gap: .35rem;
  flex-direction: column;
  color: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.salon-top-icon-link svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px !important;
  height: 18px !important;
}

.salon-top-icon-link:hover,
.salon-top-icon-link:focus {
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
  color: #fff !important;
}

.salon-top-icon-link.active {
  color: var(--salon-plum) !important;
  background: linear-gradient(135deg, #fff 0%, #fff3f8 100%);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 8px 20px rgba(54, 29, 44, .18);
}

.salon-nav-label {
  display: block;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
}

.salon-global-search {
  min-width: 250px;
  max-width: 340px;
  flex: 1 1 250px;
}

.salon-global-search .form-control {
  border-radius: 999px;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.app-shell {
  max-width: 1440px;
  margin: 0 auto;
}

.card,
.metric-card,
.dashboard-panel,
.dashboard-chart-card,
.calendar-day-col,
.calendar-month-cell {
  border-color: var(--salon-border) !important;
  border-radius: 20px !important;
  background: var(--salon-surface);
  box-shadow: var(--salon-shadow-soft);
}

.card-header {
  background: linear-gradient(135deg, #fff8fb 0%, #fff3f8 55%, #fffaf1 100%) !important;
  border-bottom: 1px solid var(--salon-border) !important;
  color: var(--salon-plum);
  font-weight: 800;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

h1, h2, h3, .h1, .h2, .h3 {
  color: #3b2a37;
  font-weight: 850;
  letter-spacing: -.02em;
}

.text-muted,
.small.text-muted {
  color: var(--salon-muted) !important;
}

.btn {
  border-radius: 14px;
  font-weight: 750;
  box-shadow: none !important;
}

.btn-sm {
  border-radius: 12px;
}

.btn-primary,
.btn-success {
  color: #fff;
  box-shadow: 0 8px 18px rgba(217, 108, 147, .18) !important;
}

.btn-light {
  color: var(--salon-plum);
  border-color: #f2d4df;
  background: #fff8fb;
  font-weight: 800;
}

.btn-outline-secondary,
.btn-outline-dark {
  color: var(--salon-plum);
  border-color: #dcb5c7;
  background: rgba(255,255,255,.72);
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  color: var(--salon-plum);
  background: var(--salon-pink-soft);
  border-color: #cfa1b5;
}

.form-control,
.form-select {
  border-radius: 14px;
  border-color: #e7c8d6;
  background-color: rgba(255,255,255,.96);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--salon-pink);
  box-shadow: 0 0 0 .22rem rgba(217,108,147,.16);
}

.table-responsive {
  border-radius: 18px;
}

.table thead th {
  color: var(--salon-plum);
  background: #fff4f8;
  border-bottom-color: #ebc8d6;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.table tbody tr:hover {
  background: #fff8fb;
}

.badge {
  border-radius: 999px;
  padding: .45em .65em;
}

.alert {
  border-radius: 16px;
  border-color: var(--salon-border);
  box-shadow: var(--salon-shadow-soft);
}

/* Page flow helpers used by existing pages without changing route logic */
.d-flex.justify-content-between.align-items-center.mb-3,
.d-flex.justify-content-between.align-items-center.mb-4 {
  padding: 1rem 1.15rem;
  border: 1px solid var(--salon-border);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, #fff7fb 100%);
  box-shadow: var(--salon-shadow-soft);
}

.d-flex.justify-content-between.align-items-center.mb-3 .btn,
.d-flex.justify-content-between.align-items-center.mb-4 .btn {
  min-width: 110px;
}

.metric-card {
  min-height: 112px;
}

.metric-value {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

@media (max-width: 1180px) {
  .salon-top-icon-link {
    min-width: 64px !important;
    height: 46px !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  .salon-nav-label {
    max-width: 72px;
    font-size: .64rem;
  }
  .salon-global-search {
    min-width: 200px;
  }
}

@media (max-width: 991px) {
  .salon-icon-nav {
    align-items: stretch;
    padding-top: .75rem;
  }
  .salon-top-icon-link {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    flex-direction: row;
    justify-content: flex-start;
    padding: .7rem .85rem !important;
  }
  .salon-nav-label {
    max-width: none;
    font-size: .9rem;
  }
  .salon-global-search {
    min-width: 100%;
    max-width: none;
  }
  .d-flex.justify-content-between.align-items-center.mb-3,
  .d-flex.justify-content-between.align-items-center.mb-4 {
    align-items: flex-start !important;
    flex-direction: column;
    gap: .75rem;
  }
}


/* 052926C Front Desk Workflow Enhancement - keeps original salon color theme */
.frontdesk-quick-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:.75rem;
}
.frontdesk-action{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border-radius:1.1rem;
  text-decoration:none;
  font-weight:800;
  color:#6f3f57;
  background:linear-gradient(180deg,#fff 0%,#fff5f9 100%);
  border:1px solid rgba(181,112,140,.28);
  box-shadow:0 8px 20px rgba(125,78,104,.08);
}
.frontdesk-action:hover{
  color:#4d2c3d;
  border-color:rgba(181,112,140,.48);
  box-shadow:0 12px 26px rgba(125,78,104,.13);
  transform:translateY(-1px);
}
.frontdesk-action.primary{
  color:#fff;
  background:linear-gradient(135deg,#b5708c 0%,#d99ab6 100%);
  border-color:rgba(181,112,140,.55);
}
.fd-kpi-card{
  height:100%;
  border-radius:1.1rem;
  padding:1rem;
  background:linear-gradient(180deg,#fff 0%,#fdf8fb 100%);
  border:1px solid rgba(181,112,140,.22);
  box-shadow:0 8px 20px rgba(125,78,104,.07);
}
.fd-kpi-card.warning{
  background:linear-gradient(180deg,#fffaf4 0%,#fff3e6 100%);
  border-color:rgba(222,160,96,.35);
}
.fd-kpi-label{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:#8a6b79;
}
.fd-kpi-value{
  margin-top:.35rem;
  font-size:1.45rem;
  line-height:1.05;
  font-weight:900;
  color:#442f3c;
}
.fd-kpi-note{
  margin-top:.25rem;
  font-size:.82rem;
  color:#8a6b79;
}
.fd-focus-card{
  border:1px solid rgba(181,112,140,.22);
  background:linear-gradient(180deg,#fff 0%,#fefafd 100%);
}
.fd-section-eyebrow{
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#b5708c;
}
.fd-next-appt{
  margin-top:.8rem;
  padding:1rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid rgba(181,112,140,.18);
}
.fd-next-name{
  font-size:1.25rem;
  font-weight:900;
  color:#442f3c;
}
.fd-activity-list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.fd-activity-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.7rem .8rem;
  border-radius:.9rem;
  border:1px solid rgba(181,112,140,.16);
  background:#fff;
}
@media (max-width: 1100px){
  .frontdesk-quick-actions{grid-template-columns:repeat(3,minmax(150px,1fr));}
}
@media (max-width: 720px){
  .frontdesk-quick-actions{grid-template-columns:1fr 1fr;}
  .frontdesk-action{min-height:52px;font-size:.9rem;}
  .fd-kpi-value{font-size:1.2rem;}
}


/* 052926D Header Navigation Enhancement
   Removes brand/graphic and enlarges navigation for easier front-desk use. */
.app-navbar-clean {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.app-navbar-clean .container-fluid {
  align-items: center;
}
.app-navbar-clean .navbar-brand,
.app-navbar-clean .navbar-brand::before {
  display: none !important;
  content: none !important;
}
.app-navbar-clean .navbar-collapse {
  align-items: center;
  gap: 0.8rem;
}
.app-navbar-clean .salon-icon-nav {
  gap: 0.55rem !important;
  align-items: center;
}
.app-navbar-clean .salon-top-icon-link {
  min-width: 96px !important;
  height: 62px !important;
  padding: 0.55rem 0.8rem !important;
  border-radius: 18px !important;
  gap: 0.42rem !important;
  justify-content: center !important;
  font-weight: 800;
  letter-spacing: .01em;
}
.app-navbar-clean .salon-top-icon-link svg {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 1.95 !important;
}
.app-navbar-clean .salon-nav-label {
  font-size: 0.74rem !important;
  line-height: 1.05;
  max-width: 105px !important;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-navbar-clean .salon-global-search .form-control {
  min-height: 46px;
  border-radius: 14px;
  font-size: 0.98rem;
}
.app-navbar-clean .navbar-text {
  color: rgba(255,255,255,.9) !important;
  font-weight: 700;
}
.app-navbar-clean .btn.btn-light {
  min-height: 46px;
  border-radius: 14px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 800;
}
@media (max-width: 1400px) {
  .app-navbar-clean .salon-top-icon-link {
    min-width: 84px !important;
    height: 58px !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
  .app-navbar-clean .salon-top-icon-link svg {
    width: 23px !important;
    height: 23px !important;
  }
  .app-navbar-clean .salon-nav-label {
    font-size: .68rem !important;
    max-width: 88px !important;
  }
}
@media (max-width: 991px) {
  .app-navbar-clean .navbar-toggler {
    margin-left: auto;
    min-height: 46px;
    border-radius: 14px;
  }
  .app-navbar-clean .salon-icon-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem !important;
    width: 100%;
  }
  .app-navbar-clean .salon-top-icon-link {
    width: 100% !important;
    min-width: 100% !important;
    height: 58px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: .75rem .95rem !important;
  }
  .app-navbar-clean .salon-nav-label {
    font-size: .92rem !important;
    max-width: none !important;
    text-align: left;
  }
}

/* 052926E Recent Activity Rollup */
.fd-activity-main{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  min-width:0;
}
.fd-activity-icon{
  width:1.8rem;
  height:1.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.65rem;
  background:rgba(181,112,140,.10);
  flex:0 0 auto;
  font-size:1rem;
}
.fd-activity-rollup{
  border:1px dashed rgba(181,112,140,.32);
  border-radius:.9rem;
  padding:.65rem .8rem;
  background:rgba(255,248,251,.72);
}
.fd-activity-rollup summary{
  cursor:pointer;
  font-weight:800;
  color:#7b3f5c;
  list-style:none;
}
.fd-activity-rollup summary::-webkit-details-marker{display:none;}
.fd-activity-row-muted{
  background:rgba(255,255,255,.74);
}

/* 052926G Top Navigation Professional Accent Update
   Keeps the existing neutral top navigation buttons and replaces colored edge strips
   with a subtle salon-brand bottom accent and refined active/hover treatment. */
.app-navbar .salon-top-icon-link {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.app-navbar .salon-top-icon-link::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216,168,95,.88), rgba(217,108,147,.88));
  opacity: 0;
  transform: scaleX(.45);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}

.app-navbar .salon-top-icon-link:hover,
.app-navbar .salon-top-icon-link:focus-visible {
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px rgba(47,36,48,.12);
  transform: translateY(-1px);
}

.app-navbar .salon-top-icon-link:hover::after,
.app-navbar .salon-top-icon-link:focus-visible::after {
  opacity: .72;
  transform: scaleX(.82);
}

.app-navbar .salon-top-icon-link.active {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 7px 18px rgba(47,36,48,.16);
}

.app-navbar .salon-top-icon-link.active::after {
  opacity: 1;
  transform: scaleX(1);
  height: 3px;
}