/* Admin Quick Access Burger Menu */
.admin-quick-dropdown {
    display: inline-block;
}

.admin-burger-btn {
    background: #337ab7;
    border: none;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.2s ease;
}

.admin-burger-btn:hover {
    background: #286090;
}

.admin-burger-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.5);
}

.admin-burger-btn .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 3px 0;
    border-radius: 1px;
}

.admin-quick-dropdown .dropdown-menu {
    min-width: 220px;
    margin-top: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 4px;
}

.admin-quick-dropdown .dropdown-menu .dropdown-header {
    font-weight: bold;
    color: #337ab7;
    padding: 8px 15px;
    font-size: 11px;
    text-transform: uppercase;
}

.admin-quick-dropdown .dropdown-menu > li > a {
    padding: 10px 20px;
    color: #333;
    font-size: 13px;
}

.admin-quick-dropdown .dropdown-menu > li > a:hover {
    background: #f5f5f5;
    color: #337ab7;
}

.admin-quick-dropdown .dropdown-menu .divider {
    margin: 5px 0;
}
/* T-124: Compact menu search row — input + submit + burger on one line */
.menu-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.menu-search-row .menu-search-input {
    flex: 1;
    min-width: 0;
    height: auto;
    border-radius: 4px;
}
.menu-search-row .menu-search-submit {
    white-space: nowrap;
    border-radius: 4px;
}
/* End Admin Quick Access Burger Menu */

.toggle-radio .switch {
  position: relative;
  height: 43px;
  text-align: center;
  background: #00bc9c;
  background: #018e76;
  transition: all 0.2s ease;
  border-radius: 25px;
}
.yes_no_wp .toggle-radio .switch {
  background-color: #ffcc00;
}
.toggle-radio .switch span {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 49%;
  left: 50%;
  margin: -2px 0px 0px -4px;
  background: #fff;
  display: block;
  transform: rotate(-45deg);
  transition: all 0.2s ease;
}
.toggle-radio .switch span:after {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 12px;
  margin-top: -8px;
  background: #fff;
  transition: all 0.2s ease;
}
.toggle-radio input[type="radio"] {
  display: none;
}
.toggle-radio .switch label {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.2);
  width: 95px;
  line-height: 41px;
  font-size: 9px;
  transition: all 0.2s ease;
}
.toggle-radio label[for^="no"] {
  /* position: absolute; */
  left: 0px;
  height: 20px;
}

.toggle-radio label[for^="yes"] {
  /* position: absolute; */
  right: 0px;
  margin-right: 10px;
}

.toggle-radio [id^="yes"]:checked ~ .switch {
  background: #db85c3;
}
.toggle-radio [id^="yes"]:checked ~ .switch span {
  background: #fff;
  margin-left: -8px;
}
.toggle-radio [id^="yes"]:checked ~ .switch span:after {
  background: #fff;
  height: 20px;
  margin-top: -8px;
  margin-left: 8px;
}
.toggle-radio [id^="no"]:checked ~ .switch label[for^="no"] {
  color: #fff;
}
.toggle-radio [id^="yes"]:checked ~ .switch label[for^="yes"] {
  color: #fff;
}

.row_yes_no {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.toggle-radio {
  position: relative;
}

.div_circle {
  position: relative;
  display: flex;
  align-items: center;
}
.yes_no,
.yes_no_wp {
  width: 100%;
  margin-right: 10px;
}
.mobile-padding-yes_no {
  padding: 0;
}

.red_circle {
  background: #000;
  width: 29px;
  height: 29px;
  border-radius: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  left: 36px;
  top: 2px;
  color: #ffcc00;
  font-size: 18px;
  /* font-weight:bold; */
  border: 1px solid #ffcc00;
}
.green_circle {
  background: #fff;
  width: 29px;
  height: 29px;
  border-radius: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  left: 36px;
  top: 2px;
  color: #00a504;
  font-size: 18px;
  /* font-weight:bold; */
  border: 1px solid #00a504;
}

.calll .alert-success {
  background: #000;
  width: 29px;
  height: 29px;
  text-align: center;
  color: #ffcb00;
  padding: 0;
  margin-top: 15px;
  margin-left: 4px;
  position: absolute;
  top: -11px;
  left: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-radius: 30px;
  border: 1px solid #ffcc00;
}

.wpl .alert-success {
  background: #fff;
  width: 29px;
  height: 29px;
  text-align: center;
  color: #00a504;
  padding: 0;
  margin-top: 15px;
  margin-left: 4px;
  position: absolute;
  top: -11px;
  left: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-radius: 30px;
  border: 1px solid #00a504;
}

.alert-all-connected {
  background-color: #1fcad2;
}
.alert-call-connected {
  background-color: #ffcc00a3;
}
.alert-whatsapp-connected {
  background-color: #01bc9b87;
}

body {
  background: #979797;
}
.container.login-cont {
  background: #fff;
  padding: 50px;
}
.title {
  color: black;
}
.panel-body {
  color: #000000;
  font-size: 12px;
}
.panel-body .date-time .day,
.panel-body .small-booking {
  color: #fff;
}
.well {
  color: #327ab7;
}
.panel-warning > .panel-heading {
  background-color: #ffcc00;
}
.panel-warning {
  margin-top: 20px;
}
.img-logo {
  width: 140px;
}
.lead {
  margin-bottom: 0px;
}
.alert-success {
  background-color: #73d087;
  background-color: #ffffff;
  color: #155e91;
}

.alert-warning {
  background-color: #bb9dc3;
}
.alert-warning p {
  color: #fff !important;
}
.alert p {
  font-size: 14px;
}
.alert {
  margin-bottom: 5px;
}
.alert-info {
  background-color: #1fcad2;
}
.reschedule_call,
.book_now,
.add_note {
  margin-top: 10px;
}
.date-time .name {
  font-size: 20px;
}

.date-time .hour {
  font-size: 22px;
}
.date-time .day {
  font-size: 18px;
  color: #55b1e0;
}
.alert-warning .date-time .day {
  color: #fff;
}
.alert-warning .name,
.alert-warning .hour {
  color: #eeff00;
}
.alert-info .date-time .day,
.alert-all-connected .date-time .day,
.alert-whatsapp-connected .date-time .day,
.alert-call-connected .date-time .day {
  color: #fff;
}
.small-booking {
  font-size: 14px;
}
.alert-warning,
.alert-info,
.alert-all-connected,
.alert-whatsapp-connected,
.alert-call-connected {
  color: #fff;
}
.alert-info .name,
.alert-info .hour,
.alert-all-connected .name,
.alert-all-connected .hour,
.alert-whatsapp-connected .name,
.alert-whatsapp-connected .hour,
.alert-call-connected .name,
.alert-call-connected .hour {
  color: #000000;
}

.all-statuses .btn {
  font-size: 11px;
}
.btn {
  font-size: 13px;
}

.log_call_btn {
  width: 37px;
  height: 37px;
  background: url(https://www.laughingbuddha.uk/uploads/adm/log_call_btn.png) no-repeat center center transparent;
  background-size: 37px;
  border: none;
}

.log_wp_btn {
  width: 37px;
  height: 37px;
  background: url(https://www.laughingbuddha.uk/uploads/adm/log_wp_btn.png) no-repeat center center transparent;
  background-size: 37px;
  border: none;
}

.tge_suc {
  height: auto;
  overflow: hidden;
  margin-top: 10px;
}

.btn-connected {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
}
.btn-not-connected {
  color: #000;
  background-color: #ffcc00;
  border-color: #ffcc00;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

.ajax-admin-not-connected,
.ajax-admin-connected {
  display: none;
}
.progress-bar-info-2 {
  background: #ffcc00;
}
.progress-bar-info {
  background: #337ab7;
}
.email-cma {
  font-size: 12px;
  font-weight: bold;
  margin-top: -8px;
  color: #ff7800;
}

.not-called {
  font-size: 19px;
}
.not-called img {
  width: 25px;
}

.img-brand {
  padding-left: 0;
}
.img-brand img {
  max-width: 100%;
  width: 65px;
}

.full_row {
  overflow: hidden;
  margin-left: 10px;
  margin-right: 10px;
  background: #fff;
  margin-bottom: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 15px;
  padding-left: 15px;
}

.full_row.no-margin {
  margin-bottom: 0px;
}

.full_row .fullname {
  padding-right: 15px;
  font-size: 13px;
}
.full_row .leaddate {
  font-size: 11px;
}
.pro_index {
  padding-bottom: 50%;
}
.pro_index h2 {
  color: #fff;
  font-size: 14px;
  margin: 0;
  font-weight: normal;
}

.pro_index h2 span {
  border-radius: 45px;
  background: rgba(157, 138, 138, 0.426);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 45px;
  height: 45px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px;
}
.pro_index .back-top {
  margin-top: 25px;
  padding: 15px;
  color: #fff;
  margin-bottom: 5px;
  text-align: right;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.new_leads {
  background: #2c0059;
}
.new .full_row {
  border-left: 6px solid #2c0059;
}
.new .fullname {
  color: #6a6c6d;
}
.new .leaddate {
  color: #2c0059;
}

/* .sent_whatsapp_and_called_leads{
    background:#663399;
}
.sent_whatsapp_and_called .full_row{    
    border-left:6px solid #663399; 
}
.sent_whatsapp_and_called .fullname{
    color:#6A6C6D;
}
.sent_whatsapp_and_called .leaddate{
    color:#663399;
} */

.sent_whatsapp_leads {
  background: #300062;
}

.sent_whatsapp .full_row {
  border-left: 6px solid #300062;
}
.sent_whatsapp .fullname {
  color: #6a6c6d;
}
.sent_whatsapp .leaddate {
  color: #300062;
}

.called_leads {
  background: #36016e;
}
.called .full_row {
  border-left: 6px solid #36016e;
}
.called .fullname {
  color: #6a6c6d;
}
.called .leaddate {
  color: #36016e;
}

.sent_whatsapp_and_called_leads {
  background: #40027e;
}
.sent_whatsapp_and_called .full_row {
  border-left: 6px solid #40027e;
}
.sent_whatsapp_and_called .fullname {
  color: #6a6c6d;
}
.sent_whatsapp_and_called .leaddate {
  color: #40027e;
}

.requested_callback_leads {
  background: #4c0296;
}
.requested_callback .full_row {
  border-left: 6px solid #4c0296;
}
.requested_callback .fullname {
  color: #6a6c6d;
}
.requested_callback .leaddate {
  color: #4c0296;
}

.no_answer_leads {
  background: #5702ac;
}
.no_answer .full_row {
  border-left: 6px solid #5702ac;
}
.no_answer .fullname {
  color: #5702ac;
}
.no_answer .leaddate {
  color: #5702ac;
}

.will_think_about_it_leads {
  background: #6101c1;
}
.will_think_about_it .full_row {
  border-left: 6px solid #6101c1;
}
.will_think_about_it .fullname {
  color: #6a6c6d;
}
.will_think_about_it .leaddate {
  color: #6101c1;
}

.nr_not_working_leads {
  background: #4a4a4a;
}
.nr_not_working .full_row {
  border-left: 6px solid #4a4a4a;
}
.nr_not_working .fullname {
  color: #6a6c6d;
}
.nr_not_working .leaddate {
  color: #4a4a4a;
}

.will_call_me_back_leads {
  background: #6c02d6;
}
.will_call_me_back .full_row {
  border-left: 6px solid #6c02d6;
}
.will_call_me_back .fullname {
  color: #6a6c6d;
}
.will_call_me_back .leaddate {
  color: #6c02d6;
}

.booked_leads {
  background: #7603e9;
}
.booked .full_row {
  border-left: 6px solid #7603e9;
}
.booked .fullname {
  color: #6a6c6d;
}
.booked .leaddate {
  color: #7603e9;
}
.extended_row {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.extended_row hr {
  margin: 0;
}
.col-reports {
  display: flex;
  text-align: center;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
}

.col-reports .llcc {
  color: #fff;
  padding: 5px 5px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.col-reports .llcc:hover {
  color: #fff;
}
.col-reports .llcc span {
  width: 100%;
  font-size: 12px;
}
.col-reports .llcc span.bold-span {
  font-size: 19px;
  font-weight: bold;
}

.form_record_payment {
  margin-top: 10px;
  text-align: center;
}

.pricing_row {
  background: #e0e0e0;
  margin-top: 10px;
}
.price_title {
  font-weight: bold;
}

.pricing_row .price_quoted {
  color: #000;
  background: #d2d2d2;
}

.pricing_row .price_paid {
  color: green;
  background: #d3f6d3;
}

.pricing_row .price_outstanding {
  color: red;
  background: #ffdada;
}

.mb-5 {
  margin-bottom: 10px;
}

.butcirc {
  border-radius: 130px;
  height: 130px;
  width: 130px;
  background: #fff;
  border: 3px solid #10c4a5;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #10c4a5;
  margin-bottom: 10px;
  margin-right: -10px;
}
.ravi_attempt_to_call img {
  width: 45px;
}
.ravi_attempt_to_call.is-firing { pointer-events: none; opacity: 0.4; cursor: not-allowed; }
.ravi_attempt_to_call.is-firing::after { content: 'Sending\2026'; display: block; font-size: 10px; color: #6b7280; text-align: center; margin-top: 2px; }
.dflex {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: right;
}
.btn.btn-primary.butcirc:hover,
.btn.btn-primary.butcirc:active,
.btn.btn-primary.butcirc:focus,
.btn.btn-primary.butcirc:active:hover {
  color: #10c4a5;
  background: #fff;
  border: 1px solid #10c4a5;
}

.btn-call-circle {
  width: 130px;
  height: 130px;
  background: url(../uploads/adm/log_call_btn2.png) no-repeat center center transparent;
  background-size: 70px;
  font-size: 0;
  border: 3px solid #ffcc00;
  margin-bottom: 10px;
  margin-right: -10px;
}

.btn.btn-primary.butcirc.btn-call-circle:hover,
.btn.btn-primary.butcirc.btn-call-circle:active,
.btn.btn-primary.butcirc.btn-call-circle:focus,
.btn.btn-primary.butcirc.btn-call-circle:active:hover {
  width: 130px;
  height: 130px;
  background: url(../uploads/adm/log_call_btn2.png) no-repeat center center transparent;
  background-size: 70px;
  font-size: 0;
}
.pl0 {
  padding-left: 0;
}

.row-circle {
  display: flex;
  align-items: center;
}
.circle2 {
  color: #00008e;
  font-size: 25px;
  padding: 0;
  margin-top: 0;
  line-height: 0.1;
  margin-top: -4px;
  border-radius: 40px;
  padding: 0;
  color: #fff;
  padding: 5px;
  width: 40px;
  height: 40px;
}
.btn.btn-primary.log-wa {
  border-color: #10c4a5;
}

.well {
  background: #bce5e0;
}
.book-now-btn {
  background: #da2bed;
}
.dayscont h1 {
  color: #1a2b56;
  text-align: center;
  margin-top: 0px;
}
.dayscont {
  padding: 15px;
  margin-bottom: 15px;
  background: #dfdfdf;
  padding-top: 15px;
}
.scroller {
  margin-bottom: 70px;
  display: block;
}

.mycs h6 {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.mycs h6 a {
  color: #fff;
}

.mycs {
  text-align: center;
}
/* .mycs.td{
    background: #ffe2d4;
}
.mycs.tm{
    background: #9cdeeb;
}
.mycs.sev{
    background: #b5ffc7;
}
.mycs.sixt{
    background: #ffc977;
} */
.flexyx {
  display: flex;
  justify-content: space-around;
  /* background: linear-gradient(131.66deg,#000000 4.91%,#04080D 11.21%,#1A2635 42.94%); */
  background: #1a2b56;
  text-align: center;
  /* margin-bottom: 20px; */
  padding: 15px 0px;
  color: #fff;
  align-items: end;
}
.flexyx.today {
  background: linear-gradient(89.99deg, #ca2277 12.97%, #b33683 81.51%);
}
.flexyx.today2 {
  background: linear-gradient(131.66deg, #d24196 4.91%, #c33889 11.21%, #ce549f 42.94%);
  margin-bottom: 20px;
}
.flexyx.yesterday {
  background: linear-gradient(89.99deg, #b33784 12.97%, #82559b 81.51%);
  /* color: #fff; */
}
.flexyx.yesterday2 {
  background: linear-gradient(131.66deg, #c63e93 4.91%, #db5ba4 11.21%, #e282cf 42.94%);
  /* color: #fff; */
}
.flexyx.last7 {
  background: linear-gradient(89.99deg, #82559b 12.97%, #4d70b2 81.51%);
  /* color: #fff; */
}
.flexyx.last72 {
  background: linear-gradient(89.99deg, #a75ade 12.97%, #6290e6 81.51%);
  /* color: #fff; */
}
.flexyx.last16 {
  background: linear-gradient(89.99deg, #4c6fb3 12.97%, #3975b9 81.51%);
  /* color: #fff; */
}
.flexyx.last16_last_2_days {
  background: linear-gradient(89.99deg, #4d77cc 12.97%, #439aff 81.51%);
  /* color: #fff; */
}

.flexyx .copl {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.greenclass {
  background: #18d8b1 !important;
}
.mycs.sev2 div {
  padding: 5px 15px;
  width: 25%;
  border: 1px solid #fff;
}

.mycs.sev2 {
  background: linear-gradient(89.99deg, #c92377 12.97%, #3976b9 81.51%);
  position: fixed;
  top: 0px;
  width: inherit;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -15px;
}
@media all and (max-width: 768px) {
  .mycs.sev2 {
    position: fixed;
    top: 0px;
    width: inherit;
    left: 0px;
    right: 0px;
    margin-left: 0px;
  }
}

.copl span strong {
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-top: 6px;
}

.btnk {
  width: 100%;
  border-radius: 25px;
  margin-top: 10px;
  margin-bottom: 0px;
}

.alert.alert-all-connected.danger {
  background: #ca99bc;
}
.flowcallback {
  margin-top: 10px;
}

.book_ajax_form_calendar {
  padding-top: 20px;
  padding-bottom: 20px;
}
#book_ajax_form_calendar .tge_suc {
  padding: 5px;

    border-radius: 15px;
    padding-bottom: 0;
}
#book_outside_plan{margin:0;width:100%}
.bulk-blocks .alert-warning{
  margin-bottom: 5px;
  padding: 5px;
  border-radius:0 0 10px 10px;
}
#book_ajax_form_calendar .tge_suc .alert-warning {
  margin-bottom: 5px;
  padding: 5px;
  border-radius:0 0 10px 10px;
}

#outsideServiceGrid {
  width: 100%;
  overflow: visible;
}
.open_booking_form {
  background: #c92377;
  margin-top: 10px;
  color: #fff;
}
.booking_form_new {
  display: none;
  background: #bce5e0;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 10px;
  margin-top: 10px;
  border-radius: 15px;
}

.booking_form_new input[type="text"],
.booking_form_new select,
.booking_form_new textarea {
  border-radius: 16px;
  border: 1px solid #ccc;
  height: 40px;
  padding: 5px 10px;
  font-size: 14px;
}
.booking_form_new input[type="submit"] {
  width: 200px;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  margin-bottom: 20px;
}
.notes_textarea {
  background: #fbcfff;
  height: 100px !important;
  font-style: italic;
}
#results .ajax-admin .alert.alert-danger p {
  color: #a94442 !important;
}
.circle-consent {
  background: red;
  padding: 5px;
  border-radius: 19px;
  width: 20px;
  height: 20px;
  font-size: 8px;
  color: #fff !important;
}
/* .circle-consent {
  background: red;
  padding: 5px;
  margin-top: 8px;
  border-radius: 19px;
  width: 20px;
  height: 20px;
  font-size: 8px;
  position: relative;
  top: -5px;
  right: 2px;
  clear: left;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
} */
/* @media all and (max-width: 768px) {
  .circle-consent {
    background: red;
    padding: 5px;
    margin-top: 8px;
    display: inline-block;
    width: auto;
    border-radius: 19px;
    width: 20px;
    height: 20px;
    font-size: 8px;
    position: relative;
    top: -5px;
    right: 2px;
  }
} */

.total_past_emsculpt {
  background: #e07200;
  color: #fff;
  padding: 5px;
  width: 100%;
  display: block;
}
.glflex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.glflex .pluz.past {
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  color: #8a7ec6;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  padding-bottom: 4px;
}
.missed_calls_container {
  padding: 10px;
  background: #51a4b5;
}
.missed_calls_container .row {
  margin-bottom: 2px;

  color: #fff;
}
.missed_calls_container .bbot {
  border-bottom: 1px solid #fff;
}
.generate_consent {
  padding: 10px;
  background: #51a4b5;
}
.alert-warning2 {
  border: 1px solid #cecece;
  padding: 7px 14px;
  margin-top: 14px;
  margin-bottom: 4px;
}
.update_form {
  padding-bottom: 20px;
  /* display: inline-flex; */
  flex-direction: column;
}
.no-treatment-plan {
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
}
.section_title {
  background: #f6dafe;
}
.bg_all {
  background: #aac5e6;
}
.section_title.note_title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.past_sessions {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* .flex-col .btn.btn-primary:focus{
    background: #cecece;
    color: #000;
    font-weight: bold;
} */
.flex-col .btn.btn-primary:hover {
  background: #ef95de;
  color: #000;

  outline: none;
}
.flex-col .btn.btn-primary:active {
  background: #ef95de;
  color: #000;
}
.section_title h2 {
  color: #155e91;
  font-size: 16px;
  text-align: center;
  margin: 0;
  font-weight: normal;
  padding: 10px 0 15px 0;
}
.flex-col .btn {
  margin-left: 5px;
}

.credits_completed.activate {
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid #34dcbd;
  color: #34dcbd;
  text-align: center;
  justify-content: center;
}
.credits_completed.ongoing_t.active {
  background: white;
  text-align: center;
  justify-content: center;
  border: 1px solid #dc34a7;
  color: #dc34a7 !important;
}
.today-btn,
.tomorrow-btn {
  background: #fbcfff;
  border: 1px solid #2e6da4;
  color: #302c2c;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50px;
  margin: 0 auto 10px auto;
}
.today-btn.active,
.tomorrow-btn.active {
  background: #ec5ffa;
  color: #fff;
}

/* quickday chip rows (booking + callback), owner 2026-09-15 (T-214): Today
   and Tmrw fill the first row 50/50, the weekday chips share the row below */
.callback-quickdays,
.booking-quickdays {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 15px !important;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

/* the booking container also carries Bootstrap's .row: its clearfix
   ::before/::after would become extra flex items and wrap Tmrw off the
   first row, so they are switched off here */
.callback-quickdays::before,
.callback-quickdays::after,
.booking-quickdays::before,
.booking-quickdays::after {
  display: none;
  content: none;
}

.callback-quickdays .callback-day-btn,
.booking-quickdays .booking-day-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 40px;
  min-height: 44px;
  padding: 6px 8px;
  text-align: center;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 70px;
  background: #fbcfff;
  color: #000;
}

/* Today / Tomorrow chips: bigger tap target, stand out from the
   weekday chips, always first on the row */
.callback-quickdays .callback-day-btn--primary,
.booking-quickdays .booking-day-btn--primary {
  flex: 0 0 calc(50% - 3px);
  min-height: 52px;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
}

.callback-quickdays .callback-day-btn.active,
.booking-quickdays .booking-day-btn.active {
  background: #ec5ffa;
  color: #fff;
}

/* owner 2026-09-16: the booking row must not share the callback row's pink;
   booking = violet, callback keeps pink. Solid mid-violet with white text so
   the chips read against the mint lead-row background (the pale tint did not) */
.booking-quickdays .booking-day-btn {
  background: #cdbdff;
  color: #4c1d95;
}
.booking-quickdays .booking-day-btn.active {
  background: #8b5cf6;
  color: #fff;
}

.bnz {
  padding: 10px;
  background: #ffffff;
  padding-top: 10px;
  display: block;
  padding-bottom: 30px;
  overflow: hidden;
}
.bnz h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}
.booking-time-circles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  justify-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
  padding-top: 15px;
}
.booking-time-circles .time-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background 0.2s;
  font-size: 12px;
  text-align: center;
  margin-bottom: 15px;
  background: #cdbdff; /* owner 2026-09-16: same colours as the booking Today/Tomorrow chips */

  color: #4c1d95;
}
.bnz .booking-time-circles .time-circle {
  background: #f5c1ff;
  color: #000000;
}
.booking-time-circles .time-circle.active {
  background: #8b5cf6;
  color: #ffffff;
  text-align: center;
}
/* Request Callback keeps its original selected colour; the violet above is
   for the booking form only (owner 2026-09-16) */
.bnz .booking-time-circles .time-circle.active {
  background: #cc75e7;
  color: #ffffff;
}

.credits_completed {
  display: flex;
  justify-content: space-between;
  background: #34dcbd;
  font-size: 20px;
  color: #fff;
  padding: 5px;
}
.credits_completed.tp {
  display: flex;
  flex-direction: column;
  /* margin: 10px auto; */
  text-align: center;
  font-size: 15px;
}

.consent_frms .credits_completed.tp {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 15px;
  height: auto;
  /* margin-top: 10px;
  margin-bottom: 10px; */
  width: 160px;
}

.credits_completed.tp a {
  color: #fff;
}
/* "Save as PDF" under a completed consent (2026-09-15): a button, the
   footer script consent_pdf paints the form in the browser and downloads it. */
.credits_completed.tp .consent-pdf-link {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  text-decoration: underline;
  opacity: 0.9;
  cursor: pointer;
}
.credits_completed.tp .consent-pdf-link:hover,
.credits_completed.tp .consent-pdf-link:focus {
  opacity: 1;
  color: #fff;
}
/* Shared by every Save as PDF button: busy state + the off-screen iframe the
   consent page is painted from (desktop width so phones get the same PDF). */
.consent-pdf-btn.consent-pdf-busy,
.consent-pdf-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.consent-pdf-frame {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 1100px;
  height: 1200px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.payments_rec {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  background: #df60ec;
  font-size: 20px;
  color: #fff;
  padding: 5px;
  border: none;
}
.consnt {
  height: auto;
  border-radius: 0;
  color: #337ab7;
  font-size: 15px;

  background: #95b3d070;
  display: flex;
  text-align: center;
  width: auto;

  /* margin-bottom: 10px; */
  font-weight: bold;
  flex-direction: column;
}
.consnt .nr_active {
  color: #ff7a7a;
  background: #fff;
}
.payments_rec.butz {
  width: 100%;
}
.payments_rec.butz:hover {
  background: #34dcbd;
}
.payments_rec a {
  color: #fff;
}
.cont_cnst {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  align-self: end;
}
.payments_rec.consnt {
  margin-top: 0;
  width: 160px;
}
.payments_rec.consnt a {
  color: #337ab7;
}
.treat_title {
  font-size: 25px;
  color: #155e91;
}
.treat_title .small_caption {
  font-size: 20px;
  margin-bottom: 5px;
}
.treat_title .patient_n {
  color: #da2bed;
}
.treat_title .credits_completed {
  width: fit-content;
  margin-bottom: 5px;
}
.treat_title .credits_completed .nr_active {
  margin-left: 10px;
}
.treat_title .credits_completed.ongoing_t {
  background: #4485ff;
}
.treat_title img {
  height: 36px;
}
.cancel_btn {
  margin-bottom: 3px;
}
.create_t_plan {
  display: block;
  width: auto;
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 0;
  background: #59bed2;
  border: none;
}
.update_booking {
  margin-bottom: 10px;
}
.info_btn {
  background: #ff9000;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  border: 1px solid #fff;
}
.edit_btn {
  background: #3379b7;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  border: none;
  border: 1px solid #fff;
  font-size: 12px;
}
.delete_btn {
  background: #af5fad;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 1px solid #fff;
}
.container {
  background: #fff;
}
.all_service_areas {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
  margin-bottom: 10px;
}
.all_service_areas.single {
  justify-content: normal;
}

.sessions_selected {
  background: #000000;
}
.sessions_selected .title_area {
  color: #fff;
}

.cont_selection {
  font-size: 15px;
  /* margin-top: 10px; */
  color: #fff;
  padding: 5px 15px;
  /* margin-bottom: 5px; */
}
.areas_selection {
  background: #ba9658;
}

.text-color-areas {
  color: #ba9658;
}

.treatment_plan img {
  width: 110px;
}
.area_service {
  text-align: center;
  padding: 5px;
}
.title_area {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
}
.appt_cell.red {
  background: #bbbbbb;
  color: #fff;
}
.appt_cell {
  background: #675d97;
  color: #fff;
  border: 1px solid #ddd8d8;
  margin-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}
.customer-details {
  background: #59bed2;
  padding: 15px;
  color: #fff;
  margin-bottom: 10px;
  font-size: 22px;
}
@media all and (max-width: 768px) {
  .customer-details {
    margin-top: 10px;
  }
}
.customer-buttons {
  background: #59bed2;
  text-align: right;
  padding: 10px;
  /* marg */
}
.customer-buttons .btn {
  border-radius: 0;
  border: none;
}

.customer-buttons .btn.btn-primary:hover {
  background: #cecece;
  color: #000;

  outline: none;
}
.customer-buttons .btn.btn-primary:focus {
  background: #cecece;
  color: #000;

  outline: none;
}
.customer-buttons .btn.btn-primary:active {
  background: #cecece;
  color: #000;
}
.table-header {
  background: #baaef9;

  padding: 15px;
  color: #fff;
  margin-bottom: 5px !important;
  border-radius: 5px;
}
.table-header.past_bookings {
  background: #8a7fc6;

  padding: 15px;
  color: #fff;
}
.table-header.cancelled {
  background: #76718c;

  padding: 15px;
  color: #fff;
}
.row-plan {
  padding: 15px 0;
  background: #aac5e6;
  margin-top: 0;
  font-weight: bold;
}
.row-plan-desc {
  padding: 15px;
  background: #fff;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* border-bottom:5px solid #D9D9D9; */
  margin-top: 10px;
}
.row-plan-desc.ze_notes {
  padding: 15px 0 15px 0;
  border-bottom: 1px solid #d9d9d9;
}

.row-plan-desc .btn {
  border-radius: 0;
  border: none;
}
.title_b {
  font-weight: bold;
  font-size: 20px;
}
.title_b.create {
  margin: 10px;
  margin-left:0;
  margin-right:17px;
}
.title_b.create span {
  background: #59bed2;
  display: inline-flex;
}
.title_b.title_plan {
  color: #155e91;
}
.title_b.create span:hover {
  background: #59bed2;
}
.title_b span {
  background: #337ab7;
  cursor: pointer;
  display: block;
  color: #fff;
  font-size: 15px;
  padding: 15px;
}
.title_b span:hover {
  background: #286090;
}
.notes {
  padding: 5px 35px;
  /* background: #e1e7f1; */
}

.the_container_tabs {
  border-bottom: 5px solid #d9d9d9;
  padding-bottom: 15px;
  background: #fff;
}

.right_pay {
  padding: 0;
}
.right_pay form {
  margin-top: 10px;
}
.left_pay {
  padding: 0;
}
.left_pay .row-plan-desc {
  border-bottom: none;
}
.flex-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
.flex-col .left_d {
  display: flex;
  flex-direction: row;
}
.flex-col .right_d {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}
.flex-col .notes_button {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background: #eb4ab7;
}
.flex-col .pay_button {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background: #eb4ab7;
}
.flex-col .editz_button {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: #eb4ab7;
}
.initial_note,
.no-records {
  background: #c0cde7;
  padding: 15px;

  margin-bottom: 30px;
  margin-top: 10px;
}
.note-row {
  background: #fff;

  padding: 5px;
  padding-left: 0;
  margin: 0;
  margin-bottom: 5px;
}
.note_col {
  border-right: 1px solid #ffffff;
}
.boder-lr {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.bg-create {
  background: #337ab7;
}
.services {
  padding: 15px;
}
.services label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 20px;
  margin-right: 10px;
}
.service_listing {
  /* margin-bottom:15px; */
  /* padding-left:15px;
    padding-right:15px; */
  padding: 0;
  margin: 0;

}
/* ordering create treatment plan */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 6px;
}
/* ✅ MOBILE FIX — stack columns vertically */
@media (max-width: 768px) {
  .services {
    grid-template-columns: 1fr;   /* single column */
    grid-auto-flow: row;          /* normal vertical flow */
  }
}

.the_service input[type="radio"] { display:none; }
.the_service label {
  display:flex; align-items:center; justify-content:center;
  background:#2f6f9f; padding:10px; border-radius:10px; cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease;
}
.the_service input[type="radio"]:checked + label {
  outline:2px solid #a0e3ff; box-shadow:0 0 0 3px rgba(160,227,255,.25);
}
.preset-toolbar{background:#f4f7fb;border:1px solid #e3e9f3;border-radius:12px;padding:10px 12px;margin:10px 0 14px}
  .preset-title{font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;color:#334}
  .preset-buttons{display:flex;flex-wrap:wrap;gap:8px}
  .preset-btn{border:1px solid #cdd7ee;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12px;line-height:1}
  .preset-btn:active{transform:scale(.98)}
  .flash{animation:flash-bg .8s ease}
  @keyframes flash-bg{0%{box-shadow:0 0 0 0 rgba(70,180,255,.6)}100%{box-shadow:0 0 0 14px rgba(70,180,255,0)}}

/* ordering create treatment plan */


.p0 {
  padding: 0;
}
.m0 {
  margin: 0;
}
.total_sessions {
  padding: 10px;
  font-size: 14px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.total_sessions span {
  font-size: 23px;
  background: #fff;
  border-radius: 80px;
  color: #000;
  width: 65px;
  height: 65px;
  justify-items: center;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
}
.area_total {
  background: #fff;
  padding: 10px;
  font-size: 14px;
  /* color: #fff; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 5px solid #d9d9d9;
}
.area_total span {
  font-size: 23px;
  /* background: #fff; */
  color: #fff;
  border-radius: 80px;

  width: 65px;
  height: 65px;
  justify-items: center;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
  align-self: flex-end;
}
.img_and_desc {
  text-align: center;
}
.img_and_desc .desc {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}
.credit_and_used {
  display: flex;
  flex-direction: row;
  font-size: 18px;
  color: #337ab7;
  text-align: center;
}

.credit_and_used .credit {
  border-left: 1px solid #337ab7;
  border-right: 1px solid #337ab7;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .credit .top {
  border-bottom: 1px solid #337ab7;
}
.credit_and_used .completed {
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .completed .top {
  border-bottom: 1px solid #337ab7;
}
.areas_ {
  font-size: 14px;
  color: #337ab7;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.nr_sand_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.nr_sand_area_profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #ba9658;

  width: 100%;
  margin-bottom: 0;
}
.span_sess_left {
  border-radius: 70px;
  height: 70px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 70px;
  align-self: center;
  border: 2px solid #ba9658;
  margin-bottom: 37px;
}
.span_sess_left_profile {
  width: 100%;
  display: block;
  margin-top: 0;
  background: #34dcbd !important;
  color: #fff !important;
  /* border-bottom: 1px solid #fff;
    border-top: 1px solid #fff; */
}
.past_session {
  margin-bottom: 10px;
  background: #e7e3ff;
  text-transform: capitalize;
  margin-top: 40px;
}
.attended_class {
  background: #d9fff8;
  margin-top: 20px;
}

.areas_ .top {
  color: #fff;
  padding: 5px;
}
.areas_ .bottom {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
.areas_ .bottom .active_zareas {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #ffffff; */
  padding: 3px;
  margin-top:10px;
}
.areas_ .bottom .active_zareas.profile_history_active_area {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 3px;
  margin-top: 10px;
  color: #fff;
}
.active_zareas form {
  text-align: center;
}
.active_zareas img {
  width: 100px;
}
.record_new_sessz {
  background: #34dcbd;
  width: 90px;
  height: 90px;
  color: #fff;
  border-radius: 100px;
  border: navajowhite;
  font-size: 30px;
}
.credit_and_used .total {
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .total .top {
  border-bottom: 1px solid #337ab7;
}
.small_g {
  font-size: 11px;
  line-height: 1;
}
.img_and_desc img {
  width: 110px;
}
.img_and_desc.sessions_selected {
  color: #fff;
}
.the_date {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 7px 7px;
  background: #baaff9;
  margin-bottom: 1px;
  color: #fff;
  align-items: center;
}
.the_date a {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  padding: 2px;
  margin-top: -1px;
  width: 50px;
  height: 20px;
  text-align: right;
}
@media all and (max-width: 767px) {
  .the_date {
    display: flex;
    /* justify-content: center; */
  }
  .the_date a {
    width: 19px;
  }
  .credit_and_used {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .treat_title img {
    height: 36px;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .treat_title .credits_completed {
    width: 100%;
  }
  .active_zareas img {
    width: 50px;
  }
  .span_sess_left {
    width: 50px;
    height: 50px;
  }
  .record_new_sessz {
    width: 60px;
    height: 60px;
  }
}

.history_dates.small .the_date,
.completed_area {
  font-size: 12px;
}
.history_dates.small .date_single {
  margin-right: 0;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.history_dates.small {
  width: 100%;
  text-align: center;
}
.completed_area {
  background: #a065db;
  color: #fff;
  padding: 5px;
  margin-top: 10px;

  width: 100%;
  text-align: center;
}

.history_title {
  font-weight: bold;
  text-align: center;
}
.completed_treatment {
  background: #1e4e7d;
  padding: 2px;
  color: #fff;
  font-size: 10px;
}
.d-none-2{display:none;}


/* .the_service label {
  display: inline-flex;
  margin: 0;
  padding: 10px;
} */
.the_service label.active_service {
  background: #59bed2;
}
.the_service label:hover {
  background: #000;
  cursor: pointer;
}

.edit_fr {
  background: #cecece;
}
@media all and (max-width: 767px) {
  .consent_frms {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .consnt.butz {
    font-size: 13px;
  }
}
.consent_frms form {
  display: flex;
  justify-content: flex-end;
  width: 160px;
}
.consent_frms {
  display: flex;
  justify-content: flex-end;
}
.consnt.butz.em {
  line-height: 1.4;
}

.consnt.butz {
  align-items: center;
  display: flex;
  flex-direction: row;

  line-height: 1.4;
  padding: 15px 10px 14px 15px;
  background: #95b3d070;
  display: flex;
  flex-direction: row;
  border: navajowhite;
  color: #337ab7;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.plus-circle {
  margin-left: 5px;
  background: #337ab7;
  width: 23px;
  height: 23px;
  border-radius: 15px;
  color: #fff;
  font-size: 14px;
}

.customer-details input[type="submit"] {
  background: #337ab7;
  color: #fff;
  border: 0;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 15px;
}
.customer-details p {
  margin: 0;
}

.customer-details .success {
  color: #3c763d;
  font-size: 13px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.customer-details .error {
  color: #a94442;
  background-color: #f2dede;
  font-size: 13px;
  border-color: #ebccd1;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.flex_date_duration {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
}
.flex_date_duration.no-wrap {
  justify-content: flex-start;
  align-items: center;
  z-index: 99999;
  position: relative;
}

.appt_cell .sessionDateTime {
  background: #ffffff !important;
  padding: 5px;
  border-radius: 5px;
  color: #6d6d6d;
  display: inline-block;
  font-weight: bold;
  text-align: right;
}
.appt_cell .duration_t {
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  text-align: right;
}
.flex_date_duration .serviceNames {
  padding: 5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5pc;
  width: 80px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_date_duration .serviceNames_ {
  display: none;
}
.right_c .ajax-calendar {
  margin-bottom: 10px;
}

.circle-star {
  width: 20px;
}
@media all and (min-width: 768px) {
  .circle-star {
    margin-bottom: 2px;
    display: inline-block;
  }
}
.update_pay {
  background: #337ab7 !important;
  margin-bottom: 10px !important;
}
.update_pay:hover {
  background: #7761ec !important;
}
.circle-star img {
  width: 20px;
}

.cal-sb-badge {
      font-size: 10px;
    color: #ffffff;
    background: #43a047;
    padding: 2px 6px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    height: 20px;
    display: block;
    line-height: 16px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Self-booked consultation confirmation status — sits below the SB badge
   in the main calendar grid. Only rendered for is_self_booked + consultation
   appointments. */
.cal-confirm-badge {
    font-size: 10px;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    height: 20px;
    display: block;
    line-height: 16px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 3px;
}
.cal-confirm-badge--yes {
    background: #36e577;
    color: #000000;
}
.cal-confirm-badge--no {
    background: #dc2626; /* red */
}

.ask_reviews input[type="submit"] {
  background: #337ab7;
  color: #fff;
  border: 0;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 15px;
}
.ask_reviews .alert-success {
  color: #3c763d;
  font-size: 13px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.lead .lead_control_appts {
  font-size: 14px !important;
}
.followuptime {
  margin-bottom: 5px;
}
.bg_follow_up_cancel {
  background: #fbcfff;
  padding: 10px;
  margin-bottom: 10px;
}
.all-notes {
  padding-bottom: 15px;
}
.all-notes .note_col {
  color: #000;
  padding-right: 10px;
}
.title_notes_b {
  background: #5abed2;
  color: #fff;
  border-top: 5px solid #3479b7;
  padding-top: 5px;
  padding-bottom: 6px;
  margin-bottom: 17px;
}
.all-notes .section_title h2 {
  text-align: left;
  padding-left: 10px;
}

.all-notes .title_b {
  padding-left: 15px;
}
.form-add-note {
  margin-bottom: 10px;
  background: #f6dafd;
  padding-bottom: 10px;
}
.all-notes .row-plan-desc.ze_notes {
  padding: 15px 0 15px 0;
  border-bottom: 1px solid #d9d9d9;
  background: #95b3d0;
}

.all-notes .flex_date_duration img {
  height: 10px;
}

.all-notes .note_date {
  background: #ffffff !important;
  padding: 5px;
  border-radius: 5px;
  color: #6d6d6d;
  display: inline-block;
  font-weight: bold;
  text-align: right;
  font-size: 11px;
  width: 100%;
}
.all-notes .flex_date_duration {
  margin-top: 0;
}
.all-notes .serviceNames {
  width: auto;
  font-size: 11px;
  height: 22px;
}
.all-notes .flex_date_duration {
  align-items: center;
}

.upload_form_camera,
.photos_container {
  background: #ffffff;
}

.open_camera_btn {
  background-color: #35dcbd;
  color: white;
  text-align: center;
  border: none;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 200px;
  border-radius: 35px;
  margin-top: 20px;
}
.upload_btn {
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
  background: #eb4ab7;
  border: 1px solid #fff;
}
.upload_btn:hover {
  background: #28a78f;
}
.open_camera_btn:hover {
  background-color: #28a78f;
  color: #fff;
}
.manual_upload_group {
  margin: 24px auto 0;
  padding: 16px 12px 18px;
  max-width: 320px;
  border: 1px dashed #cfd4db;
  border-radius: 10px;
  background: #fafbfc;
  text-align: center;
}
.manual_upload_divider {
  position: relative;
  text-align: center;
  margin: -28px auto 14px;
  width: 100%;
}
.manual_upload_divider span {
  background: #fafbfc;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Camera-roll upload: date (inline jQuery UI calendar) and time (hour/minute
   selects) the pictures were taken. No native date/time inputs (rule #7). */
.photo-when {
  margin: 0 auto;
  max-width: 280px;
  text-align: left;
}
.photo-when-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 6px;
  white-space: nowrap;
}
.photo-when-cal .ui-datepicker {
  width: 100%;
  margin: 0;
  padding: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.photo-when-cal .ui-datepicker table {
  margin: 0;
  font-size: 14px;
}
.photo-when-cal .ui-datepicker td {
  padding: 1px;
}
.photo-when-cal .ui-datepicker td a,
.photo-when-cal .ui-datepicker td span {
  min-height: 36px;
  line-height: 34px;
  padding: 0;
  text-align: center;
}
.photo-when-cal .ui-datepicker .ui-datepicker-prev,
.photo-when-cal .ui-datepicker .ui-datepicker-next {
  cursor: pointer;
}
.photo-when-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.photo-when-time .photo-when-label {
  margin: 0 4px 0 0;
}
.photo-when .photo-when-select {
  width: 76px;
  height: 40px;
  padding: 6px 8px;
  font-size: 16px;
  background-color: #fff;
}
.photo-when-colon {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}
.manual_upload_hint {
  font-size: 11px;
  color: #6b7280;
  margin: 6px auto 12px;
  max-width: 260px;
  line-height: 1.4;
}
.manual_upload_btn {
  background-color: #4a90e2;
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 220px;
  padding: 8px 14px;
  border-radius: 35px;
  font-weight: 600;
}
.manual_upload_btn:hover {
  background-color: #2a6fbf;
  color: #fff;
}
.finance-link-btn {
  background-color: #6f42c1;
  border-color: #6f42c1;
}
.finance-link-btn:hover,
.finance-link-btn:focus {
  background-color: #5a36a0;
  border-color: #5a36a0;
}
.finance_link_panel {
  padding: 18px 8px 22px;
}
.finance_link_card {
  max-width: 420px;
  margin: 0 auto 24px;
  padding: 24px 28px 26px;
  background: linear-gradient(180deg, #f8f6ff 0%, #ffffff 100%);
  border: 1px solid #e4dbf7;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.06), 0 6px 18px rgba(111, 66, 193, 0.04);
  text-align: center;
}
.finance_link_intro {
  margin: 0 0 18px;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}
.finance_link_field {
  margin: 0 0 18px;
  text-align: left;
}
.finance_link_label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6f42c1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.finance_link_channel {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #d8d2ea;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236f42c1' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.finance_link_channel:focus {
  outline: none;
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.15);
}
.finance_link_send_btn {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  background: linear-gradient(180deg, #7a4bd1 0%, #6f42c1 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.25);
  transition: transform 0.05s, box-shadow 0.15s, background 0.15s;
}
.finance_link_send_btn:hover,
.finance_link_send_btn:focus {
  background: linear-gradient(180deg, #6f42c1 0%, #5a36a0 100%);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.35);
  outline: none;
}
.finance_link_send_btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.25);
}
.finance_link_send_btn:disabled {
  background: #c9bee2;
  cursor: not-allowed;
  box-shadow: none;
}
.finance_link_response {
  margin: 14px 0 0;
  padding: 0;
  font-size: 13px;
}
.finance_link_response.alert {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 14px 0 0;
}
.finance_link_history_row:nth-child(even) {
  background: #fafbfc;
}
.select_area_photo {
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}
.img_preview_photo img {
  max-width: 100%; /* Responsive image */
  height: auto; /* Maintain aspect ratio */
  margin-top: 10px; /* Space above the preview image */
  margin-bottom: 10px;
  text-align: center;
}
.active_zareas .photo-item {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  /* box-shadow: 0 0 5px rgb(0 188 156); */
  border: 1px solid #baaef9;
  background: #beccca;
}
.photo-item.active {
  background: #00bc9c;
  padding: 5px;
  box-shadow: 0 0 5px rgb(0 188 156);
  border: 1px solid #baaef9;
}
.photo-item {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 143px;
  margin: 0 auto;
}
.photo-item img {
  margin-bottom: 5px;
}
.response_photo_upload {
  display: none;
}
.response_photo_upload.alert-danger {
  display: block;
}
.response_photo_upload.alert-success {
  background: #43be94;
  color: #fff;
  display: block;
}

.modal-fullscreen {
  max-width: 100%;
  margin: 0;
}
.modal-dialog {
  width: 100%;
}
.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height:80vh;
}

#photoComparisonContent {
  /* display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
  align-items: center; */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  align-items: baseline;
}

#photoComparisonContent img {
  display: block;
  max-width: 1000px;
  max-height: 600px;
  height: auto;
}

#photoComparisonContent .date_single {
  margin-top: 5px;
  font-size: 12px;
  text-align: left;
  background: #7870d2;
  padding: 5px;
  color: #fff;
}

#photoComparisonModal .modal-header .close {
  background: #f56565;
  border-radius: 30px;
  line-height: 1;
  opacity: 1;
  padding: 0px 6px 6px 5px;
}
#photoComparisonModal .modal-header .close span {
  color: #fff;
}
.load_photos {
  border-radius: 30px;
  background-color: #00bc9c;
  color: #fff;
  border: 1px solid #fff;
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}

.compare_btn {
  border-radius: 30px;
  background-color: #00bc9c;
  color: #fff;
  border: 1px solid #fff;
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}
.no-photos-alert {
  margin-left: 4px;
  margin-right: 5px;
  text-align: center;
}
.signature_button_with_pen.blue {
  background: #84bcf7;
}

.signature_button_with_pen {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  background: #5aa5f2;
  font-size: 20px;
  color: #fff;
  padding: 5px;
  border: none;
  width: 380px;
  margin-bottom: 10px;
}
.signature_button_with_pen .pen_sig {
  width: 30px;
}
.signature_button_with_pen a {
  color: #fff;
}

.the_sig {
  width: 100%;
}
.tk_ph_but {
  position: relative;
  margin-left: 5px;
  cursor: pointer;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  font-size: 20px;
  align-items: center;
}
.tk_ph_but img {
  width: 70px;
}
.tk_ph_but span {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #baaef9;
  color: #fff;
  border-radius: 15px;
  top: 0px;
  right: -5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.diff_bor {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid pink;
}
/* Default fallback color for appointment requests without location class */
#xpand_appointment_requests .appt_cell.approve_booking_cell {
  background: #aa0082 !important;
}

.access_profile {
  background: #ec4bb7;
  padding: 7px 10px;
  display: inline-block;
  border-radius: 16px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #fff;
}
.access_profile:hover {
  background: #5abed2;

  color: #fff;
  text-decoration: none;
}
/* .time-slots-container { display: flex; flex-wrap: wrap; gap: 10px;     justify-content: space-between;} */

.time-slots-container {
  display: flex;
  flex-direction: column; /* Stack groups vertically */
  gap: 10px;
}

.time-slot-group {
  /* display: flex; */
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  gap: 10px;
  justify-content: space-between; /* Adjust as needed */
}
.time-slot-btn {
  padding: 10px 15px;
  text-align: center;
  background-color: #def9ff;
  background-color: #d1e8f2;
  background-color: #e3f2fd;
  background-color: #f5f5f5;
  background-color: #baaff9;

  color: #fff;

  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 5px;

  background-color: #e3dfff;

  background-color: #ec4bb7;
  /* background-color: #ffbae8; */
  color: #fff;
  /* color: #000000; */
  border: 1px solid #776ab6;
  cursor: pointer;
  border-radius: 20px;
}

.time-slot-btn.morning {
  background-color: #d37cfc;
}

.time-slot-btn.midday {
  background-color: #b059d9;
}

.time-slot-btn.afternoon {
  background-color: #853ca7;
}

.time-slot-btn.active {
  background-color: #71cfe4;
  background-color: #007f91;
  background-color: #ff9800;
  background-color: #4caf50;
  background-color: #eb4ab7;
  color: #fff;
  /* color: #000; */
  border-color: #024b5b;
  border-color: #ffffff;

  background-color: #baaef7;
  background-color: #41dab7;
  color: #fff;
  /* color: #000; */
  border-color: #ec4bb7;
}
#appointments_new .ui-datepicker .ui-datepicker-header,
#patient_profile_id .ui-datepicker .ui-datepicker-header {
  background: #71cfe4;
  color: #1e5d57;

  background: #86c5da;
  background: #003366;
  background: #455a64;
  background: #baaff9;
  color: #ffffff;
}

#appointments_new .ui-state-active,
#appointments_new .ui-widget-content .ui-state-active,
#appointments_new .ui-widget-header .ui-state-active,
#appointments_new a.ui-button:active,
#appointments_new .ui-button:active,
#appointments_new .ui-button.ui-state-active:hover,
#patient_profile_id .ui-state-active,
#patient_profile_id .ui-widget-content .ui-state-active,
#patient_profile_id .ui-widget-header .ui-state-active,
#patient_profile_id a.ui-button:active,
#patient_profile_id .ui-button:active,
#patient_profile_id .ui-button.ui-state-active:hover {
  border: 1px solid #ff9800 !important;
  background: #71cfe4 !important;
  background: #e3f2fd !important;
  background: #eb4ab7 !important;
  font-weight: normal !important;
  color: #000 !important;
  color: #fff !important;
}
#appointments_new .form-control {
  border: 1px solid #7869b6;
  background: #e5e2ff;
  height: 40px;
  border-radius: 20px;
}

#appointments_new #book_ajax_form_calendar .tge_suc,
#patient_profile_id #book_ajax_form_calendar .tge_suc {
  background: #5abed2;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
#patient_profile_id #calendar-book-new .tge_suc {
  background: #8a7fc6;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
#calendar-book-new .alert-warning {
  background-color: #5abed2;
}
.submit_new_appt {
  background: #eb4ab7 !important;
}
.book-now-btn.deny_booking_no_email {
  background: #d12377;
}

.book-now-btn.approve_booking {
  background: #35dcbd;
  color: #08382f;
}

#appointments_new .header_appts {
  padding: 10px 0;
}

#appointments_new .header_appts,
#appointments_new .header_appts .container {
  background-color: #57a7b9;
  background-color: #005f73;
  background-color: #009688;
  background-color: #1e3a8a;
  background-color: #59bed2;
}

#appointments_new .footer_f {
  padding: 30px 0;
}

#appointments_new .footer_f,
#appointments_new .footer_f .container {
  background-color: #57a7b9;
  background-color: #005f73;
  background-color: #009688;
  background-color: #1e3a8a;
  background-color: #59bed2;
  color: #fff;
  text-align: center;
}

#appointments_new .header_appts .container img {
  padding: 10px 0;
  width: 150px;
  margin: 0 auto;
}

#appointments_new h1 {
  color: #000;
  font-size: 18px;

  font-size: 18px;
  margin-bottom: 0px;
  font-weight: 400;
  margin-top: 10px;
}

#appointments_new .book_ajax_form_calendar {
  padding-top: 0;
}

#appointments_new .book-now-btn {
  background: #ec4bb7;
  border: 2px solid #baaef9;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
}
.book-now-btn.rqst {
  background-image: linear-gradient(to right in oklab, rgb(212, 168, 83) 0%, rgb(196, 152, 67) 100%);
  color: #ffffff;
  height: 50px;
  font-size: 16px;
  border: none;
  padding: 0;
  margin-bottom: 0;
  border-radius:12px;
  margin-top: 25px;
}
.book-now-btn.rqst:hover {
  background-image: linear-gradient(to right in oklab, rgb(196, 152, 67) 0%, rgb(180, 136, 51) 100%);
  color: #ffffff;
  height: 50px;
  font-size: 16px;
  padding: 0;
  margin-bottom: 0;
}

#appointments_new .h1 .img-responsive {
  width: 150px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 5px;
  filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(180deg);
}

#appointments_new .book-now-btn:hover {
  background: #5abed2;
  border: 2px solid #baaef9;
}

#appointments_new .footer_f .logo {
  width: 150px;
  margin: 0 auto;
  margin-bottom: 10px;
}

#appointments_new .hours_slots_new_booking {
  margin-top: 30px;
}

#appointments_new .right_c .ajax-calendar {
  margin-bottom: 30px;
}
#appointments_new .middle-content {
  padding-bottom: 30px;
  flex-grow: 1;
  display: flex;
  align-items: center;

  justify-content: center;
}
.middle-content .container {
  background: transparent;
}
#appointments_new .middle-content .container {
  background: #85c5d1;
}
@media all and (max-width: 768px) {
  #appointments_new .middle-content .container {
    width: 100%;
  }
  .text-center-sm {
    text-align: center;
  }
}
#appointments_new h2 {
  color: #000;
  font-size: 19px;
  font-family: "Inter", sans-serif;
  margin-top: 40px;
  color: #baaff9;
  color: #fff;
}

#appointments_new #emailForm input[type="email"] {
  margin-top: 40px;
  margin-bottom: 40px;
}
#appointments_new input[type="submit"] {
  background: #ec4bb7;
  color: #fff;
  border: 0;
  border-radius: 0;
  margin-top: 10px;
  padding: 6px 50px;
  border-radius: 15px;
  border: 2px solid #7869b6;
}

#appointments_new .success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
#appointments_new p {
  margin: 0;
}
#appointments_new .error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

#appointments_new h3 {
  color: #000;
  font-size: 14px;
  font-family: "Inter", sans-serif;
}
#appointments_new {
  height: 100%;
  margin: 0;

  height: 100%;
  margin: 0;
  display: flex;

  flex-direction: column;
}
/* Owner 2026-10-24: the Cloudflare Turnstile captcha in the booking form, centred like the button. */
#appointments_new .booking-captcha {
  display: flex;
  justify-content: center;
}
.form-control.select_pink {
  border: 3px solid #df60ec;
  height: 50px;
}

.bulk-blocks {
  display: inline-block;
  background: #f3f3f3;
  padding-top: 10px;
  border: 1px solid #c4b1b1;
  width: 100%;
}
.block .form-row {
  display: inline-block;
  background: #baadf9;
  background: #fbcfff;
  padding-top: 20px;
  margin-bottom: 10px;
  width: 100%;
}
.block .btn-danger {
  background-color: #d12277;
}
.bulk-blocks #add-next-slot,
.bulk-blocks #add-same-slot {
  background-color: #d12277;
  color: #fff;
}
.the-amount {
  display: none;
}
.bulk-blocks .psw-step-header{
  margin-left:15px;
  margin-right:15px;
}
.payments-display h3 {
  background: #3479b7;
  display: inline-flex;
  color: #fff;
  padding: 10px;
  font-size: 14px;
  border-radius: 45px;
}

.mail-wrapper {
  background: #f9fafc;

  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
}

.card-header strong {
  font-size: 1.05rem;
  color: #111827;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  border: none;
  color: #6b7280;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  padding: 6px 14px;
  border-radius: 6px;
}

.nav-tabs .nav-link.active {
  color: #ffffff;
  background: #59bed2;
  font-weight: 600;
  display: flex;
}

/* --- Mail list --- */
.mail-list {
  background: #fff;
}
.mail-list blockquote {
  font-size: 13px;
}
.mail-item {
  border-bottom: 1px solid #eef1f4;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0.75rem 1.25rem;
  font-size: 13px;
}

.mail-item.unread {
  font-weight: 600;
  border-left: 4px solid #0d6efd;
}
.mail-item:hover {
  background-color: #e2e2e2;
}

.mail-item .text-primary,
.mail-item .text-success {
  font-size: 13px;
  font-weight: 600;
}

.mail-item .text-muted {
  font-size: 13px;
  color: #6b7280 !important;
}

.mail-body {
  display: none;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  font-size: 13px;
  line-height: 1.6;
}

.mail-body.active {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reply-box {
  background: #e8f4fd;
  border: 1px solid #b8d4ed;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 15px;
}

.reply-box__header {
  margin-bottom: 8px;
}

.reply-box__label {
  font-size: 13px;
  font-weight: 500;
  color: #1a73e8;
}

.reply-box__label i {
  margin-right: 4px;
}

.reply-box__textarea {
  width: 100%;
  resize: none;
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid #dadce0;
  font-size: 14px;
  line-height: 1.5;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.reply-box__textarea:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
  outline: none;
}

.reply-box__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.reply-box__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-box__attach-btn {
  background: #fff;
  border: 1px solid #dadce0;
  color: #5f6368;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.reply-box__attach-btn:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.reply-box__attach-btn i {
  margin-right: 4px;
}

.reply-box__send-btn {
  background: #1a73e8;
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.reply-box__send-btn:hover {
  background: #1557b0;
}

.reply-box__send-btn:disabled {
  background: #94c4f8;
  cursor: not-allowed;
}

.reply-box__send-btn i {
  margin-right: 4px;
}

/* Attachment list and tags */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attachment-list:empty {
  margin-top: 0;
}

.attachment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e8f0fe;
  border: 1px solid #d2e3fc;
  border-radius: 4px;
  padding: 3px 6px 3px 8px;
  font-size: 12px;
  color: #1a73e8;
  max-width: 200px;
}

.attachment-tag__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-tag__remove {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #5f6368;
  cursor: pointer;
  border-radius: 2px;
}

.attachment-tag__remove:hover {
  background: #d2e3fc;
  color: #c5221f;
}

/* Mail item improvements */
.mail-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.mail-item__info {
  flex: 1;
  min-width: 0;
}

.mail-item__subject {
  color: #1a73e8;
  font-weight: 500;
  margin-bottom: 2px;
}

.mail-item__participants {
  font-size: 12px;
  color: #5f6368;
}

.mail-item__date {
  font-size: 12px;
  color: #70757a;
  white-space: nowrap;
}

iframe.mail-item__body-content {
  width: 100%;
  border: none;
  min-height: 100px;
  overflow: hidden;
}

.unread-badge {
  background: #e160ec;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
}

/* Gmail Attachments */
.gmail-attachments {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.gmail-attachments-header {
  font-weight: 600;
  font-size: 12px;
  color: #495057;
  margin-bottom: 0.5rem;
}

.gmail-attachments-header i {
  margin-right: 4px;
}

.gmail-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gmail-attachment-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  color: #495057;
  text-decoration: none;
  transition: all 0.2s;
}

.gmail-attachment-link:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  text-decoration: none;
  color: #212529;
}

.gmail-attachment-icon {
  margin-right: 6px;
  font-size: 14px;
}

.gmail-attachment-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-attachment-size {
  color: #6c757d;
  font-size: 11px;
  margin-left: 4px;
}

/* Compose Panel (tab-based, clean Gmail-like style) */
.compose-panel {
  background: #fff;
  min-height: 400px;
}

.compose-panel__form {
  padding: 0;
}

.compose-panel__row {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.compose-panel__row--body {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-bottom: none;
}

.compose-panel__label {
  width: 70px;
  font-weight: 500;
  color: #5f6368;
  flex-shrink: 0;
}

.compose-panel__recipient {
  flex: 1;
  padding: 6px 0;
}

.compose-panel__recipient-name {
  font-weight: 500;
  color: #202124;
}

.compose-panel__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 6px 0;
  background: transparent;
}

.compose-panel__input:focus {
  border: none;
  box-shadow: none;
}

/* From alias selector in compose */
.compose-panel__select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  min-width: 200px;
}

.compose-panel__select:focus {
  border-color: #d12477;
  outline: none;
}

/* Template selector in compose toolbar */
.compose-panel__template-select {
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #5f6368;
  cursor: pointer;
  min-width: 130px;
}

.compose-panel__template-select:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.compose-panel__template-select:focus {
  border-color: #d12477;
  outline: none;
}

.compose-panel__textarea {
  border: none;
  outline: none;
  resize: none;
  min-height: 250px;
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
}

.compose-panel__textarea:focus {
  border: none;
  box-shadow: none;
}

.compose-panel__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.compose-panel__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compose-panel__attach-btn {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.2s;
}

.compose-panel__attach-btn:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.compose-panel__attach-btn i {
  margin-right: 4px;
}

.compose-panel__attachment-name {
  font-size: 12px;
  color: #1a73e8;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-panel__send-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.compose-panel__send-btn:hover {
  background: #1557b0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.compose-panel__send-btn:disabled {
  background: #94c4f8;
  cursor: not-allowed;
}

.compose-panel__send-btn i {
  margin-right: 6px;
}

.title_b.create .badge.bg-danger {
  background: #d12477;
  border-radius: 151px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-left: -10px;
  margin-top: -10px;
}
#wa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.wa-message {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  max-width: 70%;
}

.wa-message.incoming {
  align-self: flex-start;
}

.wa-message.outgoing {
  align-self: flex-end;
}

.wa-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.wa-bubble.incoming {
  background: #f1f0f0;
  color: #111;
  border-bottom-left-radius: 0;
}

.wa-bubble.outgoing {
  background: #dcf8c6;
  color: #111;
  border-bottom-right-radius: 0;
}

.wa-time {
  font-size: 0.75rem;
  color: #999;
  margin-top: 3px;
  text-align: right;
}

/* media alignment */
.wa-bubble img,
.wa-bubble video {
  border-radius: 10px;
  display: block;
  max-width: 280px;
  height: auto;
  image-orientation: from-image;
}

/* Container layout */
#wa-input-bar {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #f9f9f9, #ebebeb);
  border-top: 1px solid #ccc;
}

/* Textarea/input */
#wa-msg {
  flex: 1;
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  height: 34px;
  resize: none;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-right: 6px;
}

/* Attach button */
#wa-attach {
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #fefefe, #e7e7e7);
  margin-right: 6px;
  cursor: pointer;
}
#wa-attach:hover {
  background: linear-gradient(to bottom, #fff, #ddd);
}

/* Send button */
#wa-send {
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  height: 34px;
  padding: 0 18px;
  background: linear-gradient(to bottom, #fefefe, #e6e6e6);
  font-weight: 500;
  color: #111;
  cursor: pointer;
  transition: background 0.2s ease;
}
#wa-send:hover {
  background: linear-gradient(to bottom, #fff, #dcdcdc);
}

/* Optional for disabled states */
#wa-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Adjust child styles if necessary within the flex container */
.the-amount > input.form-control.block-amount,
.the-amount > .scheduled-payments-list {
  width: 100%; /* Ensure children take full width of the flex container */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.the-amount > input.form-control.block-amount {
  padding: 10px 12px; /* Slightly more padding for input */
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* Styling for the container .scheduled-payments-list */
.scheduled-payments-list {
  background-color: #58bed2;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 0px; /* Add some space above it if needed */
}
.scheduled-payments-list h4 {
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  margin-top: 0px;
}
.multi-schedule-form h4 ,.schedule-payment-wrapper h4 {
      color: #696969;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}
/* Styling for the unordered list (ul) within .scheduled-payments-list */
.scheduled-payments-list ul {
  list-style-type: none; /* This removes the bullets */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

/* Styling for each list item (li) within the ul */
.scheduled-payments-list ul li {
  background-color: #d9ffac;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 10px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  

}

/* Optional: remove bottom margin from the last list item */
.scheduled-payments-list ul li:last-child {
  margin-bottom: 0;
}

/* Plan link above scheduled payment */
.sp-pay-plan-link {
  margin-bottom: 4px;
}
.sp-pay-plan-link .plan-link-badge {
  display: inline-block;
  font-size: 11px;
  color: #667eea;
  background: #f0f4ff;
  padding: 2px 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #d0d9ff;
  transition: all 0.2s ease;
}
.sp-pay-plan-link .plan-link-badge:hover {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

/* date + amount row inside each scheduled payment */
.scheduled-payments-list ul li .sp-pay-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scheduled-payments-list ul li .sp-pay-main > span:first-child {
  font-size: 13px;
  color: #555;
  font-weight: 500;
  flex: 1;
}

.scheduled-payments-list ul li .sp-pay-main > span:nth-child(2) {
  font-size: 14px;
  font-weight: 700;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 2px 10px;
  border-radius: 12px;
  min-width: 70px;
  text-align: center;
}

/* delete payment button */
.delete-payment-form {
  display: inline-flex;
  margin-left: 8px;
  flex-shrink: 0;
}

.delete-payment-form button {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 50%;
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef9a9a;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-payment-form button:hover {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

/* alert row under the main row */
.no-booking-alert-row {
  margin-top: 4px;
  font-size: 12px;
  color: #e91e63;
  font-weight: 700;
}

/* inline alerts row */
.alerts-inline-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.alert-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.alert-no-booking {
  background: #fce4ec;
  color: #c2185b;
  border: 1px solid #f48fb1;
}

.alert-has-booking {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #81c784;
}

.alert-one-off {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffb74d;
}


.btn.btn-primary.sched-p-but {
  color: #fff;
  background-color: #e060ec;
  background-color: #9362d2;
  border: none;
  border-radius: 29px;
  width:100%;

      border-radius: 29px;
    font-size: 16px;
    width: 100%;
    background: linear-gradient(-23deg, #b789f0 30%, #5ba1db 100%);

}
.outstanding_pp,
.scheduled_pp {
  font-size: 15px;
  color: #fff;
}
.scheduled_pp strong {
  font-size: 15px;
  color: #000;
  background: #fff;
  padding: 10px;
  display: block;
  border-radius: 30px;
  margin-top: 10px;
}
.outstanding_pp strong {
  font-size: 15px;
  color: #c1005e;
  background: #fff;
  padding: 10px;
  display: block;
  border-radius: 30px;
  margin-top: 10px;
}
.total_paid {
  background: #e91e63;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #fff;
}
.total_paid strong {
  background: #fff;
  padding: 10px;
  border-radius: 30px;
  color: #000;
}

.select2-results__option {
  padding: 6px 8px !important;
  border-bottom: 1px solid #f1f1f1;
}

.select2-results__option:last-child {
  border-bottom: none;
}
/* Highlight ONLY the selected option */
.select2-container--default .select2-results__option--selected {
  background-color: #34dcbd !important;
  color: #000 !important;
}

/* Increase dropdown height */
.select2-results__options {
  max-height: 320px !important; /* Default is 200px */
}

/* Optional: add scrollbar styling (WebKit browsers) */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;
  border-radius: 4px;
}
.select2-search--dropdown {
  display: none !important;
}
.select2-container--default .select2-selection--single{
  height:34px !important;
  border: 1px solid #ccc!important;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top:5px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:15px !important;
  text-align:left !important;
}
.follow-up-callbtn {
  background-color: #eb4ab7;
}
.customer-buttons .btn {
  border-radius: 30px;
  margin-bottom: 10px;
}

.customer-details,
.customer-buttons,
.consnt.butz,
.consent_frms .credits_completed.tp,
.title_b.create span {
  border-radius: 8px;
}
@media all and (max-width: 768px) {
  .padding-left-0 {
    margin-top: 10px;
  }
}
@media all and (min-width: 769px) {
  .padding-right-10 {
    padding-right: 10px;
  }
  .padding-left-0 {
    padding-left: 0px;
  }
}
.sched-a-payment {
  padding: 10px;

  margin-top: 5px;
}
.no-booking-alert {
  margin-left: 8px;
  color: #e91e63;
  font-weight: 700;
  font-size: 12px;
}

.sched-a-payment .bg-wt {
  background: #fff;
  padding-top:15px;
  padding-bottom:15px;
  overflow: hidden;
  border-radius: 15px;
  padding-left:10px;
  padding-right:10px;
}
.sched-a-payment .btn.btn-primary , #multi-schedule-form .btn.btn-primary {

  background: #e060ec;
  color: #fff;
  border: none;
}
.sched-a-payment .btn.btn-primary:hover , #multi-schedule-form .btn.btn-primary:hover{
  background: #d050dc;
  color: #fff;
}
/* ============================================
   PAYMENTS OVERVIEW — NEW DESIGN SYSTEM
   ============================================ */

/* --- Payments Overview heading --- */
.po-heading {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px 0;
  padding: 0;
}

/* --- Account-level summary strip --- */
.po-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #eef2ff;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.po-stat {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid #e0e7ff;
}
.po-stat-lbl {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.po-stat-val {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.po-stat--total .po-stat-val { color: #4f46e5; }
.po-stat--out .po-stat-val   { color: #dc2626; }
.po-stat--paid .po-stat-val  { color: #16a34a; }

@media (max-width: 767px) {
  .po-summary { grid-template-columns: repeat(2, 1fr); }
}

/* --- Plan card container --- */
.tp-card.plan {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  margin-top: 14px;
}

/* --- Plan header --- */
.plan-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
}
.plan-head-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.plan-date {
  font-weight: 700;
  font-size: 17px;
  color: #0f172a;
}
.plan-sub {
  color: #64748b;
  font-size: 13px;
  margin-top: 2px;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.pill-out  { background: #fef2f2; color: #dc2626; }
.pill-paid { background: #ecfdf5; color: #16a34a; }

/* Money bar */
.money-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.money-cell {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
}
.money-cell .k {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.money-cell .v {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}
.money-cell.paid .v  { color: #16a34a; }
.money-cell.sched .v { color: #4f46e5; }
.money-cell.out .v   { color: #dc2626; }

/* Progress bar */
.progress-slim {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
  display: flex;
}
.progress-slim .seg-paid  { background: #16a34a; }
.progress-slim .seg-sched { background: #6366f1; }

/* --- Service rows (.tx) --- */
.tp-service-item.tx {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  align-items: center;
}
.tp-service-item.tx:first-of-type { border-top: 0; }

.tx-left {
  min-width: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}
.tx-body {
  min-width: 0;
  flex: 1;
}
.tx-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand-logo.lg { height: 26px; }

/* Badge flags */
.badge-flag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-free { background: #fdf2f8; color: #ec4899; }
.badge-lock { background: #fff7ed; color: #ea580c; }

/* Area chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
}
.chip-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd6fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chip .qty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
  margin-left: 2px;
}

/* Right side */
.tx-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Price box */
.price-box {
  display: flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0;
  max-width: 100px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.price-box .ccy {
  color: #64748b;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 0 8px 8px;
  flex-shrink: 0;
}
.price-box .price-input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  width: 50px;
  min-width: 0;
  text-align: right;
  padding: 8px 8px 8px 0;
  color: inherit;
}
.price-box.free {
  border-color: #fbcfe8;
  background: #fdf2f8;
  color: #ec4899;
  justify-content: center;
  padding: 8px 12px;
  max-width: 120px;
}
.price-box.locked {
  border-color: #fed7aa;
  background: #fff7ed;
}
.price-was {
  color: #64748b;
  text-decoration: line-through;
  font-size: 14px;
  margin-right: 6px;
}

/* Icon buttons */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #475569;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.icon-btn:hover { background: #f8fafc; }
.icon-btn.active.lock {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}
.icon-btn.active.gift {
  background: #ec4899;
  color: #fff;
  border-color: #ec4899;
}
.icon-btn svg { pointer-events: none; }

/* Hidden price display (used by JS) */
.tp-price-display {
  display: none;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

/* Show save button only when changes are made */
.save-price-changes { display: none; }
.tp-card.editing .save-price-changes {
  display: block !important;
  margin-top: 8px;
}

/* --- Footer --- */
.tp-foot {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}
/* Row 1: plan total + save changes */
.tp-foot-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.tp-foot-total {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-foot .total-lbl {
  color: #64748b;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  white-space: nowrap;
}
.total-price-box {
  max-width: 120px;
  position: relative;
}
/* Row 2: unscheduled + CTA (50/50) */
.tp-foot-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.tp-foot-actions .warn-strip,
.tp-foot-actions .tp-foot-cta {
  flex: 1;
  min-width: 0;
}
.warn-strip,
.tp-foot-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
}
.warn-strip {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
/* Create payment plan button — purple gradient with sparkles */
.tp-foot-cta {
  background: linear-gradient(-23deg, #9e60ed 30%, #5ba1db 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(158,96,237,.25);
}
.tp-foot-cta:hover {
  background: #9e60ed;
  color: #fff !important;
}

/* Total tooltip (inside price-box) */
.tp-total-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 5px;
  font-size: 12px;
  color: #856404;
  display: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Completed plans (env-closed) green tint on header */
.tp-card.plan .plan-head.env-closed {
  background-color: #e6ffea;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .money-bar { grid-template-columns: repeat(2, 1fr); }
  .plan-head-top { flex-direction: column; }

  .tp-service-item.tx {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
  }
  .tp-service-item.tx { border-top: 1px solid #e5e7eb !important; }
  .tp-card.plan > .tp-service-item.tx ~ .tp-service-item.tx { border-top: 0 !important; }

  .tx-right {
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
  }
  .tx-right .price-box { max-width: none; flex: 1; }
  .tx-right .price-box .price-input { width: 100%; }
  .icon-btn { width: 34px; height: 34px; }

  .tp-foot {
    margin: 10px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
  }
  .tp-foot-top { justify-content: center; flex-wrap: wrap; }
  .tp-foot-actions { flex-direction: column; }
  .tp-foot-actions .warn-strip,
  .tp-foot-actions .tp-foot-cta { flex: none; width: 100%; }
}

.tp-services {
  font-size: 13px;
  color: #555;
  margin-top: 3px;
}

/* Old table - hidden, replaced by compact view */
.tp-table {
  display: none;
  width: 100%;
  border-collapse: collapse;
}

.tp-table td {
  padding: 8px 14px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: 13px;
}

.tp-date {
  width: 38%;
  font-weight: 600;
}

.tp-payment {
  width: 40%;
}

.tp-status {
  width: 30%;
  text-align: right;
}

/* ===== COMPACT PAYMENT VIEW ===== */
.tp-payments-compact {
  border-top: 1px solid #eee;
}

.tp-status-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #f9f9f9;
  flex-wrap: wrap;
}

.tp-status-tab {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.tp-status-tab--overdue {
  background: #ffe5e5;
  color: #c0392b;
}

.tp-status-tab--overdue .tp-partial-note {
  font-weight: 400;
  opacity: 0.8;
  font-size: 10px;
}

.tp-status-tab--caught-up {
  background: #e8f5e9;
  color: #2e7d32;
}

.tp-status-tab--upcoming {
  background: #fff8e1;
  color: #f57c00;
}

.tp-status-tab--completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.tp-payment-rows {
  padding: 0 14px 10px;
}

.tp-payment-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.tp-payment-row:last-child {
  border-bottom: none;
}

.tp-row-date {
  width: 80px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}

.tp-row-amount {
  flex: 1;
  font-weight: 600;
}

.tp-amount-partial {
  color: #c0392b;
}

.tp-amount-detail {
  font-weight: 400;
  font-size: 11px;
  color: #888;
}

.tp-row-status {
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
}

.tp-payment-row--overdue {
  background: #fff5f5;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
}

.tp-payment-row--overdue .tp-row-status {
  color: #c0392b;
  font-weight: 600;
}

.tp-payment-row--covered {
  background: #f0f9f0;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  opacity: 0.8;
}

.tp-payment-row--covered .tp-row-status {
  color: #2e7d32;
}

.tp-payment-row--upcoming .tp-row-status {
  color: #666;
  margin-left:5px;
}

.tp-payment-row--completed {
  opacity: 0.7;
}

.tp-payment-row--completed .tp-row-status {
  color: #2e7d32;
}

.tp-payment-divider {
  height: 1px;
  background: #ddd;
  margin: 8px 0;
}

.tp-completed-details {
  margin-top: 5px;
}

.tp-completed-toggle {
  font-size: 12px;
  color: #666;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
}

.tp-completed-toggle:hover {
  color: #333;
}

.tp-completed-details[open] .tp-completed-toggle {
  margin-bottom: 5px;
}

/* ===== PAYMENTS RECEIVED SECTION ===== */
.tp-payments-received {
  border-top: 1px solid #e0e0e0;
  padding: 10px 14px;
  background: #fafafa;
}

.tp-received-toggle {
  font-size: 12px;
  font-weight: 600;
  color: #1976d2;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
  display: block;
}

.tp-received-toggle:hover {
  color: #1565c0;
}

.tp-received-details[open] .tp-received-toggle {
  margin-bottom: 8px;
}

.tp-received-list {
  max-height: 200px;
  overflow-y: auto;
}

.tp-received-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  gap: 8px;
}

.tp-received-row:last-child {
  border-bottom: none;
}

.tp-received-date {
  width: 90px;
  color: #666;
  flex-shrink: 0;
}

.tp-received-amount {
  width: 60px;
  font-weight: 600;
  color: #2e7d32;
  flex-shrink: 0;
}

.tp-received-service {
  flex: 1;
  color: #888;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== WIZARD WIDTH CONSTRAINT ===== */
.tp-schedule-wizard {
  max-width: 350px;
  margin: 10px auto 0;
  padding: 15px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.tp-footer {
  background-color: #f9f9f9;
  font-weight: bold;
}
.tp-header .alert-warning {
  padding: 6px 8px;
  align-items: center;
  border-radius: 5px;
  line-height: 1;
  color: #e91e64;
  text-align: left;
  margin-top: 5px;
background:none;
border:none;
}
.tp-header .alert-warning span {
 
  margin-right: 5px;
}

.progress-bar {
  color: white;
  font-weight: bold;
}

.progress {
  background: #e9ecef;
  border-radius: 5px;
  height: 18px;
  position: relative;
  margin-bottom: 5px;
}
.progress-zero {
  text-align: center;
  font-size: 12px;
  color: #e91e64;
  font-weight: 600;
  line-height: 18px;
  background: #ebebeb;
  border-radius: 5px;
  margin-bottom: 5px;
}

.missed-row {
  background-color: #ffe5e5 !important;
}

/* Status Pill Styles */
.status-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-pill.completed {
  background: #e6ffea;
  color: #1b5e20;
  border: 1px solid #2ecc71;
}
.status-pill.scheduled {
  background: #fff8e1;
  color: #a66d00;
  border: 1px solid #ffb74d;
}
.status-pill.unscheduled {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #64b5f6;
}
.status-pill.missed {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
}

/* Highlight missed row */
tr.missed-row td {
  background-color: #ffebee !important;
  color: #c62828;
  font-weight: 600;
}

/* Accordion style for completed plans */
.completed-section {
  margin-top: 30px;
  padding: 0;
  border-radius: 8px;
}

.completed-title {
  font-size: 18px;
  font-weight: 700;
  background: #fff;
  border-radius: 5px;
  padding: 8px

}

details summary {
  cursor: pointer;
  font-weight: bold;
  color: #58bed2;
}




.tp-services-block {
  padding: 15px 0 0 0;
}

.service-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #cecece;
  padding-bottom: 5px;
  gap: 10px;
}

.service-row .service-logo_tp_card {
  flex-shrink: 0;
}

.service-row .service-info {
  flex: 1;
  margin-left: 0;
}

.service-row .service-price-col {
  flex-shrink: 0;
  text-align: right;
}

.service-row .service-price-col .price {
  display: block;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.service-row .price-edit {
  display: none;
  margin-top: 5px;
}

.tp-services-block[style*="block"] .service-row .price {
  display: none;
}

.tp-services-block[style*="block"] .service-row .price-edit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.price-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  overflow: hidden;
}

.price-input-wrap .price-currency {
  padding: 4px 6px;
  background: #e9ecef;
  color: #495057;
  font-weight: 500;
  font-size: 13px;
  border-right: 1px solid #ced4da;
}

.price-input-wrap .price-input {
  border: none;
  padding: 4px 6px;
  font-size: 13px;
  width: 60px;
  outline: none;
  color: #000;
}

.price-input-wrap .price-lock-btn {
  background: #f8f9fa;
  border: none;
  border-left: 1px solid #ced4da;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: all 0.15s;
}

.price-input-wrap .price-lock-btn:hover {
  background: #e9ecef;
}

/* Locked state */
.price-input-wrap.locked {
  border-color: #ffc107;
  background: #fffef5;
}

.price-input-wrap.locked .price-currency {
  background: #fff3cd;
  border-color: #ffc107;
}

.price-input-wrap.locked .price-lock-btn {
  background: #fff3cd;
}

/* Gifted state */
.service-row.is-gifted .price-input-wrap {
  border-color: #28a745;
  background: #e6ffea;
}

.service-row.is-gifted .price-input-wrap .price-currency {
  background: #d4edda;
  border-color: #28a745;
}

/* Gift button */
.gift-toggle {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #333;
  transition: all 0.15s;
}

.gift-toggle:hover {
  background: #e9ecef;
}

.service-row.is-gifted .gift-toggle {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}

.service-logo_tp_card {
  padding: 3px 8px;
  border-radius: 8px;
  color: #f3e6f5;
}
.service-logo_tp_card img {
  max-width: 100px;
  margin-bottom: 0;
}

.service-info {
  font-size: 14px;
  margin-left: 10px;
}

.area-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-item {
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  flex-direction: column;
}

.area-item img {
  height: 22px;
  width: 22px;
  border-radius: 3px;
}

.tp-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tp-meta-row .toggle-details-btn {
  margin-bottom: 0;
  text-decoration: none;
  margin-left: 10px;
  width: 120px;
  background: #e060ec;
}

.tp-meta-row {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tp-meta-row .edit-link {
  text-decoration: none;
  margin-bottom: 0;
  background: #e060ec;
}
.locked-input {
  background-color: #fff4d6;
  border: 1px solid #d0a65c;
}
.payment-summary-card input[type="text"] {
  width:75px;
}


/*dropdown services*/
#toggleOutsidePlan{
  background: #fbcfff;
  border-radius: 15px;
  color: #2b6f9f;
  width: 100%;
display: flex;
}
#outsideServiceGrid.logo-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
}
#serviceGrid #outsideServiceGrid.logo-service-grid {
  margin-bottom:10px;
}
h3.active_tp_services_title {
  font-size: 17px;
  border-radius: 15px;
  background: #4dabe3;
  color: #fff;
  padding: 5px;
  font-weight: normal;
  margin-bottom:0;
  margin-top:0;
}
.w-100,.w-100-2{
  width:100%;
}
.w-100 .col-xs-4:first-child{
  text-align: left;
  padding-left: 0;
  padding-right: 7px;
}
.w-100-2 .col-xs-4:first-child{
  text-align: left;
  padding-left: 7px;
  padding-right: 0;
}
.ajax-admin-fetch{
  display: block;
  background: #eeeeee;
  overflow: hidden;
  padding-top: 15px;
  border-radius: 15px;
  margin-left: 14px;
  margin-right: 15px;
  border: 1px solid #d9d9d9;
  padding-bottom: 15px;
}

#book_now_outside .book-now-btn{
  width: 100% !important;
  border-radius: 15px;
  height: 48px;
  margin-top: 0;
  padding-left:7px;
}
.w-100 .book_now{
  margin-top:0;
  padding:0;
}

/* ✅ ONLY affect the TP MULTI SERVICE area */
#tpServiceLogos .logo-service-grid {
  display: grid;
  /* grid-template-columns: repeat(1, 1fr);  */
  /* gap: 0; */
  justify-items: center;
  margin-bottom: 0;
}
#tpServiceLogos .tp-service-wrapper {
  width: 100% !important;
}
#selectedServicesRow{
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* ✅ FORCE 3 COLUMNS */
  gap: 14px;
  justify-items: center;
  width:100%;
  /* margin-bottom:14px; */
}
#show-unselected-services, #reset-multi-services{
  background: #fbcfff;
  border-radius: 15px;
  color: #2b6f9f !important;
  fill: #2b6f9f !important;
  margin-bottom: 10px;
  border: none;
  margin-top: 14px;
  display: flex;
  width: 100%;
  align-items: center;
}

#show-unselected-services:focus-visible,
#show-unselected-services:focus,
#reset-multi-services:focus-visible,
#reset-multi-services:focus,
#toggleOutsidePlan:focus-visible,
#toggleOutsidePlan:focus{
  outline:none!important;
  box-shadow:none;
}
#reset-multi-services{
  margin-top:0px
}
#show-unselected-services span, #reset-multi-services span,#toggleOutsidePlan span{
  background: #fff;
  padding: 5px;
  border-radius: 30px;
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding-bottom:7px;
  color: #30c0ba;
}


#unselectedServicesRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ FORCE 3 COLUMNS */
  gap: 14px;
  justify-items: center;
  width:100%;
  margin-bottom:10px;
}

.suc_book{
  border-bottom: 1px solid #c7c7c7;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px 10px 0px 0px;
}
.suc_book:last-child{
  border-bottom: none;
}
/* ✅ Selected TP services must align as 3-column grid */
#selectedServicesRow .tp-service-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* ✅ SERVICE | TIME | DURATION */
  gap: 14px;
  width: 100%;
  align-items: center;

}
#unselectedServicesRow {
  display: none;
  
}
/* ✅ Logo tile stays in column 1 */
#selectedServicesRow .tp-logo-tile {
  grid-column: 1;
}
/* ✅ Controls sit in columns 2 and 3 as their OWN GRID */
#selectedServicesRow .tp-controls {
  grid-column: 2 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ✅ Time | Duration */
  gap: 14px;                        /* ✅ THIS IS THE MISSING GAP */
  width: 100%;
  max-width: 100%;
}

/* ✅ Fix dropdown width so they fill their grid columns */
#selectedServicesRow .tp-controls select {
  width: 100%;
}

/* ✅ LOCK THE BUTTON SIZE – THIS FIXES THE HEIGHT JUMP */
#tpServiceLogos .tp-logo-tile {
  width: 100% !important;
  height: 35px !important;     /* ✅ FIXED HEIGHT */
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 9px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ✅ NORMALIZE DROPDOWNS */
#tpServiceLogos .tp-controls select.form-control {
  height: 40px;
  font-size:12px;
  text-align:center;
  
}
#tpServiceLogos .d-none-2 {
  display: none !important;
}
.logo-tile, .tp-logo-tile {
  background: #2d6f9f;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 9px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}


.logo-tile img, .tp-logo-tile img{
  max-height: 13px;
  max-width: 100%;
  object-fit: contain;
}

.logo-tile:hover, .tp-logo-tile:hover{
  background: #000000;
}




.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* margin-bottom: 20px; */
  margin-top:15px;
}

.type-btn {
  padding: 16px;
  border-radius: 14px;
  font-weight: 600;
  background: #2b6f9f;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
  border: navajowhite;
  font-size:12px;
}

.type-btn.active {
  background: #db2aed;
  color: white;
}
.type-btn{
  background: #ffffff;
  color: #2b6f9f;
}

/*dropdown services*/


#show-bulk-ui{
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  margin-top: 20px;
  border-radius: 5px;
  padding: 10px;
  background: #da2bed;
  width:100%;
  
}
#show-bulk-ui:hover{
  
  background: #337ab7;
  color:#fff;
}
.the-ui-blocks{
  margin-bottom:10px;
  margin-top:0px;
}
/* ===============================
   HIDE OLD DROPDOWN UI (incl. Select2)
   =============================== */
   .spm-select-wrap select {
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .schedule-payment-wrapper .select2,
  .schedule-payment-wrapper .select2-container {
    display:none !important;
  }
  .schedule-payment-wrapper .spm-open-btn{
    margin-bottom: 10px;;
  }
  
  /* ===============================
     MODAL SHELL
     =============================== */
  .spm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }
  .spm-modal {
    background: #fff;
    width: 100%;
    max-width: 580px;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: spmSlideIn 0.25s ease-out;
  }
  @keyframes spmSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .spm-head {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
  }
  .spm-head strong {
    font-size: 17px;
    font-weight: 600;
  }
  .spm-body {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fafafa;
  }
  .spm-close {
    border-radius: 50%;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1;
  }
  .spm-close:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  
  /* ===============================
     “TP-CARD-LIKE” SELECTOR CARD
     =============================== */
  .spm-tp-card {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
  }
  .spm-tp-card:hover {
    background: #f8f5ff;
    border-color: #c4b5fd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(157, 127, 239, 0.15);
  }
  .spm-tp-card.spm-selected {
    background: #f5f0ff;
    border-color: #9d7fef;
    box-shadow: 0 0 0 3px rgba(157, 127, 239, 0.2);
  }
  
  .spm-tp-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .spm-tp-title {
    flex: 1;
  }
  .spm-tp-title .alert-warning {
    padding: 6px 10px;
    align-items: center;
    border-radius: 6px;
    line-height: 1.3;
    color: #b91c1c;
    text-align: left;
    margin-top: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: 12px;
  }
  .spm-tp-title strong {
    font-size: 14px;
    color: #333;
    display: block;
    margin-bottom: 2px;
  }
  .spm-tp-sub {
    display: none;
  }
  
  /* Service icons row with session badges */
  .spm-services-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebff 100%);
    border-radius: 12px;
    border: 1px solid #e6e0f5;
    justify-content: center;
    align-items: center;
  }
  .spm-service-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 6px 12px 6px 15px;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .spm-service-badge img {
    height: 15px;
    object-fit: contain;
  }
  .spm-session-count {
    background: linear-gradient(135deg, #e160ec 0%, #d31b5e 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .spm-service-name {
    font-size: 10px;
    color: #666;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* ===============================
     PAYMENT SUMMARY STRIP
     =============================== */
  .spm-payment-summary {
    margin-top: 14px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: center;
    background: #f7f7f7;
    margin-bottom: 10px;
  }
  .spm-payment-summary .label {
    font-weight: 600;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .spm-payment-summary .val {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }
  
  .spm-owed-pill {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
  }
  
  /* toggle wrapper for right alignment */
  .spm-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
  }
  
  /* toggle + details */
  .spm-toggle {
    margin: 0;
    text-decoration: none;
    width: auto;
    padding: 8px 16px;
    background: #e060ec;
    border-radius: 30px;
    color: #fff;
    border: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
    position: relative;
  }
  .spm-toggle:hover {
    background: #c940d9;
  }
  .spm-details {
    display: none;
    margin-top: 14px;
    padding: 14px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #eee;
  }
  .spm-details.open {
    display: block;
  }
  
  /* ===============================
     SUMMARY OUTSIDE MODAL
     =============================== */
  .spm-summary-box {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px 9px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
  }
  .spm-summary-box strong {
    color: #333;
    font-size: 14px;
  }
  .spm-summary-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    text-align:center;
  }
  .spm-summary-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
  }
  
  /* ===============================
     TP SERVICES ROWS (DETAILS)
     =============================== */
  .tp-services-block {
    margin: 0;
    padding: 0;
  }
  .tp-service-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .tp-service-row:last-child {
    margin-bottom: 0;
  }
  .tp-service-logo {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
  }
  .tp-service-logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .tp-service-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }
  .tp-area-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .tp-area-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
  }
  
  /* Old modal-specific service layout (kept hidden if still present in DOM) */
  .spm-service,
  .spm-service-name,
  .spm-areas,
  .spm-area-pill {
    display:none !important;
  }
  
  /* price under each service logo in modal details */
  .tp-service-price {
    margin-top: 4px;
    font-weight: 700;
    font-size: 13px;
    color: #667eea;
  }
  .spm-summary-actions .btn-link{
    background: #f5d5f8;
    border-radius: 20px;
    color: #a020a0 !important;
    fill: #a020a0 !important;
    margin-bottom: 0;
    border: 1px solid #e9b8ed;
    margin-top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 8px 16px;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
  }
  .spm-summary-actions .btn-link:hover {
    background: #f0c5f4;
    transform: translateY(-1px);
  }
  .spm-summary-actions .btn-link.text-danger {
    background: #ffebee;
    color: #d32f2f !important;
    border-color: #ffcdd2;
  }
  .spm-summary-actions .btn-link.text-danger:hover {
    background: #ffcdd2;
  }

  .spm-summary-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
  }
  .spm-summary-row span{
    display: block;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0d5f3;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    word-break: break-word;
    overflow: hidden;
  }
  .spm-summary-row span strong {
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  @media (max-width: 480px) {
    .spm-summary-row {
      grid-template-columns: 1fr;
    }
    .spm-summary-row span {
      font-size: 13px;
      padding: 10px 12px;
    }
    .spm-summary-row span strong {
      font-size: 9px;
    }
  }
  
  @media (max-width: 768px) {
    .spm-summary-row span strong {
      font-size: 9px;
    }
  }
  
  .spm-summary-separator{
    margin:10px 0 6px;
    border:none;
    border-top:1px dashed #ddd;
  }
  
  .spm-summary-future-title{
    font-size:13px;
    margin-bottom:3px;
  }
  
  .spm-summary-future-list{
    margin:0;
    padding: 0;
    font-size:13px;
  }
  .spm-summary-future-list li{
    margin:1px 0;
    padding: 0;
    list-style: none;;
  }
  .spm-open-btn{
    background: #e060ec;
    border-radius: 12px;
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.3);
  }
  .spm-open-btn:hover {
    transform: translateY(-1px);
    background: #d050dc;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.4);
    color: #fff;
  }

  /* ===============================
     MOBILE RESPONSIVE FIXES
     =============================== */
  @media (max-width: 576px) {
    .spm-overlay {
      padding: 10px;
    }
    .spm-modal {
      max-width: 100%;
      border-radius: 16px;
    }
    .spm-head {
      padding: 14px 16px;
    }
    .spm-head strong {
      font-size: 15px;
    }
    .spm-body {
      padding: 12px;
      max-height: 70vh;
    }
    .spm-tp-card {
      padding: 12px;
    }
    .spm-tp-title strong {
      font-size: 13px;
      line-height: 1.3;
      word-wrap: break-word;
    }
    .spm-tp-sub {
      font-size: 12px;
    }
    .spm-payment-summary {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 10px;
    }
    .spm-payment-summary > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid #eee;
    }
    .spm-payment-summary > div:last-child {
      border-bottom: none;
    }
    .spm-owed-pill {
      padding: 4px 10px;
      font-size: 12px;
    }
    .spm-toggle {
      width: auto;
      padding: 10px 18px;
      font-size: 12px;
      margin: 4px 0;
    }
    .spm-toggle-wrap {
      padding: 8px 0;
    }
    .spm-services-preview {
      gap: 8px;
      padding: 10px;
    }
    .spm-service-badge {
      padding: 5px 10px 5px 15px;
    }
    .spm-service-badge img {
      height: 18px;
    }
    .spm-session-count {
      min-width: 18px;
      height: 18px;
      font-size: 10px;
    }
    .spm-details {
      padding: 10px;
    }
    .tp-service-row {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
    }
    .tp-service-logo {
      width: 80px;
      text-align: left;
    }
    .tp-service-logo img {
      width: 100%;
      height: auto;
    }
    .tp-service-areas {
      width: 100%;
      gap: 6px;
    }
    .tp-area-item {
      font-size: 11px;
      padding: 3px 8px;
    }
    .tp-area-item img {
      width: 16px;
      height: 16px;
    }
  }

/* ===============================
   MULTI-SCHEDULE PAYMENTS STYLES
   =============================== */
.multi-schedule-form {
     margin-top: 5px;
    padding: 0 10px;

}

.multi-schedule-form .bg-wt {
  background: #fff;
}

.sched-multi-p-but {
color: #fff;
margin-bottom:10px;
    background-color: #e060ec;
    background-color: #9362d2;
    border: none;
    border-radius: 29px;
    width:100%;
        border-radius: 29px;
    background: linear-gradient(-23deg, #9e60ed 30%, #5ba1db 100%);
    width: 100%;
    font-size: 16px;
}


.multi-sched-tp-wrapper {
  margin-bottom: 10px;
}

/* Multi-schedule date rows - matching scheduled-payments-list design */
.multi-sched-date-row {
  background-color: #d9ffac;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 10px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Rows without a booking get a different background */
.multi-sched-date-row.no-booking {
  background-color: #fff3e0;
  border: 1px solid #ffcc80;
}

.multi-sched-date-row:last-child {
  margin-bottom: 0;
}

.multi-sched-date-row .sp-pay-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.multi-sched-date-row .sp-pay-main .multi-sched-date-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

.multi-sched-date-row .sp-pay-main .multi-sched-date-label {
  font-size: 13px;
  color: #555;
  font-weight: 500;
  margin-bottom: 0;
}

.multi-sched-date-row .sp-pay-main .multi-sched-amount-input {
  width: 100%;
  max-width: 120px;
}

.multi-sched-date-row .multi-sched-amount-input {
  width: 80px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #fff;
}

.multi-sched-remove-date {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 50%;
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef9a9a;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.multi-sched-remove-date:hover {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

#multi-sched-outstanding-wrap {
  background: #e7f3ff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #b3d7ff;
}

#multi-sched-outstanding-wrap label {
  font-weight: 600;
  color: #0056b3;
  margin-bottom: 5px;
}

#multi-sched-outstanding {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

#multi-sched-dates-container {
  padding: 0;
}

@media (max-width: 576px) {
  .multi-sched-date-row .sp-pay-main {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .multi-sched-date-row .sp-pay-main .multi-sched-date-label {
    font-size: 11px;
    width: 100%;
  }
}

#multi-sched-add-date-wrap {
  border: 1px dashed #28a745;
}

#multi-sched-add-date-btn {
  height: 34px;
}

.datepicker-for-multiple-payments {
  height: 34px;
}

/* ============================================
   Calendar Daily Reports - Lazy Load Styles
   ============================================ */

/* Summary Cards */
.report-summary-cards .summary-card {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
}

.report-summary-cards .summary-appointments {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.report-summary-cards .summary-expected {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.report-summary-cards .summary-outstanding {
  background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}

.report-summary-cards .summary-number {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
}

.report-summary-cards .summary-label {
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 5px;
}

/* Report Sections */
.report-section {
  margin-bottom: 15px;
}

.report-section-header {
  margin: 0;
  padding: 10px 15px;
  background: #283050;
  color: #fff;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-section-header:hover {
  background: #3a4266;
}

.report-section-header i {
  transition: transform 0.2s;
}

.report-section-header[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

.report-section-body {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 300px;
  overflow-y: auto;
}

/* Report Items */
#reporting .report-section .separator {
  padding: 8px 10px;
  border-bottom: 1px solid #e9ecef;
}

#reporting .report-section .separator:last-child {
  border-bottom: none;
}

#reporting .report-section .appointment {
  background: transparent;
  padding: 0;
}

#reporting .report-section .appointment a {
  color: #337ab7;
  text-decoration: none;
  display: block;
}

#reporting .report-section .appointment a:hover {
  text-decoration: underline;
}

/* Override link colors when appointment has colored background */
#reporting .initial_consults .report-section-body .appointment a {
  color: #3d8b79;
}

#reporting .take_payments .report-section-body .appointment a {
  color: #337ab7;
}

#reporting .outstanding_section .report-section-body .appointment a {
  color: #d9534f;
}

/* One-off Badge */
.badge-oneoff {
  background: #f0ad4e;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* No Appointment Badge */
.badge-no-appt {
  background: #5bc0de;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Row highlight for payments without appointments */
.no-appointment-row {
  background: #e8f4fc !important;
  border-left: 3px solid #5bc0de;
}

/* Outstanding High Amount Highlight */
.outstanding-high {
  background: #fff3cd !important;
  border-left: 3px solid #f0ad4e;
}

/* Report Totals */
.report-total {
  padding: 10px 15px;
  background: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  border-top: 2px solid #dee2e6;
}

/* Service Counts Container */
#serviceCountsContainer {
  border-radius: 4px;
}

#serviceCountsContainer .logos_serv {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}

#serviceCountsContainer .logos_serv span {
  padding: 8px;
  background: #269ec7;
  color: #fff;
  display: flex;
  border-radius: 35px;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  margin-right: 5px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .report-summary-cards .summary-card {
    margin-bottom: 8px;
  }
  
  .report-summary-cards .summary-number {
    font-size: 22px;
  }
  
  .report-section {
    margin-bottom: 10px;
  }
  
  .report-section-body {
    max-height: 200px;
  }
  
  #serviceCountsContainer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #serviceCountsContainer .logos_serv {
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  #serviceCountsContainer .logos_serv img {
    max-width: 100px;
  }
}

/* ================================================
   AI Sessions Management - Card Style UI
   ================================================ */

/* AI Date Button Badge Colors */
.ai-date-btn .badge.ai { background-color: #d12477; }
.ai-date-btn.active-ai-date .badge { background-color: #fff; color: #337ab7; }

/* Treatment Plan Card Container */
.ai-session-plan {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ai-session-plan .treat_title {
    /* display: flex;
    margin-bottom: 10px; */
    flex-wrap: wrap;
    font-size: 25px;
    color: #155e91;
}

.ai-session-plan .treat_title img {
    height: 30px;
    margin-right: 10px;
}

.ai-session-plan .treat_title strong {
    font-size: 16px;
    color: #333;
}

.ai-session-plan .treat_title .small_caption {
    font-size: 20px;
    margin-bottom: 0px;
}

/* Area Selection Pills */
.ai-area-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 4px;
    background: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.ai-area-item .area-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ai-area-item .area-name {
    text-transform: capitalize;
}

.ai-area-item:hover {
    border-color: #d12477;
    background: #fef0f5;
}

.ai-area-item.selected {
    background: #d12477;
    color: #fff;
    border-color: #d12477;
}

.ai-area-item.selected:hover {
    background: #b01e63;
}

/* Selected Count Indicator */
#ai-selected-count {
    font-weight: bold;
    color: #d12477;
    margin-right: 15px;
}

/* Areas List Container */
.ai-areas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 0;
        justify-content: center;
}

/* Mobile Responsive for AI Sessions */
@media (max-width: 767px) {
    .ai-session-plan .treat_title {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ai-session-plan .small_caption {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .ai-area-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .ai-area-item .area-icon {
        width: 20px;
        height: 20px;
    }
}

/* ================================================
   Multi-Session Recording Mode
   ================================================ */


.toggle-multi-session-mode{
    background: #59bed2;
    color: #fff;
    font-size: 15px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    margin: 10px;
    margin-left: 0;
    font-weight: bold;
}   
.toggle-multi-session-mode.btn-warning.active,.toggle-multi-session-mode.btn-warning.active:focus,.toggle-multi-session-mode.btn-warning:hover,.toggle-multi-session-mode.btn-warning:focus{
background-color: #5aa5f2;
    border-color: #5aa5f2;
}   
.toggle-multi-session-mode.btn-success,
.toggle-multi-session-mode.btn-success:focus,
.toggle-multi-session-mode.btn-success:hover{
background-color: #59bed2;
    border-color: #59bed2;
}   
#select-all-areas-btn, #deselect-all-areas-btn,
#tp-select-all-btn, #tp-deselect-all-btn {
    background: #d12477;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    margin: 5px;
    font-weight: bold;
}
/* When in multi-select mode, make areas look clickable */
body.multi-session-mode .active_zareas.selectable-area {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;

    
}
#multi-session-bar .btn-success{
  background-color: #35dcbd;
}
#multi-session-bar .btn-warning {
    color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}


/* Selected state - pink highlight matching AI sessions UI */
body.multi-session-mode .active_zareas.selected-area {
    background: #d12477 !important;
    /* border: 3px solid #d12477; */
    /* border-radius: 8px; */

        background: #bc9858 !important;
        background: #35dcbd !important;
    /* border: 3px solid #bb9758; */
    border-radius: 8px;
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
}

body.multi-session-mode .active_zareas.selected-area span,
body.multi-session-mode .active_zareas.selected-area .span_sess_left {
    color: #fff !important;
    border-color: #fff !important;
}

/* Disable the individual record buttons visually */
body.multi-session-mode .record_new_sessz {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* Also disable the form selects and datepickers */
body.multi-session-mode .active_zareas select,
body.multi-session-mode .active_zareas input[type="text"] {
    pointer-events: none;
    opacity: 0.3;
}

/* Fade out session history dates and disable delete links */
body.multi-session-mode .history_dates.small .date_single {
    opacity: 0.3;
    pointer-events: none;
}

body.multi-session-mode .history_dates.small .the_date a {
    pointer-events: none;
    cursor: not-allowed;
}

/* Floating Action Bar */
.multi-session-floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: #fff;
    padding: 15px 20px;
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 9999;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
        text-align: center;
}

#multi-session-count {
    font-size: 16px;
    font-weight: bold;
    color: #d12477;
}

/* Quick access Record button inside treatment plans */
.tp-quick-record-btn {
    padding: 4px 8px;
    margin-left: 10px;
    font-size: 11px;
}

.tp-quick-record-btn.active.btn-warning {
    background: #f0ad4e;
    border-color: #eea236;
}

/* Cancel button in floating bar */
#cancel-multi-session-btn {
    margin-left: 10px;
}

/* Mobile responsive for floating bar */
@media (max-width: 767px) {
    .multi-session-floating-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    
    #multi-session-count {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   Appointment Requests Panel (Calendar & Patient History)
   ============================================ */
.requires-action{
      color: #d12477;
    font-weight: bold;
}
.appt-requests-panel {
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        margin-top:10px;
}

.appt-requests-panel__header {
    background: linear-gradient(135deg, #337ab7 0%, #8e44ad 100%);
    color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;

}

.appt-requests-panel__title {
    font-weight: 600;
    font-size: 14px;
}

.appt-requests-panel__title .glyphicon {
    margin-right: 8px;
}
.appt-requests-panel .table>thead:first-child>tr:first-child>th{
  background-color: #cc8dff;
  color:#fff;
}
.appt-requests-panel .table>tbody>tr>td{
background-color: #ddb4ff;
    color: #000000;
}
.appt-requests-panel__count {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
}

.appt-requests-panel__body {
    padding: 0;
}

.appt-requests-panel__table {
    margin-bottom: 0;
}

.appt-requests-panel__table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    padding: 10px 15px;
}

.appt-requests-panel__table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border-top: 1px solid #eee;
}

.appt-requests-panel__table tbody tr:hover {
    background: #f8f9fa;
}

.appt-requests-panel__patient-link {
    color: #fff;
    font-weight: 600;
}

.appt-requests-panel__patient-link:hover {
    text-decoration: underline;
    color: #fff;

}

.appt-requests-panel__datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appt-requests-panel__date {
    font-weight: 500;
}

.appt-requests-panel__time {
    color: #fff;
    font-size: 12px;
}

.appt-requests-panel__btn {
    background: #ff7979;
    border-color: #ff7979;
}

.appt-requests-panel__btn:hover {
    background: #286090;
    border-color: #204d74;
    color: #fff;
}

/* Calendar button badge for appointment requests */
.calendar-btn-badge {
    background: #e74c3c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 5px;
    font-weight: bold;
}

/* Service-inline is mobile-only — hidden by default */
.appt-requests-panel__service-inline { display: none; }

/* Mobile — compact card per request, matches SBT / Patient Emails panels */
@media (max-width: 767px) {
    .appt-requests-panel {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
    }
    .appt-requests-panel__header { padding: 10px 14px; }

    .appt-requests-panel__body {
        background: #ede4f7;
        padding: 10px;
    }
    .appt-requests-panel__table thead { display: none; }
    .appt-requests-panel__table tbody { display: block; }

    /* Each request becomes a distinct white card — flex column so we can reorder */
    .appt-requests-panel__table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
        margin-bottom: 8px;
        position: relative;
        background: #ffffff !important;
        border-radius: 10px;
        border: 1px solid #e8daf0;
        box-shadow: 0 1px 3px rgba(142, 68, 173, 0.10);
    }
    .appt-requests-panel__table tbody tr:last-child { margin-bottom: 0; }
    .appt-requests-panel__table tbody tr:hover>td {
        background: transparent !important;
    }

    /* Coloured left-border per location for quick scanning */
    .appt-requests-panel__table tbody tr.loc-row--25525 { border-left: 4px solid #2471a3; }
    .appt-requests-panel__table tbody tr.loc-row--25527 { border-left: 4px solid #27ae60; }
    .appt-requests-panel__table tbody tr.loc-row--8245  { border-left: 4px solid #8e44ad; }
    .appt-requests-panel__table tbody tr.loc-row--23783 { border-left: 4px solid #e67e22; }
    .appt-requests-panel__table tbody tr.loc-row--25526 { border-left: 4px solid #16a085; }
    .appt-requests-panel__table tbody tr.loc-row--25528 { border-left: 4px solid #c0392b; }

    .appt-requests-panel__table tbody td,
    .appt-requests-panel .table>tbody>tr>td {
        display: block;
        padding: 0 !important;          /* kill Bootstrap's .table td padding:8px */
        border: none !important;
        background: transparent !important;
        color: #4a235a;
    }

    /* Visual order via flex `order`:
       1 = datetime, 2 = patient (with service inline), 3 = location
       Calendar columns (5 tds): service, patient, location, datetime, actions
       Patient columns (4 tds):  service, location, datetime, actions
     */
    .appt-requests-panel--calendar .appt-requests-panel__table tbody td:nth-child(1) { display: none !important; }   /* service standalone */
    .appt-requests-panel--calendar .appt-requests-panel__table tbody td:nth-child(2) { order: 2; }                   /* patient + inline service */
    .appt-requests-panel--calendar .appt-requests-panel__table tbody td:nth-child(3) { order: 3; }                   /* location */
    .appt-requests-panel--calendar .appt-requests-panel__table tbody td:nth-child(4) { order: 1; }                   /* datetime */

    .appt-requests-panel--patient .appt-requests-panel__table tbody td:nth-child(1) { order: 2; font-size: 14px; }    /* service (no patient col) */
    .appt-requests-panel--patient .appt-requests-panel__table tbody td:nth-child(2) { order: 3; }                     /* location */
    .appt-requests-panel--patient .appt-requests-panel__table tbody td:nth-child(3) { order: 1; }                     /* datetime */

    /* TOP ROW: date + time, profile button absolutely positioned right */
    .appt-requests-panel__datetime {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 4px;
        padding-right: 90px;            /* room for Profile button */
    }
    .appt-requests-panel__date {
        font-weight: 700;
        font-size: 14px;
        color: #4a235a;
    }
    .appt-requests-panel__time {
        color: #6b4683;
        font-size: 13px;
    }
    .appt-requests-panel__time::before {
        content: "· ";
        color: #cbb8d8;
        margin-right: 2px;
    }

    /* Actions cell (Profile button) — absolutely positioned top-right */
    .appt-requests-panel__table tbody td:last-child {
        position: absolute;
        top: 10px;
        right: 12px;
    }
    .appt-requests-panel__btn {
        padding: 4px 12px;
        font-size: 12px;
        background: #8e44ad;
        border-color: #7d3c98;
    }
    .appt-requests-panel__btn:hover {
        background: #7d3c98;
        border-color: #6c3483;
    }

    /* Patient cell — name (bold) + service (regular) inline */
    .appt-requests-panel__patient-cell {
        display: block !important;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .appt-requests-panel__patient-link {
        color: #8e44ad;
        font-size: 16px;
        font-weight: 700;
    }
    .appt-requests-panel__service-inline {
        display: inline;
        font-size: 14px;
        color: #4a235a;
        margin-left: 6px;
    }
    .appt-requests-panel__service-inline::before {
        content: "· ";
        color: #cbb8d8;
        margin-right: 2px;
    }

    /* Location td — its own line, badge stays compact */
    .appt-requests-panel .loc-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        font-size: 11px;
        white-space: nowrap;
        line-height: 1.4;
        border-radius: 12px;
    }
}

/* ============================================
   Appointment Requests Panel - Refined Purple Theme
   ============================================ */

.appt-requests-panel {
    border: none;
    box-shadow: 0 2px 12px rgba(142, 68, 173, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.appt-requests-panel__header {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #7d3c98 100%);
    padding: 14px 18px;
    border-radius: 8px 8px 0 0;
}

.appt-requests-panel__title {
    font-size: 15px;
    letter-spacing: 0.3px;
}

.appt-requests-panel__count {
    background: rgba(255, 255, 255, 0.3);
    padding: 3px 12px;
    font-weight: 600;
}

.appt-requests-panel .table>thead:first-child>tr:first-child>th {
    background: linear-gradient(180deg, #f3e8ff 0%, #ede4f7 100%);
    color: #5b2c6f;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border-bottom: 2px solid #d4b8e8;
}

.appt-requests-panel .table>tbody>tr>td {
    background: linear-gradient(180deg, #faf8fc 0%, #f5f0fa 100%);
    color: #4a235a;
    border-top: 1px solid #e8daf0;
    transition: all 0.2s ease;
}

.appt-requests-panel .table>tbody>tr:hover>td {
    background: linear-gradient(180deg, #f0e6f6 0%, #e8dcf2 100%);
}

.appt-requests-panel__patient-link {
    color: #8e44ad;
    font-weight: 600;
    transition: color 0.2s ease;
}

.appt-requests-panel__patient-link:hover {
    color: #5b2c6f;
}

.appt-requests-panel__time {
    color: #7d3c98;
    font-weight: 500;
}

.appt-requests-panel__btn {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(142, 68, 173, 0.3);
    transition: all 0.2s ease;
}

.appt-requests-panel__btn:hover {
    background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
    box-shadow: 0 4px 8px rgba(142, 68, 173, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

/* ============================================
   CLINIC STAFF SCHEDULE STYLES
   ============================================ */

#clinic-schedule-page {
    padding: 20px;
    background: #f5f5f5;
    min-height: calc(100vh - 60px);
}

/* Location Toggle */
.clinic-schedule__location-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.clinic-schedule__location-btn {
    padding: 6px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    text-decoration: none;
    font-weight: 500;
}
.clinic-schedule__location-btn:hover {
    background: #f0f0f0;
    text-decoration: none;
    color: #333;
}
.clinic-schedule__location-btn--active {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}
.clinic-schedule__location-btn--active:hover {
    background: #3a7bc8;
    color: #fff;
}

/* Navigation */
.clinic-schedule__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.clinic-schedule__nav-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.clinic-schedule__nav-btn:hover {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.clinic-schedule__title {
    margin: 0;
    font-size: 24px;
    min-width: 200px;
    text-align: center;
    color: #333;
}

/* Legend */
.clinic-schedule__legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.clinic-schedule__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.clinic-schedule__legend-item:hover {
    background: #f0f0f0;
}

.clinic-schedule__legend-item--hidden {
    opacity: 0.35;
    text-decoration: line-through;
}

.clinic-schedule__legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* Calendar Grid */
.clinic-schedule__calendar {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.clinic-schedule__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #337ab7;
    color: #fff;
}

.clinic-schedule__header-cell {
    padding: 12px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
}

.clinic-schedule__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.clinic-schedule__day {
    min-height: 220px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-left: none;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
    background: #fff;
}

.clinic-schedule__day:nth-child(7n) {
    border-right: none;
}

.clinic-schedule__day:hover {
    background: #f0f7ff;
}

.clinic-schedule__day--empty {
    background: #fafafa;
    cursor: default;
}

.clinic-schedule__day--empty:hover {
    background: #fafafa;
}

.clinic-schedule__day--today {
    background: #fffde7;
}

.clinic-schedule__day--today:hover {
    background: #fff9c4;
}

.clinic-schedule__day--has-pending {
    box-shadow: inset 0 0 0 2px #ffc107;
}

.clinic-schedule__day-number {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

/* Schedule layout - no left time labels, times on bars */
.clinic-schedule__day-schedule {
    display: flex;
    justify-content: center;
    height: 180px;
    padding-top: 5px;
    padding-bottom:15px;
}

.clinic-schedule__columns {
    display: flex;
    gap: 6px;
}

.clinic-schedule__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
}

.clinic-schedule__column-initial {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 14px;
}

.clinic-schedule__column-track {
    position: relative;
    width: 18px;
    flex: 1;
    background: #e8e8e8;
    border-radius: 6px;
}

.clinic-schedule__vbar {
    position: absolute;
    width: 100%;
    border-radius: 6px;
    left: 0;
    opacity: 0.9;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
}

.clinic-schedule__vbar-start,
.clinic-schedule__vbar-end {
    position: absolute;
    font-size: 9px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.9);
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.1;
}

.clinic-schedule__vbar-start {
    top: -1px;
    transform: translateX(-50%) translateY(-100%);
}

.clinic-schedule__vbar-end {
    bottom: -1px;
    transform: translateX(-50%) translateY(100%);
}


.clinic-schedule__vbar--modified {
    box-shadow: 0 0 0 2px #17a2b8;
}

.clinic-schedule__vbar--pending {
    box-shadow: 0 0 0 2px #ffc107;
    animation: pulse-pending 1.5s ease-in-out infinite;
}

@keyframes pulse-pending {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

.clinic-schedule__day-staff {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.clinic-schedule__staff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.clinic-schedule__staff-badge--off {
    opacity: 0.4;
    text-decoration: line-through;
}

.clinic-schedule__staff-badge--modified {
    box-shadow: 0 0 0 2px #17a2b8;
}

.clinic-schedule__staff-badge--pending {
    box-shadow: 0 0 0 2px #ffc107;
}

/* Pending Requests Panel - Full width above calendar */
.clinic-schedule__pending-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
}

.clinic-schedule__pending-panel h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #856404;
}

.clinic-schedule__pending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clinic-schedule__pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #fff;
    border-radius: 6px;
    border-left: 4px solid #ffc107;
    flex-wrap: wrap;
    gap: 10px;
}

.clinic-schedule__pending-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.clinic-schedule__pending-info strong {
    color: #333;
    font-size: 14px;
}

.clinic-schedule__pending-date {
    color: #666;
    font-size: 13px;
}

.clinic-schedule__pending-type {
    display: inline-block;
    font-size: 11px;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.clinic-schedule__pending-hours {
    font-size: 13px;
    color: #17a2b8;
}

.clinic-schedule__pending-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.clinic-schedule__pending-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Request History Panel (Staff) - Full width above calendar */
.clinic-schedule__history-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
}

.clinic-schedule__history-panel h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #495057;
}

.clinic-schedule__history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-schedule__history-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid #6c757d;
    background: #fff;
}

.clinic-schedule__history-item--approved {
    border-left-color: #28a745;
}

.clinic-schedule__history-item--denied {
    border-left-color: #dc3545;
}

.clinic-schedule__history-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.clinic-schedule__history-date {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.clinic-schedule__history-status {
    font-size: 11px;
    text-transform: uppercase;
}

.clinic-schedule__history-type {
    font-size: 13px;
    color: #555;
}

.clinic-schedule__history-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.clinic-schedule__history-notes {
    font-size: 13px;
    color: #856404;
    background: #fff3cd;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Admin Request History (Below Calendar) */
.clinic-schedule__admin-history {
    margin: 30px auto 0 auto;
    max-width: 1200px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.clinic-schedule__admin-history h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}

.clinic-schedule__admin-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.clinic-schedule__admin-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid #6c757d;
    background: #fff;
    flex-wrap: wrap;
}

.clinic-schedule__admin-history-item--approved {
    border-left-color: #28a745;
}

.clinic-schedule__admin-history-item--denied {
    border-left-color: #dc3545;
}

.clinic-schedule__admin-history-status {
    font-size: 11px;
    text-transform: uppercase;
    min-width: 70px;
}

.clinic-schedule__admin-history-date {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    min-width: 120px;
}

.clinic-schedule__admin-history-type {
    font-size: 13px;
    color: #555;
    min-width: 150px;
}

.clinic-schedule__admin-history-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
    flex: 1;
}

.clinic-schedule__admin-history-notes {
    font-size: 12px;
    color: #856404;
    background: #fff3cd;
    padding: 3px 8px;
    border-radius: 4px;
}

.clinic-schedule__admin-history-reviewed {
    color: #6c757d;
    margin-left: auto;
}

/* Day Detail Inline Panel */
.clinic-schedule__day-panel {
    max-width: 900px;
    margin: 20px auto 0 auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}

.clinic-schedule__day-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.clinic-schedule__day-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.clinic-schedule__day-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.clinic-schedule__day-panel-close:hover {
    color: #333;
}

.clinic-schedule__day--selected {
    background: #e3f2fd !important;
    box-shadow: inset 0 0 0 2px #337ab7;
}

.clinic-schedule__day-detail {
    padding: 0;
}

.clinic-schedule__detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.clinic-schedule__detail-item:last-child {
    border-bottom: none;
}

.clinic-schedule__detail-item--pending {
    background: #fff8e1;
}

.clinic-schedule__detail-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clinic-schedule__detail-hours {
    color: #28a745;
    font-weight: 500;
    margin-left: auto;
}

.clinic-schedule__detail-off {
    color: #dc3545;
    font-style: italic;
    margin-left: auto;
}

.clinic-schedule__detail-actions {
    width: 100%;
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* Inline Request Form (inside day detail panel) */
.clinic-schedule__request-form {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.clinic-schedule__request-form h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #333;
}

/* Edit Defaults Inline Panel */
.clinic-schedule__defaults-panel {
    max-width: 900px;
    margin: 20px auto 0 auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}

.clinic-schedule__defaults-panel h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.clinic-schedule__defaults-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.clinic-schedule__defaults-table {
    margin-top: 10px;
}

/* Multi-day pending badge */
.clinic-schedule__pending-badge {
    display: inline-block;
    font-size: 11px;
    background: #17a2b8;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
}

/* Header Badge for Pending Requests */
.clinic-schedule-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    margin-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #clinic-schedule-page {
        padding: 0 10px;
        overflow-x: hidden;
        width: 100%;
    }
    
    .clinic-schedule__pending-panel,
    .clinic-schedule__history-panel {
        margin: 0 0 15px 0;
        padding: 12px;
    }
    
    .clinic-schedule__pending-item,
    .clinic-schedule__history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .clinic-schedule__pending-info,
    .clinic-schedule__history-info {
        width: 100%;
    }
    
    .clinic-schedule__calendar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        margin: 0;
    }
    
    .clinic-schedule__header,
    .clinic-schedule__grid {
        min-width: 600px;
    }
    
    .clinic-schedule__day {
        min-height: 140px;
        padding: 3px;
    }
    
    .clinic-schedule__day-number {
        font-size: 12px;
    }
    
    .clinic-schedule__day-schedule {
        height: 100px;
    }
    
    .clinic-schedule__column {
        width: 18px;
    }
    
    .clinic-schedule__column-initial {
        font-size: 9px;
    }
    
    .clinic-schedule__column-track {
        width: 10px;
    }
    
    .clinic-schedule__vbar-start,
    .clinic-schedule__vbar-end {
        font-size: 7px;
        padding: 1px 2px;
    }
    
    .clinic-schedule__staff-badge {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .clinic-schedule__header-cell {
        padding: 6px 2px;
        font-size: 10px;
    }
    
    .clinic-schedule__nav {
        gap: 8px;
        padding: 10px 5px;
    }
    
    .clinic-schedule__nav-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .clinic-schedule__title {
        font-size: 16px;
        min-width: 120px;
    }
    
    .clinic-schedule__legend {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        margin: 0 5px 15px 5px;
    }
    
    .clinic-schedule__legend-item {
        font-size: 12px;
    }

    .clinic-schedule__day-panel,
    .clinic-schedule__defaults-panel {
        margin: 15px 0 0 0;
        padding: 12px;
    }

    .clinic-schedule__defaults-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   Payment Schedule Wizard (PSW)
   ============================================ */

/* Wizard container */
.tp-schedule-wizard {
    margin-top: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}

/* Step header */
.psw-step-header {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
        text-align: center;
    background: #657eea;
    padding: 5px;
    border-radius: 14px;
    color: #fff;
}

.psw-step-header:first-child {
    margin-top: 0;
}

/* Step header for dates section (adds spacing above) */
.psw-step-header--dates {
    margin-top: 25px;
}

/* Simple available amount display (replaces full summary in combined view) */
.psw-available-amount {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-left:15px;
    margin-right:15px;
}

.psw-available-amount strong {
    color: #28a745;
    font-size: 18px;
    font-weight: 700;
}

/* No plan variant */
.psw-available-amount--no-plan {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-align: left;
}

.psw-available-amount__label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.psw-available-amount__text {
    display: block;
    font-size: 13px;
    color: #666;
}

/* Loading state for dates */
.psw-dates-loading {
    text-align: center;
    padding: 30px;
    color: #666;
    font-size: 14px;
}

/* ============================================
   UNIFIED PLAN CARD DESIGN (used everywhere)
   ============================================ */

/* Base plan card - used in wizard, booking, single payment */
.plan-card {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

/* Selection mode (wizard only - shows radio/badge at top) */
.plan-card--selectable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-card--selectable:hover {
    border-color: #c945d9;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.25);
    transform: translateY(-2px);
}

.plan-card--selectable.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* No plan variant */
.plan-card--no-plan {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
    border-style: dashed;
    border-color: #adb5bd;
}

/* Selection header - radio + badge (wizard only) */
.plan-card__selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.plan-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.plan-card--selectable.selected .plan-card__radio {
    border-color: #667eea;
    background: #667eea;
}

.plan-card--selectable.selected .plan-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.plan-card__selected-badge {
    background: #667eea;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.plan-card--selectable.selected .plan-card__selected-badge {
    opacity: 1;
}

/* Date and Summary - centered, full width */
.plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Financials - 3 row grid layout */
.plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row 1: Total (full width) */
.plan-card__total-row {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.plan-card__total-row .label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.plan-card__total-row .value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

/* Row 2: Paid + Outstanding (2 columns) */
.plan-card__paid-outstanding-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.plan-card__amount-box {
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.plan-card__amount-box .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.plan-card__amount-box .value {
    font-size: 16px;
    font-weight: 700;
}

/* Paid box - green */
.plan-card__amount-box--paid {
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.plan-card__amount-box--paid .label {
    color: #155724;
}

.plan-card__amount-box--paid .value {
    color: #155724;
}

/* Outstanding box - red */
.plan-card__amount-box--outstanding {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.plan-card__amount-box--outstanding .label {
    color: #721c24;
}

.plan-card__amount-box--outstanding .value {
    color: #721c24;
}

/* Row 3: Unscheduled (full width, warning color) */
.plan-card__unscheduled-row {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.plan-card__unscheduled-row .icon {
    font-size: 16px;
}

.plan-card__unscheduled-row .label {
    font-size: 10px;
    font-weight: 600;
    color: #856404;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-card__unscheduled-row .value {
    font-size: 16px;
    font-weight: 700;
    color: #856404;
}

/* Card actions (Change/Cancel buttons) */
.plan-card__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.plan-card__change-btn,
.plan-card__cancel-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-card__change-btn {
    background: #e9ecef;
    color: #28a745;
}

.plan-card__change-btn:hover {
    background: #dee2e6;
}

.plan-card__cancel-btn {
    background: #fce4ec;
    color: #dc3545;
}

.plan-card__cancel-btn:hover {
    background: #f8bbd9;
}

/* Legacy psw-plan-card - redirect to new classes */
.psw-plan-card {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.psw-plan-card:hover {
    border-color: #c945d9;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.25);
    
}

.psw-plan-card.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15);
}

.psw-plan-card--no-plan {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
    border-style: dashed;
    border-color: #adb5bd;
}

.psw-plan-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.psw-plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-align: center;
    width: 100%;
}

.psw-plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    text-align: center;
}

.psw-plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psw-plan-card__selected-badge {
    background: #667eea;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.psw-plan-card.selected .psw-plan-card__selected-badge {
    opacity: 1;
}

.psw-plan-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.psw-plan-card.selected .psw-plan-card__radio {
    border-color: #667eea;
    background: #667eea;
}

.psw-plan-card.selected .psw-plan-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* Plan Selection List (wizard Step 1) */
.psw-plan-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.psw-plan-list .ips-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(224, 96, 236, 0.2);
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.psw-plan-list .ips-list-options {
    
    padding: 8px;
}

.psw-hide-list-btn {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
}

.psw-hide-list-btn:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Selected plan summary (Step 2) */
.psw-selected-summary {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.psw-selected-summary__title {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.psw-selected-summary__date {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.psw-selected-summary__text {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

.psw-selected-summary__financials {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.psw-selected-summary__financials div {
    color: #555;
}

.psw-selected-summary__available {
    font-size: 14px;
    font-weight: 600;
    color: #28a745;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Amount input (Step 2) */
.psw-amount-wrap {
    margin-top: 15px;
}

.psw-amount-wrap label {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

.psw-amount-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psw-amount-input .currency-symbol {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.psw-amount-input input {
    flex: 1;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
}

.psw-amount-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* Info banner (Step 3) */
.psw-info-banner {
    background: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.psw-info-banner--warning {
    background: #fff8e1;
    border-color: #ffe082;
}

.psw-info-banner i,
.psw-info-banner .psw-icon {
    font-size: 18px;
    color: #0066cc;
    flex-shrink: 0;
}

.psw-info-banner--warning .psw-icon {
    color: #856404;
}

.psw-info-banner__text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

/* Distributing amount header */
.psw-distributing {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
}

.psw-distributing strong {
    color: #28a745;
}

/* Date rows (Step 3) */
.psw-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
}

.psw-date-row__icon {
    font-size: 16px;
    flex-shrink: 0;
}

.psw-date-row__date {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

.psw-date-row__badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #d4edda;
    color: #155724;
    flex-shrink: 0;
}

.psw-date-row__badge--no-booking {
    background: #f8f9fa;
    color: #6c757d;
}

.psw-date-row__amount {
    width: 100px;
}

.psw-date-row__amount input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    text-align: right;
    font-size: 14px;
}

.psw-date-row__remove {
    color: #dc3545;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.psw-date-row__remove:hover {
    color: #a71d2a;
}

/* Add date manually section */
.psw-add-date {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 10px;
}

.psw-add-date__label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.psw-add-date__row {
    display: flex;
    gap: 10px;
}

.psw-add-date__input {
    flex: 1;
}

.psw-add-date__input input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.psw-add-date__btn {
    flex-shrink: 0;
}

/* Total summary (Step 3) */
.psw-total-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #e8f5e9;
    border-radius: 8px;
    margin-top: 15px;
}

.psw-total-summary--warning {
    background: #fff3e0;
}

.psw-total-summary__label {
    font-weight: 600;
    color: #333;
}

.psw-total-summary__amount {
    font-weight: 600;
    font-size: 16px;
    color: #28a745;
}

.psw-total-summary--warning .psw-total-summary__amount {
    color: #e65100;
}

.psw-total-summary__icon {
    font-size: 18px;
    margin-left: 5px;
}

.psw-total-summary__hint {
    font-size: 12px;
    color: #666;
    margin-top: 3px;
}

/* Action buttons */
.psw-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.psw-actions .btn {
    padding: 10px 20px;
}
.psw-actions .btn-primary {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
    font-weight: 600;
}

/* Unscheduled warning with button */
.tp-unscheduled-warning {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-schedule-btn {
    white-space: nowrap;
}

/* Legacy unscheduled banner (replaced by .tp-foot .warn-strip + .btn-cta) */

/* Main wizard container at bottom */
.psw-main-container {
    margin-top: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}

/* Hide old progress bar on tp-card (not .progress-slim) */
.tp-card .progress:not(.progress-slim),
.tp-card .progress-zero {
    display: none;
}

@media (max-width: 767px) {
    .psw-date-row {
        flex-wrap: wrap;
    }
    
    .psw-date-row__date {
        flex-basis: 100%;
        margin-bottom: 5px;
    }
    
    .psw-date-row__amount {
        flex: 1;
    }
    
    .psw-plan-card__financials {
        flex-direction: column;
        gap: 5px;
    }
    
    .psw-actions {
        flex-direction: column;
    }
    
    .psw-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Inline Payment Selector (IPS)
   ============================================ */

/* Hide all environment_id dropdowns - they are handled by inline selectors */
select[name="environment_id"],
select[name^="environment_id["],
.env-select.environment_trigger,
select[name="environment_id"] + .select2-container,
select[name^="environment_id["] + .select2-container,
.env-select.environment_trigger + .select2-container,
.environment_id .select2-container {
    display: none !important;
}

.inline-payment-selector {
    margin-bottom: 15px;
}

.scheduled-payments-list h4.ips-form-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align:center;
}

.ips-header {
    display: none;
}

.ips-icon {
    display: none;
}

/* Selected Plan Display - uses unified plan-card design */
.ips-selected-plan {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

/* Reuse plan-card styles inside ips-selected-plan */
.ips-selected-plan .psw-plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.ips-selected-plan .psw-plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.ips-selected-plan .psw-plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Legacy ips-plan-info styles - kept for backwards compatibility */
.ips-plan-info {
    display: block;
}

.ips-plan-icon {
    display: none;
}

.ips-plan-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ips-plan-header {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.ips-plan-date {
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
}

.ips-plan-summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Financial Grid */
.ips-plan-amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.ips-amount-box {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.ips-amount-box .label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.ips-amount-box .value {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.ips-amount-box .value.outstanding {
    color: #dc3545;
}

.ips-amount-box .value.unscheduled {
    color: #6f42c1;
}

/* Action buttons in card */
.ips-card-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.ips-change-btn,
.ips-clear-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.ips-change-btn {
    background: #e9ecef;
    color: #28a745;
}

.ips-change-btn:hover {
    background: #dee2e6;
    text-decoration: none;
}

.ips-clear-btn {
    background: #fce4ec;
    color: #dc3545;
}

.ips-clear-btn:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Plan Selection List */
.ips-plan-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.ips-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(224, 96, 236, 0.2);
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.ips-cancel-change,
.ips-cancel-date-change {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
}

.ips-cancel-change:hover,
.ips-cancel-date-change:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Bulk plan list cancel button */
.bulk-plan-list-cancel {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
}

.bulk-plan-list-cancel:hover {
    background: #f8bbd9;
    text-decoration: none;
    color: #dc3545;
}

.ips-list-options {
    
    
    padding: 8px;
}

.ips-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.ips-option:last-child {
    margin-bottom: 0;
}

.ips-option:hover {
    background: #f8f5ff;
    border-color: #c4b5fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(157, 127, 239, 0.15);
}

.ips-option.selected {
    background: #f5f0ff;
    border-color: #9d7fef;
    box-shadow: 0 0 0 2px rgba(157, 127, 239, 0.2);
}

.ips-option-radio {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
}

.ips-option-date {
    font-weight: 600;
    font-size: 13px;
    min-width: 90px;
    color: #333;
}

.ips-option-summary {
    flex: 1;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ips-option-unscheduled {
    font-size: 11px;
    color: #6f42c1;
    font-weight: 600;
    white-space: nowrap;
}

.ips-option--no-plan {
    background: #fafafa;
}

.ips-option--no-plan .ips-option-date {
    color: #666;
    font-weight: 500;
}

/* Plan list option - card style (compact) */
.ips-option--card {
    display: block;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ips-option--card:hover {
    border-color: #6f42c1;
    background: #f8f5ff;
    transform: none;
    box-shadow: none;
}

.ips-option--card.selected {
    border-color: #6f42c1;
    background: #f3e8ff;
    box-shadow: none;
}

.ips-option--card:last-child {
    margin-bottom: 0;
}

.ips-option__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ips-option__radio {
    color: #6f42c1;
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
}

.ips-option__date {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    width: 100%;
    text-align:center;
}

.ips-option__services {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
    padding-left: 24px;
    text-align:center;
}

.ips-option__financials {
    font-size: 11px;
    color: #868e96;
    margin-bottom: 4px;
    padding-left: 24px;
}

.ips-option__unscheduled {
    font-size: 12px;
    font-weight: 500;
    color: #e67700;
    padding-left: 24px;
}

.ips-option__scheduled {
    font-size: 12px;
    color: #28a745;
    padding-left: 24px;
}

/* Total row */
.ips-option__total-row {
display: flex;
    font-size: 11px;
    color: #495057;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 5px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    border: 1px solid #e6e6e6;
}

.ips-option__total-row .label {
    font-weight: 500;
    color:inherit;
    font-size:inherit;
}

.ips-option__total-row .value {
    font-weight: 600;
}

/* Paid + Outstanding row */
.ips-option__paid-outstanding-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.ips-option__amount-box {
    flex: 1;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.ips-option__amount-box .label {
    font-weight: 500;
    color:inherit;
    font-size:inherit;
}

.ips-option__amount-box .value {
    font-weight: 600;
}

/* Paid box - green tint */
.ips-option__amount-box--paid {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    justify-content: center;
}

/* Outstanding box - orange/red tint */
.ips-option__amount-box--outstanding {
    background: #f8d7db;
    color: #721c25;
    border: 1px solid #f5c6cb;
    justify-content: center;
}

/* Unscheduled warning row */
.ips-option__unscheduled-row {
display: flex;
    align-items: center;
    gap: 4px;
    
    font-size: 11px;
    color: #856504;
    font-weight: 500;
    background: #fff4cd;
    margin-left: 23px;
    padding-right: 4px;
    border-radius: 5px;
    padding:2px;
    border: 1px solid #ffc206;
    justify-content: center;
}
.ips-option__unscheduled-row .label{
  color:inherit;
  font-size:inherit;
}
.ips-option__unscheduled-row .icon {
    font-size: 11px;
}

.ips-option__unscheduled-row .value {
    
    font-weight: 600;
}

/* No plan option in card style - simpler */
.ips-option--card.ips-option--no-plan .ips-option__services {
    color: #868e96;
    font-style: italic;
    margin-bottom: 0;
}

.ips-option--card.ips-option--no-plan .ips-option__date {
    color: #666;
}

/* IPS Option with booking badge below date */
.ips-option--with-badge {
    align-items: flex-start;
}

.ips-option--with-badge .ips-option-radio {
    margin-top: 2px;
}

.ips-option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ips-option-booking-badge {
    font-size: 10px;
    color: #155724;
    background: #d4edda;
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}

/* Amount Input */
.ips-amount {
    margin-top: 0;
    margin-bottom: 15px;
}

.ips-amount label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.ips-amount .input-group {
    max-width: 100%;
        width: 100%;
}

.ips-amount .input-group-addon {
    display: none;
}

.ips-amount input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 14px;
    width: 100%;
}

.ips-amount input::placeholder {
    color: #999;
}

/* ============================================
   Date Selector (Single Payment Only)
   ============================================ */

.ips-date-selector {
    margin-top: 0;
    margin-bottom: 15px;
}

.ips-date-selector > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.ips-selected-date {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ips-date-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ips-date-icon {
    font-size: 18px;
}

.ips-date-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ips-date-display {
    font-size: 14px;
    color: #333;
}

.ips-date-badge .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
}

.ips-date-badge .badge-success {
    background: #d4edda;
    color: #155724;
}

.ips-date-badge .badge-warning {
    background: #fff3cd;
    color: #856404;
}

.ips-date-badge .badge-secondary {
    background: #e9ecef;
    color: #495057;
}

.ips-change-date-btn {
    padding: 8px 16px;
    font-size: 12px;
    color: #28a745;
    background: #e9ecef;
    border-radius: 15px;
    font-weight: 600;
}

.ips-change-date-btn:hover {
    background: #dee2e6;
    text-decoration: none;
}

.ips-date-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.ips-date-options {
  
    overflow-y: auto;
    padding: 8px;
}

.ips-manual-date {
    border-top: 1px solid rgba(224, 96, 236, 0.2);
    background: rgba(255,255,255,0.5);
}

.ips-option--manual {
    background: #fafafa;
}

.ips-manual-icon {
    margin-left: auto;
    font-size: 16px;
}

.ips-datepicker {
    margin: 10px;
    width: calc(100% - 20px);
}

/* Actions row */
.ips-actions {
    margin-top: 15px;
    padding: 0;
}

/* Payment block styling for update forms */
.payment-block {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #fafafa;
}

/* Mobile responsiveness for IPS */
@media (max-width: 576px) {
    .ips-selected-plan {
        padding: 12px;
    }
    
    .ips-plan-amounts {
        gap: 8px;
    }
    
    .ips-amount-box {
        padding: 8px;
    }
    
    .ips-amount-box .value {
        font-size: 16px;
    }
    
    .ips-card-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .ips-card-actions .btn {
        width: 100%;
    }
    
    .ips-selected-date {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .ips-change-date-btn {
        align-self: flex-end;
    }
    
    .ips-option {
        flex-wrap: wrap;
    }
    
    .ips-option-summary {
        width: 100%;
        margin-left: 26px;
    }
    
    .ips-option-unscheduled {
        margin-left: 26px;
    }
}

/* ============================================
   Step Headers - Unified Style for Payment Wizards
   ============================================ */

/* Single payment form step headers (ips = inline payment selector) */
.ips-step-header {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;

    margin-top: 10px;
    text-align: center;
    background: #657eea;
    padding: 5px;
    border-radius: 14px;
    color: #fff;
}

.ips-step-header:first-of-type {
    margin-top: 10px;
}

/* ============================================
   Supporting Styles for Payment Wizard
   ============================================ */

.psw-amount-section {
    margin: 10px 0 15px 0;
}

.psw-amount-tooltip {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 13px;
    color: #856404;
    display: none;
    animation: slideDownFade 0.2s ease-out;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.psw-dates-section {
    margin: 10px 0 15px 0;
}

.psw-no-plan-notice {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* ============================================
   Bulk Booking UI - Plan Selector & Steps
   ============================================ */

.bulk-plan-selector {
    margin-bottom: 20px;
}

.bulk-plan-card {
    position: relative;
}

.bulk-plan-card-inner {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

.bulk-plan-card-inner.bulk-plan-card--empty {
    border-color: #dee2e6;
    background: #f8f9fa;
}

/* Plan selection list (dropdown-style) */
.bulk-plan-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
}

/* Plan list item - card style */
.bulk-plan-list-item {
    padding: 12px 15px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-plan-list-item:last-child {
    margin-bottom: 0;
}

.bulk-plan-list-item:hover {
    border-color: #6f42c1;
    background: #f8f5ff;
}

/* No plan option styling */
.bulk-plan-list-item--no-plan {
    background: #f8f9fa;
    border-style: dashed;
}

.bulk-plan-list-item--no-plan:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
}

.bulk-list-item-date {
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.bulk-list-item-services {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 6px;
}

.bulk-list-item-financials {
    font-size: 12px;
    color: #868e96;
    margin-bottom: 6px;
}

.bulk-list-item-unscheduled {
    font-size: 13px;
    font-weight: 500;
    color: #e67700;
}

.bulk-list-item-scheduled {
    font-size: 13px;
    color: #28a745;
}

/* Legacy classes - keep for backward compatibility */
.bulk-plan-list-item__title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.bulk-plan-list-item__sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.bulk-plan-list-item__amounts {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Bulk config section */
.bulk-config {
    margin-bottom: 15px;
}

.bulk-config .starting_date {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}

/* Add buttons container */
.bulk-add-buttons {
    margin-bottom: 15px;
}

.bulk-add-buttons .btn {
    margin-right: 10px;
}

/* Payment section */
.bulk-payment-section {
margin: 0px 0 20px 0px;
    padding: 0 0 10px 0px;
}

.bulk-payment-section .form-group {
    margin-top: 10px;
        padding: 0 15px;
}

.bulk-payment-section .form-group label {
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

/* ============================================
   Bulk Booking Preview
   ============================================ */

.bulk-preview {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    overflow: hidden;
}

.bulk-preview-header h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.bulk-preview-list {
    margin-bottom: 15px;
    overflow: visible;
}

.bulk-preview-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.bulk-preview-item:last-child {
    border-bottom: none;
}

.bulk-preview-item:hover {
    background: #f8f9fa;
}

.preview-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.preview-row-details {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 46px;
    font-size: 13px;
}

.preview-num {
    font-weight: 600;
    color: #667eea;
    min-width: 40px;
    font-size: 13px;
}

.preview-day {
    font-weight: 500;
    color: #667eea;
    min-width: 30px;
}

.preview-date {
    font-weight: 600;
    color: #333;
}

.preview-service {
    color: #555;
    flex: 1;
    text-align: left;
}

.preview-time {
    color: #888;
}

.preview-payment-assigned {
    color: #388e3c;
    font-weight: 600;
}

.preview-edit-date,
.preview-edit-time {
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 5px;
}

/* Day header for grouped appointments */
.bulk-preview-day-header {
    background: #667eea;
    color: #fff;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bulk-preview-day-header:first-child {
    margin-top: 0;
}

.preview-day-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align:left;
}

.preview-day-name {
    font-weight: 600;
    font-size: 14px;
}

.preview-day-date {
    font-size: 13px;
    opacity: 0.9;
}

/* Payment input in day header */
.preview-day-payment {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-day-payment-label {
    font-size: 12px;
    opacity: 0.9;
}

.preview-day-payment .input-group {
    width: 90px;
}

.preview-day-payment .input-group-addon {
    padding: 4px 8px;
    font-size: 12px;
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.preview-day-amount {
    padding: 4px 6px;
    font-size: 13px;
    height: auto;
    text-align: right;
    background: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.5);
}

.preview-day-amount.locked {
    background: #fff3cd;
    border-color: #ffc107;
}

.preview-day-lock {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
}

.preview-day-lock:hover {
    background: rgba(255,255,255,0.3);
}

.preview-day-lock.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #333;
}

/* Items under a day header */
.bulk-preview-day-header + .bulk-preview-item {
    border-radius: 0;
    border-top: none;
}

.bulk-preview-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    margin-bottom: 0;
    border-radius: 0;
}

.bulk-preview-item:last-child,
.bulk-preview-item:has(+ .bulk-preview-day-header) {
    border-radius: 0 0 6px 6px;
    margin-bottom: 10px;
}

/* Hide remove button on first block (template) */
#bulk-blocks .block-template .remove-block {
    display: none;
}

.bulk-date-picker-input {
    width: 100px;
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    height: auto;
}

.bulk-time-picker-select {
    width: 110px;
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    height: auto;
}

.bulk-preview-payment {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
}

.bulk-preview-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bulk-preview-actions .btn {
    flex: 1;
}

.booking-progress {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

/* ===========================
   Smart Payment Scheduling - Date Rows (Multi-line layout)
   =========================== */

/* Base date row - stacked layout */
.psw-date-row {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Line 1: Check/Date + Remove button */
.psw-date-row__line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.psw-date-row__check {
    font-size: 14px;
    flex-shrink: 0;
}

.psw-date-row__date {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.psw-date-row__scheduled-amount {
    color: #28a745;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* Line 2: Badge + Amount input + Lock (editable) or just Badge (scheduled) */
.psw-date-row__line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    justify-content: space-between;
    width: 100%;
}

.psw-date-row__badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d4edda;
    color: #155724;
    white-space: nowrap;
    flex-shrink: 0;
}

.psw-date-row__badge--no-booking {
    background: #f8f9fa;
    color: #6c757d;
}

/* Amount input - smaller for 2-line layout */
.psw-date-row__amount-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100px;
}

.psw-date-row__currency {
    padding: 4px 6px;
    background: #e9ecef;
    color: #495057;
    font-weight: 500;
    font-size: 13px;
    border-right: 1px solid #ced4da;
}

.psw-date-row__amount-input input {
    flex: 1;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    min-width: 0;
    width: 50px;
    outline: none;
}

.psw-date-row__amount-input input:focus {
    box-shadow: none;
}

/* Already scheduled date row (read-only) */
.psw-date-row--scheduled {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    opacity: 0.85;
}

/* Editable date row */
.psw-date-row--editable {
    background: #fff;
    border: 1px solid #dee2e6;
}

/* Locked date row */
.psw-date-row--locked {
    background: #fffef5;
    border-color: #ffc107;
}

/* Lock button - smaller */
.psw-date-row__lock {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    line-height: 1;
    transition: all 0.15s;
    flex-shrink: 0;
}

.psw-date-row__lock:hover {
    background: #e9ecef;
}

.psw-date-row--locked .psw-date-row__lock {
    background: #fff3cd;
    border-color: #ffc107;
}

/* Locked input styling */
.psw-date-row__amount-input.locked {
    border-color: #ffc107;
    background: #fffef5;
}

.psw-date-row__amount-input.locked .psw-date-row__currency {
    background: #fff3cd;
    border-color: #ffc107;
}

/* Remove button - on line 1 */
.psw-date-row__remove {
    color: #dc3545;
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: all 0.15s;
    opacity: 0.6;
    flex-shrink: 0;
}

.psw-date-row__remove:hover {
    opacity: 1;
}

/* jQuery UI Datepicker z-index fix for bulk preview */
.ui-datepicker {
    z-index: 9999 !important;
}

/* All scheduled notice */
.psw-all-scheduled-notice {
    margin-bottom: 15px;
    text-align: center;
}

/* Had treatment today checkbox (per block in bulk booking) */
.block-had-treatment-row {
    margin-top: 0;
    margin-bottom: 5px;
    padding-left: 0;
}

.block-had-treatment-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    color: #6c757d;
    cursor: pointer;
}

.block-had-treatment {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.block-had-treatment-label span {
    color: #495057;
}

/* Badge for original/currently linked plan in plan selector */
.ips-badge--original {
    background: #17a2b8;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* ===========================
   PSW: Cross-Plan Payment Warning (Issue 3)
   =========================== */
.psw-date-row__other-plans-line {
    width: 100%;
    padding: 4px 0 2px 0;
}

.psw-date-row__other-plans {
    font-size: 11px;
    color: #856404;
    background: #fff3cd;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
}

/* ===========================
   Patient Emails (uep): T-228 phone-first redesign (2026-10-16).
   The panel (calendar + patient page) and the Mails page share these rows,
   the reading view, the Done box, the Undo strip and the Dealt-with list
   (kit in footer_scripts/unreplied_emails.php). Phone first; one-line rows
   and side-by-side reading from 768px.
   =========================== */
.uep-panel[hidden],
.uep-kit [hidden],
.uep-panel [hidden] { display: none !important; }

.uep-panel,
.uep-kit {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #111827;
}
.uep-panel *,
.uep-kit * { box-sizing: border-box; }
.uep-ico { flex-shrink: 0; }

.uep-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    overflow: hidden;
    margin: 15px 0 20px;
}
.uep-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    background: #d97706;
    color: #fff;
}
.uep-panel__header.has-ravi { gap: 6px; }
.uep-panel__icon { flex-shrink: 0; }
.uep-panel__title {
    margin: 0;
    font-size: 19px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uep-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: #92400e;
    font-size: 14px;
    font-weight: 700;
}
.uep-panel__ravi {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #7c3aed;
    border: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.uep-panel__refresh {
    margin-left: auto;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.uep-panel__refresh:hover,
.uep-panel__refresh:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; }
.uep-panel__refresh.is-spinning svg,
.mails-refresh.is-spinning svg { animation: spin 1s linear infinite; }
.uep-panel__body {
    background: #f3f4f6;
    padding: 8px;
}

/* Status line: a background live Gmail check is running, or it found something
   new while a reply is being drafted (calendar + Mails page). */
.uep-status {
    display: block;
    border-bottom: 1px solid #fde68a;
    background: #fffbeb;
}
.uep-fetching {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: #92400e;
}
.uep-fetching__dots { display: inline-flex; align-items: center; gap: 3px; }
.uep-fetching__dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d97706;
    display: inline-block;
    animation: uep-dot-pulse 1.2s infinite ease-in-out both;
}
.uep-fetching__dots i:nth-child(1) { animation-delay: -0.32s; }
.uep-fetching__dots i:nth-child(2) { animation-delay: -0.16s; }
.uep-fetching__dots i:nth-child(3) { animation-delay: 0s; }
@keyframes uep-dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
.uep-stale-notice {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #b45309;
    text-align: left;
    cursor: pointer;
}
.uep-stale-notice:hover { color: #92400e; text-decoration: underline; }

/* ---- list ---- */
.uep-kit { display: flex; flex-direction: column; gap: 8px; }
.uep-group { display: flex; flex-direction: column; gap: 8px; }
.uep-group:empty,
.uep-undo-slot:empty,
.uep-more-slot:empty { display: none; }
.uep-group-label {
    margin: 0;
    padding: 4px 6px 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: #4b5563;
}
.uep-group-label--consult { color: #9a3412; }
.uep-msg,
.uep-loading,
.uep-error {
    margin: 0;
    padding: 20px 12px;
    text-align: center;
    font-size: 15px;
    color: #6b7280;
}
.uep-msg.is-error,
.uep-error { color: #b91c1c; }

/* Row (E): phone = two lines (name, clinic chip, time / snippet) */
.uep-row {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 10px 12px 14px;
    transition: opacity 0.18s ease;
}
.uep-row.is-leaving { opacity: 0; }
.uep-row--consult { background: #fff7ed; border-color: #fdba74; }
.uep-row--ravi { border-color: #c4b5fd; }
.uep-row--consult.uep-row--ravi { border-color: #fdba74; }
.uep-row__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uep-row__open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}
.uep-row__open:focus-visible,
.uep-read__head:focus-visible,
.uep-done:focus-visible,
.uep-btn:focus-visible,
.uep-putback:focus-visible,
.uep-undo__btn:focus-visible,
.uep-dealt__toggle:focus-visible,
.uep-quoted-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.uep-row__line { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 24px; }
.uep-row__name {
    flex-shrink: 0;
    max-width: 45%;
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uep-row__clinic { display: flex; min-width: 0; }
.uep-row__subject { display: none; }
.uep-row__end { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.uep-row__clip { display: inline-flex; color: #6b7280; }
.uep-row__time { font-size: 13px; line-height: 18px; color: #6b7280; white-space: nowrap; }
.uep-row--consult .uep-row__time { color: #4b5563; }
.uep-row__time.is-overdue { color: #b91c1c; font-weight: 600; }
.uep-row__consult { display: flex; min-width: 0; min-height: 24px; }
.uep-consult-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #c2410c;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    white-space: nowrap;
}
.uep-consult-chip__text { overflow: hidden; text-overflow: ellipsis; }
.uep-row__snippet {
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uep-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; min-width: 0; }
.uep-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.uep-tag--ravi { background: #7c3aed; color: #fff; font-weight: 700; }
.uep-tag--appt { background: #fef3c7; color: #92400e; }
.uep-row__main { flex-wrap: wrap; }
.uep-row__links { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.uep-row--consult .uep-row__links { margin-top: 4px; }
.uep-row__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: underline;
    white-space: nowrap;
}
.uep-row__link--lead { color: #b45309; }
.uep-row__link { position: relative; z-index: 1; touch-action: manipulation; }
.uep-drow:has(.uep-drow__open) { cursor: pointer; }
.uep-row__link:hover { color: #1d4ed8; }
.uep-row__link--lead:hover { color: #92400e; }
.uep-row__ravi { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.uep-row__ravi-from {
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clinic chip: pale colour per clinic + the clinic's flag image */
.uep-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px 2px 5px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.uep-chip__text { overflow: hidden; text-overflow: ellipsis; }
.uep-chip .loc-flag { flex-shrink: 0; width: 16px; height: 12px; margin: 0; border-radius: 2px; object-fit: cover; }
.uep-chip--loc-25525,
.uep-chip--loc-8245,
.uep-chip--loc-23783,
.uep-chip--loc-25526 { background: #dbeafe; color: #1e40af; }
.uep-chip--loc-25527 { background: #dcfce7; color: #166534; }
.uep-chip--loc-25528 { background: #ffe4e6; color: #9f1239; }
.uep-chip--loc-25529 { background: #e0e7ff; color: #3730a3; }

/* Done (44px) */
.uep-done {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 76px;
    height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.uep-done:hover { border-color: #9ca3af; color: #111827; }
.uep-done.is-active { background: #f3f4f6; border-color: #6b7280; color: #111827; }
/* Consultation rows on a phone: Done sits top right, the chip and snippet run full width */
.uep-row--consult .uep-row__main { display: block; }
.uep-row--consult .uep-row__open { width: 100%; }
.uep-row--consult .uep-row__main > .uep-done { position: absolute; top: 12px; right: 10px; }
.uep-row--consult:not(.uep-row--nodone) .uep-row__line { min-height: 44px; padding-right: 98px; }

/* Done box */
.uep-donebox {
    margin-top: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.uep-donebox__label {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #92400e;
}
.uep-donebox__other { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.uep-select { position: relative; }
.uep-select select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 44px 0 14px;
    font: inherit;
    font-size: 16px;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    cursor: pointer;
}
.uep-select .uep-ico { position: absolute; right: 14px; top: 15px; pointer-events: none; color: #374151; }
.uep-donebox__reason,
.uep-reply__textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    resize: vertical;
}
.uep-donebox__reason { height: 98px; }
.uep-reply__textarea { height: 122px; }
.uep-select select:focus,
.uep-donebox__reason:focus,
.uep-reply__textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.uep-donebox__reason.is-invalid { background: #fef2f2; border: 2px solid #dc2626; }
.uep-donebox__reason.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.uep-donebox__error {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #b91c1c;
}
.uep-donebox__actions { display: flex; gap: 10px; margin-top: 4px; }
.uep-donebox__cancel { flex: 2; }
.uep-donebox__confirm { flex: 3; }

/* Buttons */
.uep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}
.uep-btn:hover { border-color: #9ca3af; color: #111827; }
.uep-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.uep-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.uep-btn:disabled,
.uep-done:disabled,
.uep-putback:disabled,
.uep-undo__btn:disabled { opacity: 0.6; cursor: wait; }

/* Reading view (inline, inside the row) */
.uep-row.is-open { padding: 0; overflow: hidden; background: #fff; }
.uep-row.is-open > .uep-row__main { display: none; }
.uep-row.is-open > .uep-read { order: 2; }
.uep-row.is-open > .uep-donebox { order: 3; margin: 0 16px 16px; }
.uep-read { display: flex; flex-direction: column; min-width: 0; }
.uep-read__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px 16px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.uep-read__top { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.uep-read__top .uep-ico { margin-top: 2px; color: #374151; }
.uep-read__subject {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    line-height: 23px;
    font-weight: 600;
    color: #111827;
    overflow-wrap: anywhere;
}
.uep-read__meta {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #4b5563;
    overflow-wrap: anywhere;
}
.uep-read__meta b { font-weight: 600; color: #111827; }
.uep-read__meta--wide { display: none; }
.uep-read__grid { min-width: 0; }
.uep-read__main { padding: 16px; min-width: 0; }
.uep-doc {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.uep-doc__frame { display: block; width: 100%; min-height: 24px; border: 0; background: #fff; }
.uep-doc--quoted { margin-top: 12px; padding-left: 10px; border-left: 3px solid #e5e7eb; }
.uep-quoted-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.uep-atts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uep-att {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #1d4ed8;
    font-size: 15px;
    text-decoration: none;
}
.uep-att:hover { background: #f9fafb; text-decoration: none; }
.uep-att__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uep-att__size { flex-shrink: 0; color: #6b7280; font-size: 13px; }
.uep-reply {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.uep-reply__label { display: block; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #374151; }
.uep-reply__actions { display: flex; gap: 10px; margin-top: 4px; }
.uep-reply__attach { flex-shrink: 0; }
.uep-reply__send { flex: 1; gap: 8px; }
.uep-reply__status { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.uep-reply__status.is-error { color: #b91c1c; }
.uep-reply__status.is-ok { color: #15803d; }
.uep-files { display: flex; flex-wrap: wrap; gap: 6px; }
.uep-files:empty { display: none; }
.uep-file {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    height: 36px;
    padding: 0 2px 0 12px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 14px;
    color: #111827;
}
.uep-file__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uep-file__remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b5563;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.uep-open-profile {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    color: #2563eb;
    text-decoration: underline;
}
.uep-read__foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 12px;
    border-top: 1px solid #e5e7eb;
}
.uep-read__foot .uep-done { min-width: 120px; padding: 0 16px; }

/* Undo strip (8 seconds after Confirm, also "Reply sent.") */
.uep-undo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 6px 6px 16px;
    background: #1f2937;
    border-radius: 12px;
    color: #fff;
}
.uep-undo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uep-undo__title { font-size: 15px; line-height: 20px; font-weight: 600; color: #fff; }
.uep-undo__sub { font-size: 13px; line-height: 18px; color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uep-undo__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    background: #fef3c7;
    border: 0;
    border-radius: 10px;
    color: #b45309;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.uep-inline-error { flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fca5a5; }
.uep-drow .uep-inline-error { color: #b91c1c; }

/* Dealt-with strip (bottom of the panel) and the Mails page Dealt with tab */
.uep-dealt { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.uep-dealt__toggle {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: #fff;
    border: 0;
    margin: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    text-align: left;
    cursor: pointer;
}
.uep-dealt__toggle[aria-expanded="true"] { border-bottom: 1px solid #e5e7eb; }
.uep-dealt__toggle[aria-expanded="true"] .uep-ico:last-child { transform: rotate(180deg); }
.uep-dealt__title { flex: 1; }
.uep-dealt__list { list-style: none; margin: 0; padding: 0; }
.uep-dealt__list--main { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.uep-drow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: #f9fafb;
}
.uep-drow + .uep-drow { border-top: 1px solid #e5e7eb; }
.uep-drow { flex-wrap: wrap; }
.uep-drow > .uep-putback { order: 1; }
.uep-drow > .uep-row__links { order: 2; }
.uep-drow > .uep-dread { order: 3; }
.uep-drow__open {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}
.uep-drow__open:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.uep-drow.is-open { background: #fff; }
.uep-dread {
    flex-basis: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.uep-dread__subject { margin: 0; }
.uep-dread__subject:empty { display: none; }
.uep-drow__info { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.uep-drow__line { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; }
.uep-drow__name {
    flex-shrink: 0;
    max-width: 50%;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uep-status {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.uep-status--dealt { background: #e0f2fe; color: #075985; }
.uep-status--ravi { background: #ede9fe; color: #5b21b6; }
.uep-status--other { background: #f1f5f9; color: #334155; }
.uep-status--reply { background: #dcfce7; color: #166534; }
.uep-chip--dealt { display: none; }
.uep-drow__who { display: block; font-size: 13px; line-height: 18px; color: #4b5563; overflow-wrap: anywhere; }
.uep-drow__when { white-space: nowrap; }
.uep-drow__reason { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: #374151; overflow-wrap: anywhere; }
.uep-putback {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #b45309;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.uep-dealt__foot { padding: 4px 14px; border-top: 1px solid #e5e7eb; background: #fff; }
.uep-dealt__more {
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #2563eb;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.uep-load-more {
    width: 100%;
    height: 48px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.uep-load-more:disabled { opacity: 0.6; cursor: default; }

/* Highlight on the patient page when arriving from a reply_to deep link */
.acm-item.unreplied-highlight {
    animation: unreplied-pulse 0.5s ease-in-out 3;
    box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.55);
}
@keyframes unreplied-pulse {
    0%, 100% { background-color: #fff; }
    50% { background-color: #fef3c7; }
}

/* Phone: no horizontal overflow at 390px, long words wrap */
@media (max-width: 767px) {
    .uep-panel { margin: 12px 0 16px; }
    .uep-read__meta,
    .uep-drow__who { white-space: normal; }
}

/* 768px and wider: one-line rows (name, clinic, subject · snippet, time, Done) */
@media (min-width: 768px) {
    .uep-row { padding: 8px 8px 8px 14px; }
    .uep-row__open { min-height: 44px; justify-content: center; }
    .uep-row__line { gap: 12px; }
    .uep-row__name { width: 96px; max-width: none; font-size: 15px; line-height: 22px; }
    .uep-row__clinic { flex: 0 0 150px; width: 150px; }
    .uep-row__subject {
        display: block;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
        line-height: 22px;
        color: #4b5563;
    }
    .uep-row__subject-text { font-weight: 600; color: #111827; }
    .uep-row__end { margin-left: 0; min-width: 40px; justify-content: flex-end; }
    .uep-row__snippet { display: none; }
    .uep-row--consult .uep-row__main { display: flex; }
    .uep-row--consult .uep-row__open { width: auto; }
    .uep-row--consult .uep-row__main > .uep-done { position: static; }
    .uep-row--consult:not(.uep-row--nodone) .uep-row__line { min-height: 22px; padding-right: 0; }
    .uep-done { min-width: 88px; padding: 0 14px; }
    .uep-row__main { flex-wrap: nowrap; }
    .uep-row__links { order: 0; flex: 0 0 auto; }
    .uep-row--consult .uep-row__links { margin-top: 0; }
    .uep-drow > .uep-row__links { order: 1; }
    .uep-drow > .uep-putback { order: 2; }
    .uep-chip--dealt { display: inline-flex; }

    .uep-row.is-open { padding: 8px 8px 0 14px; }
    .uep-row.is-open > .uep-row__main { display: flex; }
    .uep-row > .uep-donebox { align-self: flex-end; width: 100%; max-width: 560px; }
    .uep-row.is-open > .uep-donebox { order: 1; margin: 12px 0 0; }
    .uep-row.is-open > .uep-read { order: 2; margin: 8px -8px 0 -14px; border-top: 1px solid #e5e7eb; background: #f8fafc; }
    .uep-row.is-open > .uep-donebox ~ .uep-read { margin-top: 12px; }
    .uep-read__head { display: none; }
    .uep-read__foot { display: none; }
    .uep-read__meta--wide { display: block; margin-bottom: 12px; }
    .uep-read__main { padding: 16px 20px; }
    .uep-read__doc { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; }
    .uep-reply { padding: 16px 20px 20px; }
}
@media (min-width: 992px) {
    .uep-read__grid.has-reply { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px; }
    .uep-read__grid.has-reply .uep-reply { border-top: 0; padding: 16px 20px 20px 0; }
}

.glyphicon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================================================
   Treatment Plan Screenshot Attachments
   ================================================ */

/* "Attach Treatment Plans" button in compose */
.compose-panel__attach-tp-btn {
    background: #6c5ce7;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;

    cursor: pointer;
    font-size: 13px;
}

.compose-panel__attach-tp-btn:hover {
    background: #5b4cdb;
}

.compose-panel__attach-tp-btn.active {
    background: #e17055;
}

/* Selection mode - make cards selectable */
body.tp-attachment-mode .row-plan-desc.tp-selectable {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 8px;
}

body.tp-attachment-mode .row-plan-desc.tp-selectable:hover {
    border-color: #35dcbd;
    box-shadow: 0 0 15px rgba(53, 220, 189, 0.3);
}

/* Selected state */
body.tp-attachment-mode .row-plan-desc.tp-selected {
    border-color: #35dcbd;
    background: rgb(216 255 248);
    box-shadow: 0 0 20px rgba(53, 220, 189, 0.4);
}

body.tp-attachment-mode .row-plan-desc.tp-selected::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #35dcbd;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 10;
}

/* Disable interactive elements inside treatment plans during selection mode */
body.tp-attachment-mode .row-plan-desc .record_new_sessz,
body.tp-attachment-mode .row-plan-desc a[href*="delete_recorded_session"],
body.tp-attachment-mode .row-plan-desc .history_dates a,
body.tp-attachment-mode .row-plan-desc select,
body.tp-attachment-mode .row-plan-desc input {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}

/* Make sure row-plan-desc has relative positioning for the checkmark */
.row-plan-desc[class*="identifier_"] {
    position: relative;
}

/* Standalone Save Plans as IMG button */
.tp-save-standalone-btn {
    background: #59bed2;
    color: #fff;
    font-size: 15px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    margin: 10px;
    margin-left: 0;
    font-weight: bold;
}

.tp-save-standalone-btn.active {
    background: #e17055;
    border-color: #e17055;
}

/* Floating action bar */
.tp-attachment-floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: #fff;
    padding: 15px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 9999;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
    text-align: center;
}

.tp-attachment-floating-bar .btn-success {
    background-color: #35dcbd;
}

.tp-attachment-floating-bar .btn-warning {
    color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}
.tp-attachment-floating-bar button{
  margin: 5px;
}
.tp-attachment-floating-bar #tp-cancel-btn {
     color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}

#tp-attachment-count {
    font-size: 16px;
    font-weight: bold;
    color: #d12477;
    margin-right: 10px;
}

/* Preview panel (modal-like overlay) */
.tp-preview-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 10001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    min-width: 500px;
}

/* Dark backdrop behind preview panel */
.tp-preview-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

.tp-preview-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.tp-preview-panel__header h4 {
    margin: 0;
    font-size: 18px;
}

.tp-preview-panel__close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.tp-preview-panel__close:hover {
    color: #e74c3c;
}

.tp-preview-panel__body {
    padding: 20px;
    overflow-y: auto;
    max-height: 60vh;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tp-preview-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    width: 280px;
    position: relative;
}

.tp-preview-item__image {
    max-height: 200px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tp-preview-item__image img {
    width: 100%;
    height: auto;
}

.tp-preview-item__filename {
    font-size: 11px;
    color: #666;
    word-break: break-word;
    padding-right: 30px;
}

.tp-preview-item__remove {
    position: absolute;
    top: 5px;
    right: 5px;
}

.tp-preview-panel__footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .tp-attachment-floating-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    
    #tp-attachment-count {
        width: 100%;
        text-align: center;
    }
    
    .tp-preview-panel {
        min-width: auto;
        width: 95vw;
    }
    
    .tp-preview-item {
        width: 100%;
    }
    
    /* Stack compose toolbar vertically */
    .compose-panel__toolbar {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Attachment buttons row */
    .compose-panel__attachment {
        width: 100%;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    /* Make attach buttons larger and tappable */
    .compose-panel__attach-btn,
    .compose-panel__attach-tp-btn,
    .compose-panel__template-select {
        flex: 1;
        min-width: 120px;
        padding: 12px 10px;
        font-size: 14px;
        text-align: center;
    }
    
    /* Full width send button */
    .compose-panel__send-btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }
    
    /* Stack form rows vertically on narrow screens */
    .compose-panel__row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .compose-panel__label {
        margin-bottom: 5px;
        width: 100%;
    }
    
    .compose-panel__recipient,
    .compose-panel__input,
    .compose-panel__select {
        width: 100%;
    }
    
    /* Treatment plan attachment floating bar */
    .tp-attachment-floating-bar .btn {
        flex: 1;
        min-width: 80px;
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
    .compose-panel__attach-btn,
    .compose-panel__attach-tp-btn,
    .compose-panel__template-select {
        min-width: 100%;
    }
}

/* ===========================================
   Manage Domains Page
   =========================================== */
#manage-domains-page {
    padding-top: 20px;
    padding-bottom: 40px;
}

#manage-domains-page h2 {
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.manage-domains-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.manage-domains-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.manage-domains-form .form-group {
    margin-bottom: 15px;
}

.manage-domains-form label {
    font-weight: 500;
    margin-bottom: 5px;
}

.manage-domains-service-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.manage-domains-service-wrapper select {
    flex: 1;
}

.manage-domains-add-service-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 20px;
    margin: 20px 0;
}

.manage-domains-add-service-panel h4 {
    margin-top: 0;
    color: #856404;
}

/* Embed Code Styles */
.manage-domains-embed-code {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

.manage-domains-embed-code pre {
    margin: 0;
    padding: 10px;
    background: #2d2d2d;
    color: #f8f8f2;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.manage-domains-embed-code .embed-service,
.manage-domains-embed-code .embed-location {
    color: #66d9ef;
    font-weight: bold;
}

.manage-domains-embed-code .btn-copy-embed {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Colorpicker addon styling */
.manage-domains-form .colorpicker-component .input-group-addon {
    cursor: pointer;
}

.manage-domains-form .colorpicker-component .input-group-addon i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    border-radius: 2px;
    border: 1px solid #ccc;
}

/* Manage Domains - Add Service Panel */
.manage-domains-panel-hint {
    color: #856404;
    margin-bottom: 15px;
    font-size: 13px;
}

.manage-domains-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0c36a;
}

.manage-domains-status-msg {
    margin-left: 15px;
    font-weight: 500;
}

.manage-domains-status-msg.text-danger {
    color: #dc3545;
}

.manage-domains-status-msg.text-success {
    color: #28a745;
}

#add-service-panel small {
    display: block;
    margin-top: 3px;
}

/* Manage Domains - Service Areas Display */
.manage-domains-areas-info {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.manage-domains-areas-label {
    font-weight: 500;
    color: #004085;
}

.manage-domains-areas-list {
    color: #0056b3;
    font-family: monospace;
    font-size: 12px;
}

/* Areas with Icons Display */
.manage-domains-areas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.manage-domains-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
}

.manage-domains-area-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.manage-domains-icon-preview {
    margin-top: 5px;
}

.manage-domains-icon-preview img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    background: #fff;
}

.manage-domains-add-area-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.manage-domains-add-area-panel small {
    display: block;
    margin-top: 3px;
}

.manage-domains-area-actions {
    padding-top: 25px;
}

/* Manage Domains - Form Validation */
#manage-domains-page .has-error input,
#manage-domains-page .has-error select,
#manage-domains-page .has-error textarea {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.manage-domains-field-error {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* Color Preview */
.manage-domains-color-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;
}

/* Primary domain checkbox */
.manage-domains-primary-label {
    font-weight: normal;
    cursor: pointer;
}

.manage-domains-primary-label input[type="checkbox"] {
    margin-right: 5px;
}

.manage-domains-help-block {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Multi-location selector (edit mode) */
.manage-domains-location-selector {
    background: #f0f7ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.manage-domains-location-selector .alert {
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.manage-domains-location-selector label {
    font-weight: 600;
    color: #004085;
}

.manage-domains-location-selector select {
    font-weight: 500;
}

/* Required field indicator */
#manage-domains-page label[for="domain"]:after,
#manage-domains-page label[for="source"]:after,
#manage-domains-page label[for="service"]:after,
#manage-domains-page label[for="country"]:after,
#manage-domains-page label[for="location"]:after,
#manage-domains-page label[for="phone"]:after,
#manage-domains-page label[for="color"]:after,
#manage-domains-page label[for="logo"]:after {
    content: " *";
    color: #dc3545;
}

/* Form submit button area */
#manage-domains-page .manage-domains-form .form-group:last-child {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

/* Spinning animation for loading states */
.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Email Signature Generator */
.signature-preview-box {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    min-height: 200px;
    margin-bottom: 15px;
}

.signature-preview-box table {
    font-family: verdana, tahoma, sans-serif !important;
}

.signature-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

#signature-copy-status {
    font-size: 13px;
}

.signature-info-box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 13px;
}

.signature-info-box p {
    margin: 0 0 5px 0;
    word-break: break-all;
}

.signature-info-box p:last-of-type {
    margin-bottom: 0;
}

/* ==========================================
   Manage Domains - Service Creation Panel
   ========================================== */

.manage-domains-logo-preview {
    min-height: 30px;
    padding: 5px;
    border-radius: 4px;
    margin-top: 5px;
}

.manage-domains-logo-preview-dark {
    background: #333;
}

.manage-domains-areas-list-sortable {
    margin-bottom: 15px;
}

.manage-domains-area-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
}

.manage-domains-area-drag-handle {
    cursor: move;
    margin-right: 10px;
    color: #999;
}

.manage-domains-area-icon {
    height: 24px;
    margin-right: 8px;
}

.manage-domains-area-item:hover {
    background: #f5f5f5;
}

.manage-domains-add-area-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.manage-domains-add-area-row input[type="text"] {
    width: 180px;
}

.manage-domains-add-area-row input[type="file"] {
    width: 200px;
}

#service-create-status {
    margin-top: 15px;
}

#service-create-status .alert {
    margin-bottom: 0;
}

/* Manage Domains - Image Upload with Preview */
.manage-domains-image-upload-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.manage-domains-image-preview-box {
    width: 120px;
    height: 80px;
    border: 2px dashed #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.manage-domains-image-preview-box.manage-domains-image-preview-wide {
    width: 200px;
    height: 100px;
}

.manage-domains-image-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.manage-domains-image-preview-box .manage-domains-no-image {
    color: #999;
    font-size: 11px;
    text-align: center;
    padding: 5px;
}

.manage-domains-image-preview-box .manage-domains-image-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 2px;
}

.manage-domains-image-upload-controls {
    flex: 1;
}

.manage-domains-image-upload-controls input[type="file"] {
    margin-bottom: 5px;
}

/* Preview update when new file selected */
.manage-domains-image-preview-box.has-new {
    border-color: #5cb85c;
    border-style: solid;
}

.manage-domains-image-preview-box.has-new .manage-domains-image-preview-label {
    background: #5cb85c;
}

/* =========================================
   Logo/Signature Picker Gallery
   ========================================= */

.manage-domains-logo-picker {
    margin-bottom: 10px;
}

.manage-domains-picker-label {
    font-weight: normal;
    cursor: pointer;
}

.manage-domains-picker-label input[type="checkbox"] {
    margin-right: 5px;
}

.manage-domains-logo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.manage-domains-gallery-item {
    width: 80px;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
}

.manage-domains-gallery-item:hover {
    background: #fff;
    border-color: #ccc;
}

.manage-domains-gallery-item.selected {
    background: #e3f2fd;
    border-color: #2196F3;
}

.manage-domains-gallery-item img {
    max-width: 70px;
    max-height: 50px;
    object-fit: contain;
}

.manage-domains-gallery-label {
    display: block;
    font-size: 10px;
    color: #666;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   Manage Domains - Embed Codes Section
   ========================================= */

#embed-location-indicator {
    margin-left: 10px;
    font-size: 12px;
}

#embed-location-indicator .label {
    font-weight: normal;
    padding: 3px 8px;
}

.embed-code-field {
    font-family: Monaco, Consolas, 'Courier New', monospace;
    font-size: 12px;
    background-color: #f8f9fa;
    color: #333;
    resize: none;
}

.copy-embed-btn {
    margin-left: 10px;
    font-size: 11px;
}

.embed-code-info {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 12px;
}

.embed-code-info ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

.embed-code-info code {
    padding: 2px 4px;
    font-size: 11px;
}


/* =========================================
   Manage Domains - List View
   ========================================= */

.manage-domains-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.manage-domains-header h2 {
    margin: 0;
}

.manage-domains-list-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.manage-domains-table {
    margin-bottom: 0;
}

.manage-domains-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.manage-domains-table tbody tr:hover {
    background-color: #f5f5f5;
}

.manage-domains-table code {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Automation toggle button */
.manage-domains-table .automation-toggle {
    min-width: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.manage-domains-table .automation-toggle:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Bulk event name panel */
.mdl-bulk-panel {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.mdl-bulk-panel h4 {
    margin: 0;
}

.mdl-bulk-toggle {
    color: #333;
    text-decoration: none;
}

.mdl-bulk-toggle:hover,
.mdl-bulk-toggle:focus {
    color: #333;
    text-decoration: none;
}

.mdl-bulk-toggle .glyphicon-tags {
    margin-right: 5px;
    color: #666;
}

.mdl-bulk-chevron {
    font-size: 11px;
    margin-left: 8px;
    transition: transform 0.2s;
}

.mdl-bulk-chevron--open {
    transform: rotate(180deg);
}

.mdl-bulk-body {
    display: none;
    margin-top: 15px;
}

.mdl-bulk-table {
    margin-bottom: 0;
}

.mdl-bulk-table thead th {
    border-top: none;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
}

.mdl-bulk-row td {
    vertical-align: middle;
}

.mdl-bulk-input {
    max-width: 300px;
}

.mdl-bulk-success {
    background-color: #d4edda;
    transition: background-color 0.3s;
}

.manage-domains-breadcrumb {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.manage-domains-breadcrumb-title {
    margin: 0;
    display: inline-block;
}

/* Lead source label below logo in row-lead.php */
.lead-source-label {
    text-align: left;
    word-break: break-all;
    font-weight: bold;
    font-size: 15px;
    margin-top: 3px;
}

/* Leads dashboard – day group box */
.leads-day-group {
    background: #f8f9fa;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 18px 24px 14px;
    margin-top: 28px;
    margin-bottom: 16px;
}
.leads-day-group__title {
    font-size: 22px;
    font-weight: 800;
    color: #222;
    margin-bottom: 14px;
    text-align: center;
}
.leads-day-group__total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0 6px;
    margin-right: 6px;
    vertical-align: middle;
}
.leads-day-group__circles {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}
.leads-day-group__circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}
.leads-day-group__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.leads-day-group__circle-label {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-align: center;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .leads-day-group {
        padding: 10px 8px 8px;
    }
    .leads-day-group__title {
        font-size: 18px;
    }
    .leads-day-group__circle {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .leads-day-group__circle-label {
        font-size: 8px;
    }
}

/* Leads dashboard – day group nav shortcuts */
.leads-day-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: -10px;
}
.leads-day-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.leads-day-nav__link:hover {
    background: #f0f0f0;
    border-color: #bbb;
    color: #222;
    text-decoration: none;
}

/* Leads dashboard – pagination */
.leads-pagination {
    text-align: center;
    padding: 24px 0 10px;
}
.leads-pagination a,
.leads-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    margin: 0 3px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
}
.leads-pagination a {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.leads-pagination a:hover {
    background: #f0f0f0;
    border-color: #bbb;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    text-decoration: none;
    color: #000;
}
.leads-pagination .leads-pagination__current {
    background: #c83fce;
    color: #fff;
    border: 1px solid #c83fce;
    box-shadow: 0 2px 8px rgba(200,63,206,.3);
}
.leads-pagination .leads-pagination__top {
    background: #222;
    color: #fff;
    border: 1px solid #222;
    margin-right: 10px;
}
.leads-pagination .leads-pagination__top:hover {
    background: #444;
    border-color: #444;
    color: #fff;
}
.leads-pagination .leads-pagination__disabled {
    opacity: .35;
    pointer-events: none;
    background: #f5f5f5;
    color: #999;
    border: 1px solid #e3e3e3;
    box-shadow: none;
}

/* Filter bar (above lead list) */
.lt-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.lt-filter-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
}
.lt-filter-bar__back:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    text-decoration: none;
}
.lt-filter-bar__title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Patient Currency Badge & Form */
.patient-currency-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    background: #f0f0f0;
    color: #555;
    margin-left: 10px;
    vertical-align: middle;
}
.patient-currency-form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.patient-currency-form select {
    width: 100px;
    height: 26px;
    padding: 2px 5px;
    font-size: 12px;
}

/* T-098: Patient search results */
#patient-search-results,
#menu-search-results {
    margin-top: 10px;
    text-align: left;
}
.patient-search-row {
    display: block;
    background: #3f4474;
    color: #fff;
    border: 1px solid #ddd8d8;
    border-radius: 25px;
    padding: 12px 20px;
    margin-bottom: 4px;
    text-decoration: none;
}
.patient-search-row:hover,
.patient-search-row:focus {
    background: #2d3260;
    color: #fff;
    text-decoration: none;
}
.patient-search-name {
    font-weight: 600;
    font-size: 15px;
}
.patient-search-detail {
    font-size: 13px;
    opacity: 0.85;
}
.patient-search-label-lead {
    display: inline-block;
    background: #e67e22;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.patient-search-no-results {
    padding: 20px 15px;
    color: #888;
    text-align: center;
    font-size: 15px;
    background: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 12px;
}


/* Leads wrapper */
.leads-matrix-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f4f4f6;
}
.leads-matrix-wrapper h3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Lead list heading badges (used in lead list section) */
.status-tile {
    display: inline-block;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    color: #fff !important;
}
.status-no-attempts { background: #ef4444; }
.status-not-called  { background: #fb923c; }
.status-first-attempt { background: #38bdf8; }
.status-callback { background: #fbc024; color: #000 !important; }
.status-connected { background: #35d399; }
.status-booked { background: #22c55f; }
.status-zero { opacity: .35; }

/* =============================================
   LEAD TRACKER CARD DASHBOARD (T-109)
   ============================================= */

/* Urgency Banner */
.lt-banner {
    background: #ef4444;
    color: #fff;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0 -15px 20px;
    border-radius: 0;
}
.lt-banner__dot {
    width: 10px;
    height: 10px;
    background: #ffc107;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    flex-shrink: 0;
    animation: lt-dot-pulse 1.5s ease-in-out infinite;
}
.lt-banner--empty .lt-banner__dot {
    animation: none;
}
@keyframes lt-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}
.lt-banner__chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    flex-shrink: 0;
    transition: transform .2s;
}
.lt-banner--open .lt-banner__chevron {
    transform: rotate(180deg);
}

/* Header Row */
.lt-header {
    text-align: center;
    margin: 20px 0 16px;
}
.lt-header__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

/* Per-service leads page (/admin/lead_by_service) service switcher */
.lbs-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
}
.lbs-switch__label {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.lbs-switch select {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 28px 8px 12px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: auto;
}
.lbs-switch__all {
    margin-left: auto;
    font-size: 13px;
    color: #666;
    text-decoration: none;
}
.lbs-switch__all:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

/* Red List (/admin/red_list) mode switcher */
.redlist-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 6px;
    flex-wrap: wrap;
}
.redlist-switch__title {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.redlist-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 2px solid #dc2626;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    background: #fff;
    text-decoration: none;
}
.redlist-switch__btn:hover,
.redlist-switch__btn:focus {
    background: #fef2f2;
    color: #dc2626;
    text-decoration: none;
}
.redlist-switch__btn--active,
.redlist-switch__btn--active:hover,
.redlist-switch__btn--active:focus {
    background: #dc2626;
    color: #fff;
}
.redlist-switch__count {
    background: rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 1px 9px;
    font-size: 12px;
}
.redlist-desc {
    color: #666;
    font-size: 13px;
    margin: 0 0 14px;
}
.redlist-empty {
    color: #888;
    text-align: center;
    padding: 30px 0;
}
.btn-redlist,
.btn-redlist:hover,
.btn-redlist:focus {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

/* Location + Time Pills Row */
.lt-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.lt-search-row__location {
    flex: 1;
    min-width: 0;
}
.lt-search-row__location select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 28px 10px 12px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: auto;
}
.lt-time-pills {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    background: #e8e8e8;
    border-radius: 12px;
    padding: 4px;
}
.lt-time-pill {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #555;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lt-time-pill:hover {
    background: rgba(0,0,0,.06);
    color: #333;
    text-decoration: none;
}
.lt-time-pill--active {
    background: #3b82f6;
    color: #fff;
}
.lt-time-pill--active:hover {
    background: #2563eb;
    color: #fff;
}

/* Summary Cards */
.lt-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.lt-summary__card {
    flex: 1;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    background: #fff;
}
.lt-summary__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 4px;
}
.lt-summary__value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
}
.lt-summary__sub {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    margin-left: 4px;
}
.lt-summary__card--danger {
    background: #ef4444;
    border-color: #ef4444;
}
.lt-summary__card--danger .lt-summary__label,
.lt-summary__card--danger .lt-summary__value,
.lt-summary__card--danger .lt-summary__sub {
    color: #fff;
}
.lt-summary__card--success {
    background: #13b981;
    border-color: #13b981;
}
.lt-summary__card--success .lt-summary__label,
.lt-summary__card--success .lt-summary__value,
.lt-summary__card--success .lt-summary__sub {
    color: #fff;
}

/* Status Filter Tabs */
.lt-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lt-tabs::-webkit-scrollbar {
    display: none;
}
.lt-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    transition: background .15s, color .15s;
}
.lt-tab:hover {
    background: #f5f5f5;
    color: #333;
}
.lt-tab--active {
    /* background: #1a1a1a; */
    /* color: #fff; */
    /* border-color: #1a1a1a; */
}
.lt-tab--active:hover {
    background: #333;
    color: #fff;
}
.lt-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,.08);
    color: inherit;
}
.lt-tab--active .lt-tab__count {
    background: rgba(255,255,255,.2);
}

/* Tab Icons (Lucide SVGs) */
.lt-tab[data-bucket]:not([data-bucket="all"])::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lt-tab[data-bucket="no_attempts"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="not_called"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="first_attempt"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v6l4 2'/><circle cx='12' cy='12' r='10'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="callback"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbc024' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="connected"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="booked"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center/contain;
}

/* No Attempts — red */
.lt-tab[data-bucket="no_attempts"] { color: #ef4444; border-color: #fca5a5; }
.lt-tab[data-bucket="no_attempts"] .lt-tab__count { background: rgba(239,68,68,.1); color: #ef4444; }
.lt-tab[data-bucket="no_attempts"]:hover,
.lt-tab[data-bucket="no_attempts"].lt-tab--active { background: #fef2f2; }

/* Not Called — orange */
.lt-tab[data-bucket="not_called"] { color: #fb923c; border-color: #fdba74; }
.lt-tab[data-bucket="not_called"] .lt-tab__count { background: rgba(251,146,60,.1); color: #fb923c; }
.lt-tab[data-bucket="not_called"]:hover,
.lt-tab[data-bucket="not_called"].lt-tab--active { background: #fff7ed; }

/* 1st Attempt — sky blue */
.lt-tab[data-bucket="first_attempt"] { color: #38bdf8; border-color: #7dd3fc; }
.lt-tab[data-bucket="first_attempt"] .lt-tab__count { background: rgba(56,189,248,.1); color: #38bdf8; }
.lt-tab[data-bucket="first_attempt"]:hover,
.lt-tab[data-bucket="first_attempt"].lt-tab--active { background: #f0f9ff; }

/* Callback — yellow */
.lt-tab[data-bucket="callback"] { color: #fbc024; border-color: #fde68a; }
.lt-tab[data-bucket="callback"] .lt-tab__count { background: rgba(251,192,36,.15); color: #d4a017; }
.lt-tab[data-bucket="callback"]:hover,
.lt-tab[data-bucket="callback"].lt-tab--active { background: #fefce8; }

/* Connected — emerald */
.lt-tab[data-bucket="connected"] { color: #35d399; border-color: #a7f3d0; }
.lt-tab[data-bucket="connected"] .lt-tab__count { background: rgba(53,211,153,.1); color: #35d399; }
.lt-tab[data-bucket="connected"]:hover,
.lt-tab[data-bucket="connected"].lt-tab--active { background: #ecfdf5; }

/* Booked — green */
.lt-tab[data-bucket="booked"] { color: #22c55f; border-color: #86efac; }
.lt-tab[data-bucket="booked"] .lt-tab__count { background: rgba(34,197,95,.1); color: #22c55f; }
.lt-tab[data-bucket="booked"]:hover,
.lt-tab[data-bucket="booked"].lt-tab--active { background: #f0fdf4; }

/* Service Cards */
.lt-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 14px;
    transition: box-shadow .15s;
}
.lt-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.lt-card--hidden {
    display: none;
}
/* Red left border for cards with uncalled leads */
.lt-card[data-no-attempts]:not([data-no-attempts="0"]),
.lt-card[data-not-called]:not([data-not-called="0"]) {
    border-left: 3px solid #e74c3c;
}
.lt-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.lt-card__name {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1a1a1a;
    letter-spacing: 0.3px;
}
.lt-card__total {
    font-size: 13px;
    color: #888;
}

/* Badges */
.lt-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
}
.lt-badge--red {
    background: #ef4444;
    color: #fff;
}
.lt-badge--green {
    background: #e2eeeb;
    color: #089669;
}
.lt-badge--muted {
    background: #e5e5e5;
    color: #888;
}

/* Progress Bar */
.lt-card__bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #f0f0f0;
}
.lt-bar-seg {
    height: 100%;
    transition: width .3s;
}
.lt-bar-seg--no-attempts   { background: #ef4444; }
.lt-bar-seg--not-called    { background: #fb923c; }
.lt-bar-seg--first-attempt { background: #38bdf8; }
.lt-bar-seg--callback      { background: #fbc024; }
.lt-bar-seg--connected     { background: #35d399; }
.lt-bar-seg--booked        { background: #22c55f; }

/* Status Row */
.lt-card__statuses {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lt-card__statuses::-webkit-scrollbar {
    display: none;
}
.lt-stat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    background: #f5f5f5;
    transition: background .15s;
}
.lt-stat:hover {
    background: #eaeaea;
    text-decoration: none;
    color: #333;
}
.lt-stat__count {
    font-weight: 800;
    font-size: 14px;
    color: #1a1a1a;
}
.lt-stat__arrow {
    color: #ccc;
    font-size: 14px;
}
.lt-stat--zero {
    opacity: .45;
    background: #f0f0f0;
}
.lt-stat--zero .lt-stat__count {
    color: #aaa;
}

/* No Attempts — red */
.lt-stat--no-attempts:not(.lt-stat--zero) { background: #fef2f2; color: #ef4444; }
.lt-stat--no-attempts:not(.lt-stat--zero) .lt-stat__count { color: #ef4444; }
.lt-stat--no-attempts:not(.lt-stat--zero) .lt-stat__arrow { color: #fca5a5; }

/* Not Called — orange */
.lt-stat--not-called:not(.lt-stat--zero) { background: #fff7ed; color: #fb923c; }
.lt-stat--not-called:not(.lt-stat--zero) .lt-stat__count { color: #fb923c; }
.lt-stat--not-called:not(.lt-stat--zero) .lt-stat__arrow { color: #fdba74; }

/* 1st Attempt — sky blue */
.lt-stat--first-attempt:not(.lt-stat--zero) { background: #f0f9ff; color: #38bdf8; }
.lt-stat--first-attempt:not(.lt-stat--zero) .lt-stat__count { color: #38bdf8; }
.lt-stat--first-attempt:not(.lt-stat--zero) .lt-stat__arrow { color: #7dd3fc; }

/* Callback — yellow */
.lt-stat--callback:not(.lt-stat--zero) { background: #fefce8; color: #d4a017; }
.lt-stat--callback:not(.lt-stat--zero) .lt-stat__count { color: #d4a017; }
.lt-stat--callback:not(.lt-stat--zero) .lt-stat__arrow { color: #fde68a; }

/* Connected — emerald */
.lt-stat--connected:not(.lt-stat--zero) { background: #ecfdf5; color: #35d399; }
.lt-stat--connected:not(.lt-stat--zero) .lt-stat__count { color: #35d399; }
.lt-stat--connected:not(.lt-stat--zero) .lt-stat__arrow { color: #a7f3d0; }

/* Booked — green */
.lt-stat--booked:not(.lt-stat--zero) { background: #f0fdf4; color: #22c55f; }
.lt-stat--booked:not(.lt-stat--zero) .lt-stat__count { color: #22c55f; }
.lt-stat--booked:not(.lt-stat--zero) .lt-stat__arrow { color: #86efac; }

/* Filter Chips (T-110) */
.lt-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}
.lt-filter-chips:empty {
    display: none;
}
.lt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 6px 8px 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.lt-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e9ecef;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: #666;
    padding: 0;
    flex-shrink: 0;
}
.lt-chip__remove:hover {
    background: #dc3545;
    color: #fff;
}

/* AJAX loading transition */
#lt-leads-container {
    transition: opacity .15s ease;
}

/* Banner empty state (0 leads needing action) */
.lt-banner--empty {
    background: #6c757d;
}
.lt-banner--empty .lt-banner__dot {
    background: #adb5bd;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .lt-banner {
        margin: 0 -15px 20px;
        font-size: 13px;
        padding: 8px 12px;
    }
    .lt-header__title {
        font-size: 20px;
    }
    .lt-search-row {
        gap: 8px;
    }

    /* Issue 4: Summary cards — slightly smaller values */
    .lt-summary {
        flex-direction: row;
        gap: 8px;
    }
    .lt-summary__card {
        padding: 12px;
    }
    .lt-summary__value {
        font-size: 22px;
    }
    .lt-summary__sub {
        font-size: 12px;
    }

    .lt-tabs {
        gap: 6px;
    }

    /* Issue 2: Card header — badges on same line as name */
    .lt-card {
        padding: 14px;
    }
    .lt-card__name {
        flex: 1 1 0;
        min-width: 0;
        font-size: 14px;
    }
    .lt-card__total {
        order: 1;
        width: 100%;
        font-size: 11px;
    }
    .lt-badge {
        margin-left: 0;
        font-size: 11px;
        padding: 3px 8px;
    }

    /* Status breakdown — horizontal scroll */
    .lt-stat {
        padding: 8px 12px;
    }

    /* Filter bar mobile */
    .lt-filter-bar {
        padding: 10px 12px;
        gap: 6px;
    }
    .lt-filter-bar__title {
        font-size: 14px;
    }
    .lt-search-row__location select {
        padding: 8px 28px 8px 10px;
        font-size: 13px;
    }
}

/* ===== Location Availability Manager (T-119) ===== */

.avail-title {
    margin: 0 0 4px;
    font-weight: 600;
}
.avail-subtitle {
    color: #666;
    margin: 0 0 20px;
    font-size: 14px;
}
.avail-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.avail-nav__month {
    font-size: 18px;
    font-weight: 600;
    min-width: 160px;
    text-align: center;
}
.avail-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .avail-year-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .avail-year-grid { grid-template-columns: 1fr; }
}
.avail-month-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}
.avail-month-card__title {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 6px;
    color: #1f2937;
}
.avail-calendar__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    color: #999;
    margin-bottom: 2px;
}
.avail-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.avail-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    transition: all 0.15s;
}
.avail-day:hover:not(.avail-day--empty):not(.avail-day--past) {
    border-color: #22c55f;
    background: #f0fdf4;
}
.avail-day--available {
    background: #22c55f;
    color: #fff;
    border-color: #16a34a;
}
.avail-day--available:hover {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.avail-day--closed {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
}
.avail-day--closed:hover {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}
.avail-day--empty {
    border: none;
    background: transparent;
    cursor: default;
}
.avail-day--past {
    opacity: 0.35;
    cursor: not-allowed;
}
.avail-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.avail-actions--top {
    margin-top: 0;
    margin-bottom: 16px;
}
.avail-status {
    font-size: 14px;
    font-weight: 500;
}
.avail-loc-switcher {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* Blacklist mode: hover shows red to indicate "mark as closed" */
.avail-year-grid[data-mode="blacklist"] .avail-day:hover:not(.avail-day--empty):not(.avail-day--past):not(.avail-day--closed) {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Calendar closed banner */
.avail-closed-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    color: #991b1b;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* =============================================
   Calendar Overview  (.co-)
   ============================================= */

.co-page {
    background: #f8fafc;
    min-height: 100vh;
    padding-bottom: 40px;
}
.co-header .container{
  background:none;
}
.co-header {
    background: linear-gradient(135deg, #337ab7 0%, #2a6496 100%);
    color: #fff;
    padding: 20px 0;
}

.co-header__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
}

.co-nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.co-nav__controls {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.co-nav__controls .btn,
.co-nav__select {
    height: 36px;
    line-height: 34px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #fff;
    color: #374151;
}
.co-nav__controls .btn-primary {
    background: #337ab7;
    border-color: #337ab7;
    color: #fff;
}
.co-nav__select {
    cursor: pointer;
}

.co-content {
    padding-top: 8px;
}

/* --- Summary Bar --- */

.co-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.co-summary__item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.co-summary__num {
    font-size: 28px;
    font-weight: 700;
    color: #337ab7;
}

.co-summary__item--consult .co-summary__num {
    color: #ea580c;
}

.co-summary__item--session .co-summary__num {
    color: #16a34a;
}

.co-summary__item--selfbooked .co-summary__num {
    color: #7c3aed;
}

.co-summary__label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* --- Month Grid --- */

.co-grid {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.co-grid__head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.co-grid__dow {
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.05em;
}

.co-grid__body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.co-cell {
    min-height: 110px;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px;
    position: relative;
    transition: background 0.15s;
}

.co-cell:nth-child(7n) {
    border-right: none;
}

.co-cell--empty {
    background: #fafbfc;
}

.co-cell--has-appts {
    cursor: pointer;
}

.co-cell--has-appts:hover {
    background: #f0f7ff;
}

.co-cell--active {
    background: #e8f2ff;
    box-shadow: inset 0 0 0 2px #337ab7;
}

.co-cell--past {
    opacity: 0.4;
}
.co-cell--today {
    background: #dbeafe;
}
.co-cell--today .co-cell__num {
    color: #337ab7;
    font-weight: 700;
}

.co-cell__num {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.co-cell__badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.co-cell__count {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #337ab7;
    background: #e8f2ff;
    padding: 3px 10px;
    border-radius: 10px;
}

.co-cell__count--consult {
    color: #c2410c;
    background: #fff7ed;
}

.co-cell__count--selfbooked {
    color: #7c3aed;
    background: #f3f0ff;
}

.co-cell--active .co-cell__count {
    background: #337ab7;
    color: #fff;
}

.co-cell--active .co-cell__count--consult {
    background: #ea580c;
    color: #fff;
}

.co-cell--active .co-cell__count--selfbooked {
    background: #7c3aed;
    color: #fff;
}

/* --- Expanded Day Detail Panel --- */

.co-detail {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.co-detail__header {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.co-detail__title {
    font-weight: 600;
    font-size: 18px;
    color: #1e293b;
}

.co-detail__count {
    font-size: 14px;
    color: #64748b;
    background: #e2e8f0;
    padding: 4px 12px;
    border-radius: 12px;
}

.co-detail__close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.co-detail__close:hover {
    color: #475569;
}

.co-detail__body {
    padding: 0;
}

/* --- Appointment Table (shared by detail panel) --- */

.co-appt-table {
    width: 100%;
    border-collapse: collapse;
}

.co-appt-table__th {
    padding: 12px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.co-appt-table__th--time { width: 110px; }
.co-appt-table__th--patient { width: 240px; }
.co-appt-table__th--balance { width: 130px; text-align: right; }

.co-appt-row {
    border-bottom: 1px solid #f1f5f9;
}

.co-appt-row--consult {
    background: #fff7ed;
    border-left: 3px solid #ea580c;
}

.co-appt-row:last-child {
    border-bottom: none;
}

.co-appt-row:hover {
    background: #f8fafc;
}

.co-appt-row--consult:hover {
    background: #ffedd5;
}

.co-appt-row--selfbooked {
    background: #f5f3ff;
    border-left: 3px solid #7c3aed;
}

.co-appt-row--selfbooked:hover {
    background: #ede9fe;
}

.co-sb-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #7c3aed;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* Self-booked consultation confirmation status — appears below the SB badge */
.co-confirm-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 3px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}
.co-confirm-badge--yes {
    background: #16a34a; /* green */
}
.co-confirm-badge--no {
    background: #dc2626; /* red */
}

.co-appt-row td {
    padding: 14px 20px;
    font-size: 15px;
    color: #374151;
    vertical-align: middle;
}

.co-appt-row__time {
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.co-appt-row__link {
    color: #337ab7;
    font-weight: 500;
    text-decoration: none;
}

.co-appt-row__link:hover {
    text-decoration: underline;
    color: #2a6496;
}

.co-appt-row__balance {
    text-align: right;
}

.co-balance--owed {
    color: #dc2626;
    font-weight: 600;
}

.co-balance--clear {
    color: #16a34a;
    font-weight: 500;
}

.co-balance--unknown {
    color: #9ca3af;
}

/* --- Mobile --- */

@media (max-width: 767px) {
    .co-page { padding-bottom: 20px; }
    .co-header { padding: 14px 0; }
    .co-header__title { font-size: 18px; margin: 0; }

    /* Nav: Prev/Next on edges, selects fill middle */
    .co-nav { padding: 8px 0; margin-bottom: 12px; }
    .co-nav__controls {
        gap: 6px;
        flex-wrap: wrap;
    }
    .co-nav__select {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        padding: 6px 4px;
    }

    /* Summary cards: equal width row */
    .co-summary { gap: 8px; margin-bottom: 12px; }
    .co-summary__item {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        gap: 5px;
        justify-content: center;
    }
    .co-summary__num { font-size: 22px; }
    .co-summary__label { font-size: 11px; }

    /* Grid cells: compact but readable */
    .co-cell {
        min-height: 70px;
        padding: 6px 4px;
    }
    .co-cell__num {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .co-cell__badges { gap: 3px; }
    .co-cell__count {
        font-size: 11px;
        padding: 2px 6px;
    }
    .co-grid__dow {
        font-size: 11px;
        padding: 8px 0;
        letter-spacing: 0;
    }

    /* Detail panel */
    .co-detail { margin-top: 12px; }
    .co-detail__header { padding: 10px 14px; }
    .co-detail__title { font-size: 15px; }
    .co-appt-table thead { display: none; }
    .co-appt-table, .co-appt-table tbody, .co-appt-row, .co-appt-row td {
        display: block;
        width: 100%;
    }
    .co-appt-row {
        padding: 10px 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    .co-appt-row td {
        padding: 2px 0;
        text-align: left;
    }
    .co-appt-row__balance { text-align: left; }
    .co-content { padding-top: 0; }
}

/* ==========================================
   WhatsApp Chat Interface (.wci-)
   /whatsapp page — WhatsApp Web-style layout
   ========================================== */

/* Container wrapper */
.wci-container {
    padding-left: 0;
    padding-right: 0;
}

/* Page layout */
.wci-page {
    display: flex;
    height: 100vh;
    height: 100dvh;
    background: #e5ddd5;
    overflow: hidden;
    border-left: 1px solid #d1d7db;
    border-right: 1px solid #d1d7db;
}

/* ---- SIDEBAR ---- */
.wci-sidebar {
    width: 350px;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border-right: 1px solid #d1d7db;
}
.wci-sidebar__header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #075e54;
    color: #fff;
    min-height: 50px;
}
.wci-sidebar__back {
    color: #fff;
    text-decoration: none;
    margin-right: 12px;
    display: flex;
    align-items: center;
    opacity: 0.85;
}
.wci-sidebar__back:hover { opacity: 1; color: #fff; }
.wci-sidebar__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.wci-sidebar__search {
    padding: 8px 10px;
    background: #f0f2f5;
    border-bottom: 1px solid #e9edef;
}
.wci-search-input {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.wci-search-input:focus {
    box-shadow: 0 0 0 2px rgba(7, 94, 84, 0.2);
}

/* Contact list */
.wci-contact-list {
    flex: 1;
    overflow-y: auto;
}
.wci-contact-list__loading,
.wci-contact-list__empty {
    padding: 24px 16px;
    text-align: center;
    color: #8696a0;
    font-size: 14px;
}

/* Single contact row */
.wci-contact {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}
.wci-contact:hover {
    background: #f5f6f6;
}
.wci-contact--active {
    background: #e9edef;
}
.wci-contact__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #dfe5e7;
    color: #8696a0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 12px;
    text-transform: uppercase;
}
.wci-contact__info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.wci-contact__name {
    font-size: 15px;
    font-weight: 500;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wci-contact__preview {
    font-size: 13px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.wci-contact__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 8px;
    flex-shrink: 0;
}
.wci-contact__time {
    font-size: 12px;
    color: #8696a0;
    white-space: nowrap;
}
.wci-contact--unread .wci-contact__time {
    color: #25d366;
}
.wci-contact__badge {
    background: #25d366;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-top: 4px;
}

/* ---- CHAT AREA ---- */
.wci-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}
.wci-chat__header {
    display: none;
    align-items: center;
    padding: 10px 16px;
    background: #075e54;
    color: #fff;
    min-height: 50px;
    gap: 12px;
}
.wci-chat__header--visible {
    display: flex;
}
.wci-chat__back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-radius: 4px;
    flex-shrink: 0;
    margin-right: 4px;
}
.wci-chat__back:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
}
.wci-chat__header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    color: #fff;
}
.wci-chat__header-info {
    flex: 1;
    min-width: 0;
}
.wci-chat__header-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wci-chat__header-phone {
    font-size: 12px;
    opacity: 0.8;
}
.wci-chat__header-link {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    transition: all 0.15s;
}
.wci-chat__header-link:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
}

/* Empty state */
.wci-chat__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    color: #8696a0;
    gap: 12px;
}
.wci-chat__empty-title {
    font-size: 28px;
    color: #41525d;
    font-weight: 300;
}
.wci-chat__empty-text {
    font-size: 14px;
}

/* Messages area */
.wci-messages {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 48px;
    background: #e5ddd5;
    flex-direction: column;
}
.wci-messages--visible {
    display: flex;
}
.wci-messages__empty {
    text-align: center;
    color: #8696a0;
    padding: 32px 0;
    font-size: 14px;
}

/* Date separators */
.wci-date-sep {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}
.wci-date-sep__text {
    background: #e1f2fb;
    color: #475b70;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
    font-weight: 500;
}

/* Message bubbles */
.wci-msg {
    display: flex;
    flex-direction: column;
    margin-bottom: 3px;
    max-width: 65%;
}
.wci-msg--in { align-self: flex-start; }
.wci-msg--out { align-self: flex-end; }

.wci-bubble {
    padding: 6px 8px 4px;
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
}
.wci-bubble--in {
    background: #fff;
    border-top-left-radius: 0;
}
.wci-bubble--out {
    background: #d9fdd3;
    border-top-right-radius: 0;
}

.wci-bubble__text {
    font-size: 14px;
    line-height: 1.45;
    color: #111b21;
    white-space: pre-wrap;
    word-break: break-word;
}
.wci-bubble__text a {
    color: #027eb5;
    text-decoration: underline;
}

/* Media inside bubbles */
.wci-bubble__media {
    margin: -2px -4px 4px;
}
.wci-bubble__media img {
    max-width: 260px;
    border-radius: 6px;
    display: block;
    cursor: pointer;
}
.wci-bubble__media video {
    max-width: 260px;
    border-radius: 6px;
    display: block;
}
.wci-bubble__media audio {
    width: 240px;
    height: 36px;
}
.wci-bubble__doc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    color: #027eb5;
    text-decoration: none;
    font-size: 13px;
}
.wci-bubble__doc:hover {
    text-decoration: underline;
    color: #027eb5;
}

/* Bubble footer (timestamp + ticks) */
.wci-bubble__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.wci-bubble__time {
    font-size: 11px;
    color: #8696a0;
}
.wci-bubble--out .wci-bubble__time {
    color: #667781;
}
.wci-bubble__ticks {
    font-size: 13px;
    color: #53bdeb;
}

/* ---- INPUT AREA ---- */
.wci-input {
    display: none;
    align-items: flex-end;
    padding: 8px 10px;
    background: #f0f2f5;
    border-top: 1px solid #d1d7db;
    gap: 8px;
}
.wci-input--visible {
    display: flex;
}
.wci-input__attach-wrapper {
    position: relative;
}
.wci-input__attach {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54656f;
    transition: background 0.15s;
}
.wci-input__attach:hover {
    background: #e9edef;
}

/* Attach dropdown menu */
.wci-attach-menu {
    display: none;
    position: absolute;
    bottom: 48px;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(11,20,26,0.2);
    min-width: 160px;
    overflow: hidden;
    z-index: 10;
}
.wci-attach-menu--visible {
    display: block;
}
.wci-attach-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    padding: 10px 14px;
    font-size: 14px;
    color: #3b4a54;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.wci-attach-menu__item:hover {
    background: #f0f2f5;
}
.wci-attach-menu__item svg {
    flex-shrink: 0;
    color: #54656f;
}

/* Textarea */
.wci-input__textarea {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    max-height: 120px;
    min-height: 40px;
    background: #fff;
    color: #111b21;
    box-sizing: border-box;
}

/* Send button */
.wci-input__send {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54656f;
    transition: all 0.15s;
}
.wci-input__send:hover {
    background: #e9edef;
}
.wci-input__send:disabled {
    opacity: 0.4;
    cursor: default;
}
.wci-input__send:disabled:hover {
    background: none;
}

/* ---- CONTACT CARD PANEL (inline, not modal) ---- */
.wci-contact-panel {
    display: none;
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    width: 300px;
    z-index: 20;
    overflow: hidden;
}
.wci-contact-panel--visible {
    display: block;
}
.wci-contact-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f0f2f5;
    font-size: 14px;
    font-weight: 600;
    color: #3b4a54;
}
.wci-contact-panel__close {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #8696a0;
    line-height: 1;
}
.wci-contact-panel__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wci-contact-panel__btn {
    margin-top: 4px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .wci-page {
        height: 100vh;
        height: 100dvh;
    }
    .wci-sidebar {
        width: 260px;
        min-width: 260px;
    }
    .wci-messages {
        padding: 12px 16px;
    }
    .wci-msg {
        max-width: 80%;
    }
}
@media (max-width: 576px) {
    .wci-sidebar {
        width: 100%;
        min-width: 100%;
    }
    .wci-chat {
        display: none;
    }
    .wci-page--chat-open .wci-sidebar {
        display: none;
    }
    .wci-page--chat-open .wci-chat {
        display: flex;
    }
    .wci-chat__back {
        display: flex;
    }
}

/* ── Patient Timeline (ptl-) ─────────────────────────── */
.ptl-panel { padding: 15px 0; }

.ptl-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    align-items: center;
}
.ptl-filters .form-control { width: 180px; }

.ptl-entry {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.ptl-entry:last-child { border-bottom: none; }

.ptl-icon {
    width: 36px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 2px;
}
.ptl-icon .glyphicon { font-size: 16px; }

.ptl-body { flex: 1; min-width: 0; }

.ptl-header {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.ptl-time {
    color: #999;
    font-size: 12px;
    min-width: 80px;
    flex-shrink: 0;
}

.ptl-summary { flex: 1; font-size: 13px; }
.ptl-env-date { color: #999; font-size: 12px; font-weight: normal; }

.ptl-toggle {
    font-size: 12px;
    color: #337ab7;
    cursor: pointer;
}

.ptl-detail {
    display: none;
    margin-top: 8px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
    font-size: 12px;
}
.ptl-detail pre {
    background: #fff;
    padding: 8px;
    font-size: 11px;
    max-height: 200px;
    overflow: auto;
    margin: 5px 0;
}

.ptl-diff-table { width: 100%; border-collapse: collapse; }
.ptl-diff-table td { padding: 4px 8px; font-size: 12px; vertical-align: top; }
.ptl-diff-label { font-weight: 600; color: #666; white-space: nowrap; width: 80px; }
.ptl-diff-arrow { color: #999; text-align: center; width: 20px; }
.ptl-diff-old { color: #999; }
.ptl-diff-new { color: #999; }
.ptl-diff-old.ptl-diff-changed { color: #c9302c; text-decoration: line-through; }
.ptl-diff-new.ptl-diff-changed { color: #449d44; font-weight: 600; }

.ptl-kv-table { width: 100%; border-collapse: collapse; }
.ptl-kv-table td { padding: 4px 8px; font-size: 12px; vertical-align: top; }
.ptl-kv-label { font-weight: 600; color: #666; white-space: nowrap; width: 100px; }
.ptl-kv-value { color: #333; }

.ptl-row-added td { background: #dff0d8; color: #3c763d; font-weight: 600; }
.ptl-row-removed td { background: #f2dede; color: #a94442; text-decoration: line-through; }

.ptl-tp-arrow { text-align: center; font-size: 18px; margin: 8px 0; }
.ptl-tp-label { font-weight: 600; margin: 6px 0 4px; color: #666; }
.ptl-tp-total { margin: 6px 0; font-size: 13px; }
.ptl-tp-discount { margin: 4px 0; font-size: 13px; color: #c9302c; }

.ptl-load-more {
    display: none;
    text-align: center;
    margin-top: 15px;
}

/* Color variants */
.ptl-success .ptl-icon { color: #5cb85c; }
.ptl-danger .ptl-icon  { color: #d9534f; }
.ptl-warning .ptl-icon { color: #f0ad4e; }
.ptl-info .ptl-icon    { color: #5bc0de; }
.ptl-default .ptl-icon { color: #999; }

.ptl-danger .ptl-summary  { color: #c9302c; }
.ptl-success .ptl-summary { color: #449d44; }

/* Mobile */
@media (max-width: 576px) {
    .ptl-header { flex-direction: column; gap: 2px; }
    .ptl-time { min-width: auto; }
    .ptl-filters .form-control { width: 100%; }
    .ptl-filters { flex-wrap: wrap; }
}

/* ==========================================
   LOGS OVERVIEW (.lo-)
   ========================================== */
.lo-page { background: #f8fafc; min-height: 100vh; padding-bottom: 40px; }
.lo-header { background: linear-gradient(135deg, #337ab7 0%, #2a6496 100%); color: #fff; padding: 20px 0; }
.lo-header .container { background: none; }
.lo-title { font-size: 24px; font-weight: 700; margin: 0; }

.lo-nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.lo-nav-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lo-nav-periods { display: flex; gap: 4px; }
.lo-date-input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
}
.lo-period-label {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    margin-top: 6px;
}
.lo-content { padding-top: 8px; }
.lo-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 16px;
}

/* User card */
.lo-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.lo-card-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.lo-card-header:hover { background: #f8fafc; }
.lo-card-name { font-weight: 600; font-size: 15px; flex: 1; }
.lo-card-name .glyphicon { color: #6b7280; margin-right: 6px; }
.lo-card-badge {
    font-size: 12px;
    color: #9ca3af;
    background: #f1f5f9;
    padding: 2px 10px;
    border-radius: 12px;
}
.lo-card-chevron { color: #9ca3af; transition: transform 0.2s; }

/* Summary */
.lo-card-summary { padding: 10px 20px; border-bottom: 1px solid #f1f5f9; }
.lo-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}
.lo-stat-icon { font-size: 14px; width: 18px; text-align: center; }
.lo-stat-icon--green { color: #5cb85c; }
.lo-stat-icon--red { color: #d9534f; }
.lo-stat-icon--blue { color: #5bc0de; }
.lo-stat--danger strong { color: #c9302c; }
.lo-stat--muted { color: #9ca3af; font-style: italic; }
.lo-stat-detail { color: #6b7280; }

/* Full log */
.lo-log-list { padding: 8px 0; max-height: 600px; overflow-y: auto; }
.lo-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 20px;
    border-bottom: 1px solid #f8fafc;
    font-size: 13px;
}
.lo-log-entry:last-child { border-bottom: none; }
.lo-log-icon { font-size: 14px; width: 18px; text-align: center; margin-top: 2px; }
.lo-log-body { flex: 1; min-width: 0; }
.lo-log-time { color: #9ca3af; font-size: 11px; margin-right: 8px; white-space: nowrap; }
.lo-log-patient { font-weight: 600; margin-right: 6px; color: #337ab7; text-decoration: none; }
.lo-log-patient:hover { text-decoration: underline; }
.lo-log-summary { color: #374151; }

/* Log entry color coding */
.lo-log-entry--success .lo-log-icon { color: #5cb85c; }
.lo-log-entry--danger .lo-log-icon { color: #d9534f; }
.lo-log-entry--warning .lo-log-icon { color: #f0ad4e; }
.lo-log-entry--info .lo-log-icon { color: #5bc0de; }
.lo-log-entry--default .lo-log-icon { color: #999; }
.lo-log-entry--danger .lo-log-summary { color: #c9302c; }

/* Mobile */
@media (max-width: 576px) {
    .lo-title { font-size: 18px; }
    .lo-nav-controls { gap: 6px; }
    .lo-card-header { padding: 10px 14px; }
    .lo-card-summary { padding: 8px 14px; }
    .lo-log-entry { padding: 6px 14px; }
    .lo-log-list { max-height: 400px; }
}

/* Appointment pending badge */
.appt-pending-badge {
    padding: 5px;
    font-weight: bold;
    text-align: right;
}

/* Cancel request button (patient magic link) */
.cancel-request-form {
    padding: 3px 0;
    margin-bottom: 0;

}
.btn-cancel-request {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #fff;
    color: #d9534f;
    border: 2px solid #d9534f;
    border-radius: 6px;
    cursor: pointer;
}
.btn-cancel-request:hover {
    background: #d9534f;
    color: #fff;
}

/* ============================================================
   Outstanding Sessions Dashboard (os-*)
   ============================================================ */
.os-dashboard {
    padding: 20px;
    background: #dadadaee;
    min-height: 100vh;
}
.os-dashboard h1 {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 700;
    color: #333;
}
.os-filter-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.os-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}
.os-btn:hover {
    border-color: #59bed2;
    color: #59bed2;
    text-decoration: none;
}
.os-btn.active {
    background: #59bed2;
    color: #fff;
    border-color: #59bed2;
}
.os-location-buttons {
    margin-top: 8px;
}
.os-btn.os-btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}
.os-count {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.os-table-wrap {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}
.os-table {
    width: 100%;
    border-collapse: collapse;
}
.os-table th {
    background: #f5f5f5;
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}
.os-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}
.os-table tbody tr.os-row {
}
.os-table tbody tr.os-row:hover {
    background: #f7fdfe;
}
.os-name {
    font-weight: 600;
}
.os-amount {
    font-weight: 600;
}
.os-amount.os-outstanding {
    color: #d32f2f;
}
.os-centered {
    text-align: center;
}
.os-empty {
    text-align: center;
    padding: 30px 14px;
    color: #999;
}
.os-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
}
.os-page-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.os-page-btn:hover {
    background: #f0f0f0;
    text-decoration: none;
    color: #333;
}
.os-page-btn.active {
    background: #59bed2;
    color: #fff;
    border-color: #59bed2;
}
.os-badge-ai {
    display: inline-block;
    padding: 3px 8px;
    background: #fff3cd;
    color: #856404;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}
.os-subtitle {
    font-weight: 400;
    font-size: 16px;
    color: #888;
}
.os-patient-link {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}
.os-patient-link:hover {
    color: #4a90d9;
    text-decoration: underline;
}

/* Template panel */
.os-template-panel {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.os-template-header {
    cursor: pointer;
    user-select: none;
}
.os-template-header h3 {
    margin: 0;
    font-size: 15px;
    color: #333;
}
.os-template-toggle {
    font-size: 12px;
    margin-left: 6px;
    color: #888;
}
#templateBody.os-collapsed {
    display: none;
}
.os-template-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-top: 10px;
    box-sizing: border-box;
}
.os-template-textarea:focus {
    outline: none;
    border-color: #4a90d9;
}
.os-placeholder-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.os-placeholder-label {
    color: #666;
    font-size: 12px;
}
.os-placeholder-btn {
    background: #e9ecef;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
}
.os-placeholder-btn:hover {
    background: #dee2e6;
}
.os-save-template-btn {
    background: #4a90d9;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
}
.os-save-template-btn:hover {
    background: #357abd;
}
.os-save-template-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.os-save-status {
    font-size: 12px;
    margin-left: 8px;
}
.os-save-ok {
    color: #28a745;
}
.os-save-err {
    color: #dc3545;
}

/* Action buttons */
.os-action-buttons {
    display: flex;
    gap: 4px;
}
.os-btn-whatsapp {
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.os-btn-whatsapp:hover {
    background: #1da851;
}
.os-btn-sms {
    background: #4a90d9;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
}
.os-btn-sms:hover {
    background: #357abd;
    color: #fff;
    text-decoration: none;
}
.os-btn-sent {
    background: #6c757d !important;
    cursor: default !important;
    opacity: 0.8;
}
.os-btn-whatsapp:disabled {
    cursor: default;
    opacity: 0.7;
}
.os-no-phone {
    color: #aaa;
    font-size: 12px;
    font-style: italic;
}

/* Last Contacted column */
.os-last-contact {
    font-size: 12px;
    white-space: nowrap;
}
.os-contacted {
    color: #28a745;
    font-weight: 500;
}
.os-never {
    color: #aaa;
    font-style: italic;
}

@media (max-width: 768px) {
    .os-dashboard { padding: 10px; }
    .os-dashboard h1 { font-size: 18px; margin-bottom: 12px; }
    .os-subtitle { font-size: 13px; display: block; }
    .os-filter-buttons { gap: 6px; margin-bottom: 10px; }
    .os-btn { padding: 7px 10px; font-size: 11px; flex: 1 1 auto; text-align: center; min-width: 0; }
    .os-location-buttons { margin-top: 0; }
    .os-btn.os-btn-sm { padding: 5px 10px; font-size: 11px; }
    .os-count { font-size: 13px; margin-bottom: 10px; }

    /* Card layout on mobile — hide table header, stack cells */
    .os-table thead { display: none; }
    .os-table, .os-table tbody, .os-table tr, .os-table td {
        display: block;
        width: 100%;
    }
    .os-table tbody tr.os-row {
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .os-table td {
        padding: 3px 0;
        border-bottom: none;
        font-size: 13px;
    }
    .os-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #888;
        font-size: 11px;
        display: block;
    }
    .os-table td.os-name { font-size: 15px; margin-bottom: 4px; }
    .os-table td.os-name::before { display: none; }

    .os-pagination { flex-wrap: wrap; gap: 4px; margin-top: 14px; }
    .os-page-btn { padding: 6px 10px; font-size: 12px; }
    .os-table-wrap { box-shadow: none; background: transparent; }

    .os-template-panel { padding: 12px; }
    .os-template-textarea { min-height: 80px; font-size: 13px; }
    .os-action-buttons { flex-direction: column; width: 100%; }
    .os-btn-whatsapp, .os-btn-sms { width: 100%; padding: 8px; text-align: center; }
}

/* ================================================================
   T-157: Email Campaigns
   ================================================================ */

#email-campaigns-page { padding-top: 25px; }

.ec-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
.ec-page-header h2 { margin: 0; }
.ec-page-actions { display: flex; gap: 8px; }

.ec-audience-filters { padding: 6px 0; }
.ec-audience-filters .checkbox-inline { margin-right: 30px; }
/* gap from margin-right only, so a filter that wraps to a new line starts flush left */
.ec-audience-filters .checkbox-inline + .checkbox-inline { margin-left: 0; }

/* Audience tabs */
.ec-audience-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}
.ec-tab {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
}
.ec-tab:hover { background: #f5f5f5; text-decoration: none; color: #333; }
.ec-tab-active { background: #337ab7; color: #fff; border-color: #337ab7; }
.ec-tab-active:hover { background: #286090; color: #fff; }
.ec-tab .badge { margin-left: 4px; }
.ec-tab-active .badge { background: rgba(255,255,255,0.3); color: #fff; }

/* Audiences panel */
.ec-audiences-panel {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
}
.ec-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ec-panel-header h4 { margin: 0; }
.ec-audiences-table { background: #fff; }
.ec-source-tag { margin: 0 2px 2px 0; display: inline-block; font-size: 11px; }
.ec-from-label { font-weight: 600; }

/* Audience form */
.ec-audience-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    margin-top: 12px;
}
.ec-audience-form h4 { margin-top: 0; margin-bottom: 14px; }
.ec-audience-form-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }

/* Source picker */
.ec-source-picker {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}
.ec-source-search-wrap {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}
.ec-source-search-wrap input { flex: 1; }
.ec-source-count-label { font-size: 12px; color: #888; white-space: nowrap; }
.ec-source-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 6px 10px;
}
.ec-source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-weight: normal;
    cursor: pointer;
    font-size: 13px;
}
.ec-source-item:hover { background: #f5f5f5; }
.ec-source-name { flex: 1; }
.ec-source-leads { font-size: 11px; }
.ec-source-service { font-size: 11px; margin-left: 4px; }
.ec-recipient-preview {
    padding: 8px 12px;
    margin-top: 8px;
    background: #dff0d8;
    border-radius: 4px;
    font-size: 13px;
}

/* Compose panel */
.ec-compose-panel {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
}
.ec-compose-panel h4 { margin-top: 0; margin-bottom: 14px; }
.ec-compose-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; display: flex; gap: 8px; }

.ec-image-upload { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ec-file-input { flex: 1; font-size: 12px; }
.ec-upload-status { font-size: 12px; color: #888; }

/* Preview frame */
.ec-preview-frame {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f4f4f4;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
}
.ec-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #ccc;
}
.ec-preview-placeholder .glyphicon { font-size: 48px; margin-bottom: 10px; }
.ec-preview-email { background: #fff; }
.ec-preview-footer {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

/* Campaigns table */
.ec-campaigns-table .ec-status-label { font-size: 11px; }
.ec-no-campaigns { margin-top: 20px; }

/* Resend to non-openers: badge on a resend, button on a sent campaign (list + report) */
.ec-resend-badge {
    display: inline-block;
    max-width: 100%;
    margin-top: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: #31708f;
    background: #d9edf7;
    border-radius: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ec-resend-btn { white-space: normal; text-align: left; margin-top: 2px; }
.ec-resend-bar { margin-bottom: 10px; }

/* Send to another panel */
.ec-audience-select-panel {
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 4px;
    padding: 16px;
    margin: 20px 0;
}
.ec-audience-select-panel h4 { margin-top: 0; }

/* Spin animation */
@keyframes ec-spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ec-spin { animation: ec-spin-anim 1s linear infinite; display: inline-block; }

/* Responsive */
@media (max-width: 768px) {
    .ec-page-header { flex-direction: column; gap: 8px; }
    .ec-page-actions { width: 100%; justify-content: flex-end; }
    .ec-audience-tabs { gap: 2px; }
    .ec-tab { font-size: 12px; padding: 4px 10px; }
}

/* ============================================================
   Lead Audit (la-*)
   ============================================================ */
.la-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.la-page-actions { display: flex; align-items: center; gap: 12px; }
.la-cache-info { font-size: 12px; color: #999; }

.la-summary-cards .panel-body { padding: 12px 8px; }
.la-card-number { font-size: 28px; font-weight: 700; line-height: 1.2; }
.la-card-label { font-size: 12px; color: #666; margin-top: 4px; text-transform: uppercase; }

.la-audit-table th { white-space: nowrap; font-size: 12px; }
.la-audit-table td { font-size: 13px; text-align: right; }
.la-audit-table td:first-child { text-align: left; }
.la-audit-table .la-totals-row td { background: #f5f5f5; border-top: 2px solid #333; }

.la-sortable { cursor: pointer; user-select: none; }
.la-sortable:hover { background: #eef; }
.la-sort-asc::after { content: ' \25B2'; font-size: 10px; }
.la-sort-desc::after { content: ' \25BC'; font-size: 10px; }

.la-highlight-warn { background: #fcf8e3 !important; font-weight: 600; }
.la-highlight-danger { background: #f2dede !important; font-weight: 600; }
.la-row-warn { background: #fffbe6; }
.la-row-danger { background: #fff0f0; }

.la-cell-sub { color: #3c763d; }
.la-cell-unsub { color: #8a6d3b; }
.la-cell-cleaned { color: #a94442; }

.la-collapsible-toggle { cursor: pointer; }
.la-collapsible-toggle:hover { background: #f0f0f0; }
.la-chevron { margin-right: 8px; transition: transform 0.2s; }

.la-mc-filter-bar { margin-bottom: 15px; }
.la-mc-filter-bar .btn { margin-right: 5px; }

/* Lead Consolidation Panel */
.la-consolidation-actions { display: flex; flex-direction: column; gap: 10px; }
.la-action-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.la-action-row:last-child { border-bottom: none; }
.la-action-desc { color: #777; font-size: 13px; flex: 1; }
.la-action-result { font-size: 13px; font-weight: 600; min-width: 200px; }

@media (max-width: 768px) {
    .la-page-header { flex-direction: column; gap: 8px; }
    .la-summary-cards .col-md-2 { width: 50%; }
    .la-action-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================
   T-161: LOCATION COLOR SYSTEM
   ============================================ */
/* Location color map:
   London (25525)  = #2471a3 (deep blue)
   Dublin (25527)  = #27ae60 (green)
   Harley (8245)   = #8e44ad (purple)
   Chelsea (23783) = #e67e22 (orange)
   Mayfair (25526) = #16a085 (teal)
   Square Mile (25528) = #c0392b (red)
*/

/* Location flag icons */
.loc-flag { width: 18px; height: 13px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }

/* --- Calendar location buttons --- */
.the_locations { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.change_to_location {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.change_to_location:focus { outline: none; box-shadow: none; }

/* All location switcher buttons share one blue (8 Devonshire) style —
   inactive = light-blue outline, active = solid blue with a gold border.
   Location is identified by the label, not the colour. */
.change_to_location { background: #d6eaf8; color: #1a5276; border-color: #2471a3; }
.change_to_location.active { background: #2471a3; color: #fff; border-color: #1a5276; box-shadow: 0 3px 8px rgba(36,113,163,0.4); }
.change_to_location:hover:not(.active) { background: #aed6f1; }

/* --- Appointment requests: location row colors (calendar panel) --- */
.appt-requests-panel .table>tbody>tr.loc-row--25525>td { background: #d6eaf8; border-left: 4px solid #2471a3; }
.appt-requests-panel .table>tbody>tr.loc-row--25527>td { background: #eafaf1; border-left: 4px solid #27ae60; }
.appt-requests-panel .table>tbody>tr.loc-row--8245>td  { background: #f4ecf7; border-left: 4px solid #8e44ad; }
.appt-requests-panel .table>tbody>tr.loc-row--23783>td { background: #fef5e7; border-left: 4px solid #e67e22; }
.appt-requests-panel .table>tbody>tr.loc-row--25526>td { background: #e8f8f5; border-left: 4px solid #16a085; }
.appt-requests-panel .table>tbody>tr.loc-row--25528>td { background: #fdedec; border-left: 4px solid #c0392b; }
.appt-requests-panel .table>tbody>tr.loc-row--25525:hover>td { background: #aed6f1; }
.appt-requests-panel .table>tbody>tr.loc-row--25527:hover>td { background: #d5f5e3; }
.appt-requests-panel .table>tbody>tr.loc-row--8245:hover>td  { background: #e8d8f0; }
.appt-requests-panel .table>tbody>tr.loc-row--23783:hover>td { background: #fdebd0; }
.appt-requests-panel .table>tbody>tr.loc-row--25526:hover>td { background: #d1f2eb; }
.appt-requests-panel .table>tbody>tr.loc-row--25528:hover>td { background: #fadbd8; }

/* Location badge in appointment requests table */
.loc-badge { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #fff; }
.loc-badge--25525 { background: #2471a3; }
.loc-badge--25527 { background: #27ae60; }
.loc-badge--8245  { background: #8e44ad; }
.loc-badge--23783 { background: #e67e22; }
.loc-badge--25526 { background: #16a085; }
.loc-badge--25528 { background: #c0392b; }
.loc-badge--25529 { background: #6c5ce7; }   /* Amsterdam (T-207) */

/* T-211: clinic badge on a Gmail message row / unreplied-email card - only rendered
   once a patient has more than one mailbox in play. */
.mail-item__clinic { margin-right: 6px; vertical-align: middle; }

/* --- Patient history: appointment request cells by location --- */
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--25525 { background: #de6356 !important; }
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--25527 { background: #27ae60 !important; }
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--8245  { background: #8e44ad !important; }
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--23783 { background: #e67e22 !important; }
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--25526 { background: #16a085 !important; }
div#xpand_appointment_requests div.appt_cell.approve_booking_cell.loc-cell--25528 { background: #c0392b !important; }

/* --- Consent "yes" answers alert --- */
.consent-yes-alert {
    background: linear-gradient(135deg, #e15a4c 0%, #d5685d 100%);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
}
.consent-yes-alert__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.consent-yes-alert__service { font-weight: 700; margin-top: 8px; margin-bottom: 4px; font-size: 17px; }
.consent-yes-alert__questions { padding-left: 20px; margin: 0; font-size: 14px; }
.consent-yes-alert__questions li { margin-bottom: 3px; }

@media (max-width: 768px) {
    .consent-yes-alert__title { font-size: 19px; }
}

/* ─── Marketing Decisions Page ─── */
.marketing-decisions-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    color: #fff;
    padding: 20px;
}
.marketing-decisions-page .container-fluid { max-width: 1600px; margin: 0 auto; }
.marketing-decisions-page h1 { text-align: center; margin-bottom: 10px; font-size: 2em; }
.marketing-decisions-page .mktg-subtitle { text-align: center; color: #888; margin-bottom: 30px; font-size: 14px; }

.mktg-period-selector { text-align: center; margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mktg-period-btn {
    background: rgba(102, 126, 234, 0.2); border: 1px solid rgba(102, 126, 234, 0.5);
    color: #fff; padding: 12px 30px; border-radius: 8px; font-size: 16px;
    cursor: pointer; text-decoration: none; transition: all 0.2s ease;
}
.mktg-period-btn.active { background: #667eea; border-color: #667eea; font-weight: bold; }
.mktg-period-btn:hover { background: rgba(102, 126, 234, 0.4); color: #fff; text-decoration: none; }

.mktg-info-box {
    background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px; padding: 20px; margin-bottom: 30px;
}
.mktg-info-box h3 { color: #667eea; margin-bottom: 10px; }
.mktg-info-box p { color: #aaa; line-height: 1.6; }
.mktg-info-tip { margin-top: 10px; color: #888; font-size: 12px; }

.mktg-legend { display: flex; gap: 30px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.mktg-legend-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mktg-legend-dot { width: 20px; height: 20px; border-radius: 50%; }
.mktg-dot-scale { background: #22c55e; }
.mktg-dot-maintain { background: #3b82f6; }
.mktg-dot-optimize { background: #f59e0b; }
.mktg-dot-reduce { background: #ef4444; }

/* Account sections */
.mktg-account-section { margin-bottom: 60px; }
.mktg-account-header {
    text-align: center; font-size: 1.6em; margin-bottom: 20px;
    padding: 15px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 1px solid rgba(102, 126, 234, 0.3);
}
.mktg-api-badge { font-size: 12px; padding: 4px 12px; border-radius: 20px; margin-left: 10px; vertical-align: middle; }
.mktg-api-badge-ok { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid #22c55e; }
.mktg-api-badge-warning { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; }

.mktg-api-notice {
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px; padding: 15px 20px; margin-bottom: 20px; color: #f59e0b;
}
.mktg-api-notice p { margin: 0 0 10px 0; }
.mktg-authorize-btn {
    display: inline-block; padding: 8px 20px; background: #667eea; color: #fff;
    border-radius: 6px; text-decoration: none; font-weight: 600;
}
.mktg-authorize-btn:hover { background: #5a6fd6; color: #fff; text-decoration: none; }
.mktg-config-hint { font-size: 12px; color: #888; }
.mktg-config-hint code { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 3px; }

/* Summary cards */
.mktg-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; }
.mktg-summary-card { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 20px; text-align: center; }
.mktg-card-label { color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 5px; }
.mktg-card-value { font-size: 28px; font-weight: bold; }
.mktg-card-sub { color: #f59e0b; font-size: 12px; margin-top: 4px; }
.mktg-val-green { color: #22c55e; }
.mktg-val-gold { color: #ffd700; }
.mktg-val-blue { color: #3b82f6; }
.mktg-val-red { color: #ef4444; }

/* Decision table */
.mktg-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mktg-decision-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.03); border-radius: 10px; overflow: hidden; min-width: 100%; }
.mktg-decision-table th {
    background: rgba(0,0,0,0.4); padding: 15px 20px; text-align: left;
    font-weight: 600; font-size: 12px; text-transform: uppercase; color: #888;
}
.mktg-decision-table td { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; }
.mktg-decision-table tr:hover { background: rgba(255,255,255,0.05); }
.mktg-right { text-align: right; }
.mktg-domain-name { font-weight: bold; font-size: 16px; }

.mktg-metric { text-align: right; }
.mktg-metric-value { font-size: 18px; font-weight: bold; }
.mktg-metric-label { font-size: 10px; color: #888; text-transform: uppercase; }
.mktg-svc-breakdown { margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.mktg-svc-line { font-size: 10px; color: #aaa; line-height: 1.6; white-space: nowrap; }

/* Marketing Trends (/admin/marketing_trends) year-over-year matrices */
.mktg-trends-section { margin-top: 30px; }
.mktg-trends-matrix { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.03); border-radius: 8px; overflow: hidden; }
.mktg-trends-matrix th { padding: 8px 6px; text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; color: #888; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mktg-trends-matrix td { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mktg-trends-yearcol { font-weight: bold; font-size: 14px; text-align: center; padding: 6px 10px; white-space: nowrap; }
.mktg-trends-totalcol { border-left: 2px solid rgba(255,255,255,0.15); }
.mktg-trends-cell { padding: 6px 4px; text-align: center; min-width: 62px; }
.mktg-trends-rev { font-size: 13px; font-weight: bold; white-space: nowrap; }
.mktg-trends-sub { font-size: 9px; color: #999; white-space: nowrap; margin-top: 2px; }
.mktg-trends-spendline { font-size: 9px; color: #f87171; white-space: nowrap; margin-top: 1px; }
.mktg-trends-future { color: #444; }
.mktg-trends-partial { outline: 1px dashed rgba(255,255,255,0.35); outline-offset: -3px; }
.mktg-heat-0 { background: transparent; }
.mktg-heat-1 { background: rgba(34, 197, 94, 0.08); }
.mktg-heat-2 { background: rgba(34, 197, 94, 0.18); }
.mktg-heat-3 { background: rgba(34, 197, 94, 0.30); }
.mktg-heat-4 { background: rgba(34, 197, 94, 0.44); }
.mktg-heat-5 { background: rgba(34, 197, 94, 0.60); }
.mktg-trends-outlook-row { display: flex; flex-wrap: wrap; gap: 15px; }
.mktg-trends-outlook-card { flex: 1 1 300px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; }
.mktg-trends-outlook-card h4 { margin: 0 0 10px; font-size: 15px; color: #f59e0b; }
.mktg-trends-outlook-table { width: 100%; border-collapse: collapse; }
.mktg-trends-outlook-table th { font-size: 10px; text-transform: uppercase; color: #888; text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mktg-trends-outlook-table td { font-size: 12px; padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mktg-trends-up { color: #22c55e; font-weight: bold; }
.mktg-trends-down { color: #ef4444; font-weight: bold; }
.mktg-trends-flat { color: #aaa; }
.mktg-trends-collapsible { margin-top: 8px; }
.mktg-trends-toggle { cursor: pointer; }
.mktg-trends-toggle:hover { opacity: 0.8; }

/* Lead funnel (called / connected / booked) columns */
.mktg-funnel-sub { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-end; font-size: 10px; line-height: 1.6; white-space: nowrap; }
.mktg-funnel-called { color: #3b82f6; }
.mktg-funnel-connected { color: #22c55e; }
.mktg-funnel-booked { color: #a78bfa; }
.mktg-funnel-pct { font-size: 10px; color: #888; }

.mktg-ratio-cell { min-width: 120px; }
.mktg-ratio-value { font-size: 24px; font-weight: bold; }
.mktg-ratio-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 5px; overflow: hidden; }
.mktg-ratio-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }

/* Verdict badges */
.mktg-verdict { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 13px; white-space: nowrap; }
.mktg-verdict-scale { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid #22c55e; }
.mktg-verdict-maintain { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid #3b82f6; }
.mktg-verdict-optimize { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; }
.mktg-verdict-reduce { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; }
.mktg-verdict-organic { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid #a78bfa; }
.mktg-toggle-icon { display: inline-block; font-size: 12px; color: #666; margin-left: 8px; transition: transform 0.2s; }
.mktg-toggle-icon.mktg-toggle-open { transform: rotate(90deg); }
.mktg-monthly-toggle:hover { opacity: 0.8; }

/* Action boxes */
.mktg-action-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
.mktg-action-box { padding: 20px; border-radius: 10px; }
.mktg-action-box h4 { margin-bottom: 15px; font-size: 16px; }
.mktg-action-box ul { margin-left: 20px; }
.mktg-action-box li { margin: 8px 0; color: #ccc; }
.mktg-action-scale { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
.mktg-action-scale h4 { color: #22c55e; }
.mktg-action-reduce { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); }
.mktg-action-reduce h4 { color: #ef4444; }

/* Monthly section */
.mktg-monthly-section { margin-top: 50px; }
.mktg-monthly-title { text-align: center; margin-bottom: 10px; }
.mktg-monthly-desc { text-align: center; color: #888; margin-bottom: 30px; }

.mktg-domain-section { margin-bottom: 40px; }
.mktg-domain-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    padding: 15px 20px; border-radius: 10px 10px 0 0; margin-bottom: 0;
    display: flex; justify-content: space-between; align-items: center;
}
.mktg-domain-summary { font-size: 14px; color: #aaa; font-weight: normal; }
.mktg-table-monthly { border-radius: 0 0 10px 10px; }

/* No data */
.mktg-no-data { text-align: center; padding: 40px; color: #888; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 30px; }

/* Footer */
.mktg-footer-note { text-align: center; color: #666; font-size: 12px; margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; }
.mktg-refresh-link { color: #667eea; }

/* Responsive */
@media (max-width: 1024px) {
    .mktg-decision-table th, .mktg-decision-table td { padding: 12px 10px; font-size: 12px; }
    .mktg-metric-value { font-size: 14px; }
    .mktg-ratio-value { font-size: 18px; }
    .mktg-verdict { font-size: 11px; padding: 6px 10px; }
    .mktg-action-summary { grid-template-columns: 1fr; }
    .mktg-domain-header { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 768px) {
    .mktg-summary-cards { grid-template-columns: repeat(2, 1fr); }
    .mktg-legend { flex-direction: column; gap: 10px; align-items: flex-start; }
    .marketing-decisions-page h1 { font-size: 1.5em; }
}

/* ── Received Reviews ── */
.reviews-page { padding-bottom: 40px; }
.reviews-loc-header { margin-top: 30px; font-size: 20px; }
.reviews-loc-header small { color: #999; font-weight: normal; }
.reviews-date { min-width: 100px; white-space: nowrap; }
.reviews-actions { white-space: nowrap; }
.reviews-actions .btn { margin-bottom: 3px; }
.reviews-filter-bar { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.reviews-filter-btn { padding: 8px 20px; border: 2px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.15s; }
.reviews-filter-btn:hover { border-color: #999; }
.reviews-filter-btn.active { background: #337ab7; color: #fff; border-color: #337ab7; }
.reviews-cards { display: none; }

.review-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.review-card--5star { border-left: 3px solid #5cb85c; }
.review-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.review-card-name { font-weight: 600; color: #337ab7; }
.review-card-stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.review-card-service { font-size: 13px; color: #777; margin-bottom: 6px; }
.review-card-comment { font-size: 14px; color: #333; margin-bottom: 8px; padding: 8px; background: #f9f9f9; border-radius: 4px; }
.review-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.review-card-date { font-size: 12px; color: #999; }
.review-card-btns { display: flex; gap: 6px; }

@media (max-width: 768px) {
    .reviews-table-wrap { display: none; }
    .reviews-cards { display: block; }
}

/* ============================================================
   Contacts Browse (ct-*)
   ============================================================ */
.ct-page { padding: 20px; background: #dadadaee; min-height: 100vh; }
.ct-page h1 { margin: 0 0 20px; font-size: 26px; font-weight: 700; color: #333; }

/* Stats */
.ct-stats { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ct-stat-card { background: #fff; border-radius: 8px; padding: 16px 24px; text-align: center; border: 2px solid #e5e5e5; min-width: 120px; }
.ct-stat-num { font-size: 28px; font-weight: 700; color: #333; }
.ct-stat-label { font-size: 13px; color: #888; margin-top: 4px; }
.ct-stat-subscribed { border-color: #5cb85c; }
.ct-stat-subscribed .ct-stat-num { color: #5cb85c; }
.ct-stat-unsub { border-color: #d9534f; }
.ct-stat-unsub .ct-stat-num { color: #d9534f; }
.ct-stat-bounced { border-color: #f0ad4e; }
.ct-stat-bounced .ct-stat-num { color: #f0ad4e; }

/* Search */
.ct-search-row { display: flex; gap: 8px; margin-bottom: 12px; position: relative; }
.ct-search-input { max-width: 400px; }
.ct-search-btn { min-width: 80px; }
.ct-clear-btn { min-width: 60px; }

/* Search results dropdown */
.ct-search-results { position: absolute; z-index: 100; background: #fff; border: 1px solid #ddd; border-radius: 6px; max-width: 600px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.ct-search-results:empty { display: none; }
.ct-sr-row { display: flex; gap: 12px; padding: 10px 14px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f0f0; align-items: center; }
.ct-sr-row:hover { background: #f5f5f5; text-decoration: none; color: #333; }
.ct-sr-email { font-weight: 600; min-width: 200px; }
.ct-sr-name { color: #666; min-width: 120px; }
.ct-sr-source { font-size: 12px; color: #999; }
.ct-sr-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.ct-sr-empty { padding: 12px; color: #999; text-align: center; }
.ct-sr-more { padding: 8px 14px; font-size: 12px; color: #888; text-align: center; border-top: 1px solid #f0f0f0; }

/* Filters */
.ct-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ct-filter-select { max-width: 200px; }

/* Count */
.ct-count { font-size: 14px; color: #666; margin-bottom: 10px; font-weight: 600; }

/* Table */
.ct-table-wrap { overflow-x: auto; margin-bottom: 20px; }
.ct-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.ct-table th { background: #3379b7; color: #fff; padding: 10px 14px; text-align: left; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ct-table td { padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 13px; vertical-align: middle; position: relative; }
.ct-table tbody tr:hover { background: #f8f9fa; }
.ct-empty { text-align: center; color: #999; padding: 40px !important; }
.ct-email-link { color: #3379b7; font-weight: 600; }
.ct-email-link:hover { text-decoration: underline; }
.ct-muted { color: #ccc; }
.ct-date { white-space: nowrap; color: #888; }
.ct-source-tag { display: inline-block; background: #e8f4fd; color: #3379b7; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.ct-source-current { font-weight: 700; }
.ct-source-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.ct-source-row:last-child { margin-bottom: 0; }
.ct-lists-status { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.ct-lists-status.ct-status-subscribed { background: #dff0d8; color: #3c763d; }
.ct-lists-status.ct-status-unsubscribed { background: #f2dede; color: #a94442; }
.ct-lists-status.ct-status-bounced { background: #fcf8e3; color: #8a6d3b; }
.ct-lists-status.ct-status-cleaned { background: #f5f5f5; color: #777; }
.ct-lists-status.ct-status-unknown { background: #f5f5f5; color: #999; }

/* Status toggle button */
.ct-status-toggle { border: none; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ct-status-toggle.ct-status-subscribed { background: #dff0d8; color: #3c763d; }
.ct-status-toggle.ct-status-subscribed:hover { background: #c9e2b3; }
.ct-status-toggle.ct-status-unsubscribed { background: #f2dede; color: #a94442; }
.ct-status-toggle.ct-status-unsubscribed:hover { background: #e4b9b9; }

/* Status badge (non-clickable) */
.ct-status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.ct-status-badge.ct-status-bounced { background: #fcf8e3; color: #8a6d3b; }
.ct-status-badge.ct-status-cleaned { background: #f5f5f5; color: #777; }
.ct-status-badge.ct-status-unknown { background: #f5f5f5; color: #999; }

/* Pagination */
.ct-pagination { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ct-page-btn { display: inline-block; padding: 8px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #333; text-decoration: none; font-size: 13px; }
.ct-page-btn:hover { background: #f5f5f5; text-decoration: none; color: #333; }
.ct-page-btn.active { background: #3379b7; color: #fff; border-color: #3379b7; }

@media (max-width: 768px) {
    .ct-stats { grid-template-columns: repeat(2, 1fr); }
    .ct-filters { flex-direction: column; }
    .ct-filter-select { max-width: 100%; }
    .ct-search-input { max-width: 100%; flex: 1; }
}

/* ── T-166: Customers Browse Page (.cu-*) ──────────────────────── */
.cu-page { padding: 20px 15px; background: #fff; min-height: 80vh; }
.cu-page h1 { margin: 0 0 20px; font-size: 24px; color: #333; }

.cu-search-row { display: flex; gap: 8px; margin-bottom: 15px; align-items: center; }
.cu-search-input { max-width: 350px; }
.cu-search-btn { white-space: nowrap; }
.cu-clear-btn { white-space: nowrap; }

.cu-search-results { position: relative; z-index: 100; }
.cu-sr-row { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #eee; text-decoration: none; color: #333; cursor: pointer; }
.cu-sr-row:hover { background: #f5f5f5; text-decoration: none; color: #333; }
.cu-sr-name { font-weight: 600; min-width: 140px; }
.cu-sr-email { color: #666; flex: 1; }
.cu-sr-phone { color: #888; font-size: 13px; }
.cu-sr-empty { padding: 10px 12px; color: #999; }
.cu-sr-more { padding: 8px 12px; color: #3379b7; font-size: 13px; text-align: center; border-top: 1px solid #eee; }

.cu-filters { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.cu-filter-select { max-width: 200px; }

.cu-count { font-size: 13px; color: #888; margin-bottom: 10px; }

.cu-table-wrap { overflow-x: auto; }
.cu-table { width: 100%; border-collapse: collapse; }
.cu-table th { background: #f5f5f5; padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 600; color: #555; border-bottom: 2px solid #ddd; white-space: nowrap; }
.cu-table td { padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: middle; }
.cu-table tr:hover td { background: #fafafa; }

.cu-sort-link { color: #555; text-decoration: none; }
.cu-sort-link:hover { color: #3379b7; text-decoration: none; }

.cu-name-link { color: #3379b7; text-decoration: none; font-weight: 500; }
.cu-name-link:hover { text-decoration: underline; }

.cu-muted { color: #ccc; }
.cu-date { white-space: nowrap; }
.cu-money { white-space: nowrap; font-family: monospace; }
.cu-empty { text-align: center; color: #999; padding: 30px !important; }

.cu-pagination { display: flex; gap: 4px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.cu-page-btn { display: inline-block; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; color: #3379b7; text-decoration: none; font-size: 13px; }
.cu-page-btn:hover { background: #f5f5f5; text-decoration: none; color: #3379b7; }
.cu-page-btn.active { background: #3379b7; color: #fff; border-color: #3379b7; }

@media (max-width: 768px) {
    .cu-filters { flex-direction: column; }
    .cu-filter-select { max-width: 100%; }
    .cu-search-input { max-width: 100%; flex: 1; }
}

/* ── T-167: Delete Lead (.dl-*) ──────────────────────────────── */
.dl-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.dl-trigger { background: #c9302c; border-color: #ac2925; }
.dl-confirm { margin-top: 12px; padding: 15px; background: #fdf2f2; border: 1px solid #e8c4c4; border-radius: 4px; }
.dl-preview { margin-bottom: 12px; font-size: 14px; }
.dl-preview ul { margin: 8px 0 0; padding-left: 20px; }
.dl-preview li { margin-bottom: 4px; }
.dl-actions { display: flex; gap: 8px; }
.dl-confirm-btn { background: #c9302c; border-color: #ac2925; color: #fff; }
.dl-confirm-btn:hover { background: #ac2925; color: #fff; }
.ct-actions { white-space: nowrap; width: 1%; }
.dl-confirm-row .dl-confirm-cell { background: #fdf2f2; padding: 10px 15px; }
.dl-confirm-row .dl-preview { margin-bottom: 8px; font-size: 14px; }
.dl-confirm-row .dl-preview ul { margin: 8px 0 0; padding-left: 20px; }
.dl-confirm-row .dl-actions { display: flex; gap: 8px; }

/* Campaign Report */
.cr-page-header { margin-bottom: 20px; }
.cr-page-header h2 { margin: 10px 0 5px; }
.cr-meta { color: #777; font-size: 13px; }
.cr-stats { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cr-stat-card { flex: 1; min-width: 100px; text-align: center; padding: 15px 10px; border-radius: 4px; border: 1px solid #ddd; }
.cr-stat-num { font-size: 28px; font-weight: 700; }
.cr-stat-label { font-size: 12px; color: #777; margin-top: 2px; }
.cr-stat-sent { border-color: #5bc0de; }
.cr-stat-sent .cr-stat-num { color: #31708f; }
.cr-stat-opened { border-color: #5cb85c; }
.cr-stat-opened .cr-stat-num { color: #3c763d; }
.cr-stat-clicked { border-color: #337ab7; }
.cr-stat-clicked .cr-stat-num { color: #337ab7; }
.cr-stat-bounced { border-color: #d9534f; }
.cr-stat-bounced .cr-stat-num { color: #a94442; }
.cr-stat-unsub { border-color: #f0ad4e; }
.cr-stat-unsub .cr-stat-num { color: #8a6d3b; }
.cr-stat-resub { border-color: #5cb85c; }
.cr-stat-resub .cr-stat-num { color: #3c763d; }
.cr-stat-revenue { border-color: #2e7d32; background: #f1f8e9; }
.cr-stat-revenue .cr-stat-num { color: #1b5e20; font-size: 22px; }
.cr-revenue-cell { white-space: nowrap; }
.cr-tabs { margin-bottom: 0; }
.cr-tab-content { border: 1px solid #ddd; border-top: none; padding: 15px; background: #fff; }
.cr-table { margin-bottom: 0; }
.cr-empty { padding: 20px; text-align: center; color: #999; }

/* T-170: Inline edit on customers page */
.cu-editable { cursor: pointer; }
.cu-editable:hover { text-decoration: underline; text-decoration-style: dotted; color: #337ab7; }
.cu-editable.cu-editing { padding: 0; }
.cu-editable-input { width: 100%; border: 1px solid #66afe9; padding: 3px 6px; font-size: 13px; outline: none; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6); }
.cu-edit-ok { animation: cuFlashOk 1.5s ease; }
.cu-edit-err { background-color: #f2dede !important; }
@keyframes cuFlashOk { 0% { background-color: #dff0d8; } 100% { background-color: transparent; } }

/* T-171: Contact history expand */
.ct-expand-btn { cursor: pointer; display: inline-block; width: 16px; font-size: 10px; color: #999; vertical-align: middle; margin-right: 4px; }
.ct-expand-btn:hover { color: #337ab7; }
.ct-history-row { background: #f9f9f9; }
.ct-history-cell { padding: 10px 15px !important; }
.ct-hist-section { margin-bottom: 10px; }
.ct-hist-section:last-child { margin-bottom: 0; }
.ct-hist-section strong { display: block; margin-bottom: 5px; font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
.ct-hist-group { margin-bottom: 4px; }
.ct-hist-label { font-weight: 600; margin-right: 6px; color: #666; }
.ct-hist-item { display: inline-block; background: #eee; padding: 2px 8px; border-radius: 3px; margin: 2px 4px 2px 0; font-size: 13px; }
.ct-hist-primary { background: #337ab7; color: #fff; padding: 1px 5px; border-radius: 2px; font-size: 10px; margin-left: 4px; }
.ct-hist-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.ct-hist-table th { background: #eee; padding: 4px 8px; text-align: left; font-weight: 600; font-size: 12px; }
.ct-hist-table td { padding: 4px 8px; border-bottom: 1px solid #eee; }

/* T-175: Profile page — area group picker (v0 style) */
.profile-area-group-picker { padding-top: 16px; border-top: 1px solid #e2e8f0; margin-top: 16px; }
.profile-area-group-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.profile-area-group-options .profile-area-cancel-add-btn { grid-column: 1 / -1; }
.profile-area-group-label { font-weight: 700; margin-bottom: 6px; font-size: 16px; color: #1e293b; }
.profile-area-group-label .profile-area-service-name { color: #4a5568; }
.profile-area-group-subtext { font-size: 13px; color: #94a3b8; margin-bottom: 14px; }
.profile-area-group-option { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px; margin-bottom: 0; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.2s; background: #fff; text-align: left; }
.profile-area-group-option:hover { border-color: #4a5568; background: #f8fafc; }
.profile-area-group-option.area-selected { border-color: #4a5568; border-width: 2px; background: #f8fafc; }
.profile-area-group-option.area-selected::after { content: '✓'; position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; background: #4a5568; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.profile-area-group-option input[type="radio"] { display: none; }
.profile-area-group-option strong { font-size: 14px; color: #1e293b; font-weight: 700; display: block; margin-bottom: 2px; }
.profile-area-line { line-height: 1.4; margin-bottom: 2px; }
.profile-area-line:last-child { margin-bottom: 0; }
.profile-area-group-desc { font-size: 12px; color: #94a3b8; font-weight: 400; }
.profile-selected-areas { margin-top: 12px; padding: 12px 14px; border: none; border-radius: 12px; background: #f8fafc; }
.profile-selected-areas-label { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.profile-area-pill { display: inline-block; background: #4a5568; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; letter-spacing: 0.3px; white-space: nowrap; }
.profile-area-actions { display: flex; gap: 10px; margin-top: 10px; }
.profile-area-add-more-btn { font-size: 13px; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 8px 16px !important; background: #fff !important; color: #64748b !important; font-weight: 600; }
.profile-area-add-more-btn:hover { border-color: #4a5568 !important; color: #4a5568 !important; }
.profile-area-done-btn { font-size: 14px; border: none !important; border-radius: 10px !important; padding: 10px 20px !important; background: #4a5568 !important; color: #fff !important; font-weight: 700; }
.profile-area-done-btn:hover { background: #374151 !important; }
.profile-area-cancel-add-btn { display: block; width: 100%; margin-top: 8px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 16px; background: #fff; color: #64748b; font-weight: 600; text-align: center; transition: all 0.2s; }
.profile-area-cancel-add-btn:hover { border-color: #4a5568; color: #4a5568; }
.profile-area-cancel-selection-btn { display: block; width: 100%; margin-top: 10px; font-size: 13px; border: 1px solid #ef4444; border-radius: 10px; padding: 10px 16px; background: #fff; color: #ef4444; font-weight: 600; text-align: center; transition: all 0.2s; grid-column: 1 / -1; }
.profile-area-cancel-selection-btn:hover { background: #ef4444; color: #fff; }
.profile-area-continue-btn { display: block; width: 100%; margin-top: 10px; font-size: 15px; border: none; border-radius: 12px; padding: 14px 20px; background: linear-gradient(to right, #475569, #64748b); color: #fff; font-weight: 700; text-align: center; transition: all 0.2s; }
.profile-area-continue-btn:hover { background: linear-gradient(to right, #334155, #475569); color: #fff; }

/* T-175: Profile page — chunk pending badge */
.profile-chunk-pending { display: inline-block; background: #e060ec; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 8px; }
/* T-175: Pending chunk wrapper — groups cards + cancel button visually */
.pending-chunk-wrap { background-image: linear-gradient(in oklab, rgb(254, 249, 231) 0%, rgb(255, 248, 225) 100%); border: 1px solid #e0d5bf; border-radius: 12px; padding: 8px; margin-bottom: 12px; }
.pending-chunk-wrap .appt_cell { margin-bottom: 4px; border-radius: 8px; }
.pending-chunk-wrap .btn-cancel-request { width: 100%; background: oklab(0.999994 0.0000455677 0.0000200868 / 0.8); color: rgb(139, 105, 20); border: 2px solid lab(71.7203 9.80371 49.3973 / 0.3); border-radius: 10px; padding: 10px; font-weight: 600; margin-top: 6px; transition: all 0.2s; }
.pending-chunk-wrap .btn-cancel-request:hover { border-color: rgb(212, 168, 83); }

/* T-175: Future bookings chunk wrapper */
.future-chunk-wrap { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.future-chunk-wrap .appt_cell { margin-bottom: 0; border-radius: 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
.future-chunk-actions { display: flex; gap: 8px; padding: 10px; background: #f8fafc; align-items: stretch; }
.future-chunk-actions > * { flex: 1 1 0; min-width: 0; margin: 0; }
.future-chunk-actions > form { display: flex; flex-wrap: wrap; margin-bottom: 0; }
.future-chunk-actions > form > .alert { flex: 0 0 100%; margin: 8px 0 0; }
.future-chunk-cancel-btn, .future-chunk-update-btn { width: 100%; padding: 10px 8px; border-radius: 10px; font-weight: 600; font-size: 13px; text-align: center; border: 1px solid; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.future-chunk-cancel-btn { background: #fff; color: #ef4444; border-color: #ef4444; }
.future-chunk-cancel-btn:hover { background: #ef4444; color: #fff; }
.future-chunk-update-btn { background: #4a5568; color: #fff; border-color: #4a5568; }
.future-chunk-update-btn:hover { background: #374151; border-color: #374151; color: #fff; }

/* T-175: Multi-service chunk header (neutral wrapper) */
.profile-chunk-header { background: #3a3a4a; color: #fff; border: 1px solid #ddd8d8; margin-bottom: 2px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.profile-chunk-header .flex_date_duration { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-chunk-header .serviceNames_ { font-weight: 600; font-size: 13px; }
.profile-chunk-header .sessionDateTime { font-size: 12px; }
.profile-chunk-header .duration_t { font-size: 11px; opacity: 0.8; }
.profile-chunk-header img { height: 18px; }

/* T-175: Individual service cards inside expanded chunk */
.profile-chunk-services { padding: 4px 0 8px; }
.profile-chunk-services .appt_cell.profile-chunk-service { cursor: default; margin-bottom: 3px; padding: 4px 10px; font-size: 13px; }
.profile-chunk-services .profile-chunk-service .sessionDateTime { font-size: 12px; }
.profile-chunk-services .profile-chunk-service .duration_t { font-size: 11px; opacity: 0.8; }

/* ============================================================
   v0 REDESIGN — Profile Booking UI
   ============================================================ */

/* Step indicator tabs */
.profile-step-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 0 15px; }
.profile-step-tab { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(91, 107, 138); background: #f1f5f9; transition: all 0.3s; }
.profile-step-tab.active { background: linear-gradient(to right, #475569, #64748b); color: #fff; }
.profile-step-tab .step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #e2e8f0; color: #64748b; }
.profile-step-tab.active .step-num { background: rgba(255,255,255,0.2); color: #fff; }

/* Step cards */
#calendar-book-new > .profile-step { padding-left: 15px; padding-right: 15px; margin-bottom: 12px; }
.profile-step-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.profile-step-number { display: none; }
.profile-step-heading { font-size: 20px; font-weight: 700; color: #1e293b; margin-bottom: 4px; text-align: center; }
.profile-step-subheading { font-size: 13px; color: #94a3b8; text-align: center; margin-bottom: 16px; }
.profile-step-card > hr { border: none; border-top: 1px solid #e2e8f0; margin: 16px 0; }
.profile-step2-calendar-wrap { margin-bottom: 12px; }
.profile-step2-calendar-wrap .ajax-calendar { margin-bottom: 10px; }

/* Service buttons — v0 style with dot + progress bar */
.profile-service-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-svc-btn { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; transition: all 0.2s; font-size: 14px; font-weight: 700; min-width: 0; width: calc(50% - 6px); text-align: center; color: #1e293b; box-sizing: border-box; }
.profile-svc-btn:hover { border-color: #4a5568; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.profile-svc-btn.selected { border-color: #4a5568; border-width: 2px; background: #f8fafc; }
.profile-svc-btn-dot { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; }
.profile-svc-btn-sessions { font-size: 12px; color: #94a3b8; font-weight: 400; margin-top: 4px; }
.profile-svc-btn.selected .profile-svc-btn-sessions { color: #64748b; }
/* Progress bar on service buttons */
.profile-svc-btn-progress { width: 100%; height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.profile-svc-btn-progress-fill { height: 100%; background: #4a5568; border-radius: 2px; transition: width 0.3s; }

/* Selected services panel */
.profile-selected-services { padding-top: 16px; border-top: 1px solid #e2e8f0; margin-top: 16px; }
.profile-selected-service-item { display: flex; align-items: center; padding: 12px 14px; margin-bottom: 8px; border: none; border-radius: 12px; background: #f8fafc; border-left: 4px solid #4a5568; }
.profile-svc-name { font-weight: 600; font-size: 14px; flex: 1; color: #1e293b; text-align: left; }
.profile-svc-areas { display: block; font-size: 11px; color: #64748b; font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.profile-svc-duration { color: #64748b; font-size: 13px; font-weight: 600; white-space: nowrap; margin: 0 12px; }
.profile-svc-remove { background: lab(55.4814 75.0732 48.8528); border: none; color: #fff; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: opacity 0.2s; flex-shrink: 0; padding: 0; margin: 0; box-sizing: border-box; }
.profile-svc-remove:hover { opacity: 0.8; }
.profile-total-duration { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #64748b; font-weight: 600; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.profile-total-duration strong { color: #1e293b; font-size: 15px; }

/* Add more + Continue buttons */
.profile-add-more-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.profile-add-more-btn { font-size: 14px; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 12px 16px; background: #fff; color: #64748b; font-weight: 600; transition: all 0.2s; text-align: center; width: 100%; }
.profile-add-more-btn:hover { border-color: #4a5568; color: #4a5568; background: #f8fafc; }
.profile-done-btn { font-size: 15px; border: none; border-radius: 12px; padding: 14px 20px; background: linear-gradient(to right, #475569, #64748b); color: #fff; font-weight: 700; transition: all 0.2s; text-align: center; width: 100%; }
.profile-done-btn:hover { background: linear-gradient(to right, #334155, #475569); }
.profile-edit-selections-btn { margin-top: 12px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 16px; background: #fff; color: #64748b; font-weight: 600; transition: all 0.2s; width: 100%; text-align: center; }
.profile-edit-selections-btn:hover { border-color: #4a5568; color: #4a5568; }

/* Request An Appointment button — gold/amber */
.profile-step-request .book-now-btn { background-image: linear-gradient(to right in oklab, rgb(212, 168, 83) 0%, rgb(196, 152, 67) 100%); border: none; border-radius: 12px; padding: 0; font-size: 16px; font-weight: 700; color: #fff; width: 100%; height: 50px; transition: all 0.2s; }
.profile-step-request .book-now-btn:hover { background-image: linear-gradient(to right in oklab, rgb(196, 152, 67) 0%, rgb(180, 136, 51) 100%); font-size: 16px; }

/* v0 Customer details header */
.v0-customer-details { background: linear-gradient(to right bottom, #5b6b8a, #7b8ba8, #8b9bb8) !important; color: #fff !important; border-radius: 12px; padding: 16px 20px !important; }
.v0-customer-details a { color: #fff; text-decoration: underline; }

/* ============================================
   v0 Calendar — #v0-step2 for max specificity
   ============================================ */
#v0-step2 .ui-datepicker { border: 1px solid #e2e8f0 !important; border-radius: 20px !important; overflow: hidden !important; width: 100% !important; background: #fff !important; box-shadow: none !important; }
#v0-step2 .ui-datepicker-header { background: linear-gradient(160deg, #475569, #64748b) !important; border: none !important; border-radius: 20px 20px 0 0 !important; color: #fff !important; padding: 18px 14px !important; }
#v0-step2 .ui-datepicker-title { color: #fff !important; font-weight: 700 !important; font-size: 17px !important; }
#v0-step2 .ui-datepicker-prev, #v0-step2 .ui-datepicker-next { top: 16px !important; cursor: pointer !important; border: none !important; background: none !important; }
#v0-step2 .ui-datepicker-prev .ui-icon, #v0-step2 .ui-datepicker-next .ui-icon { background-image: none !important; text-indent: -9999px !important; overflow: hidden !important; }
#v0-step2 .ui-datepicker-prev:after { content: '‹'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; left: 10px; top: -2px; }
#v0-step2 .ui-datepicker-next:after { content: '›'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; right: 10px; top: -2px; }
#v0-step2 .ui-datepicker th { font-size: 11px !important; font-weight: 600 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 0 6px !important; border: none !important; background: none !important; }
#v0-step2 .ui-datepicker td { padding: 3px 0 !important; border: none !important; background: none !important; }
/* Date cells — base reset */
#v0-step2 td a,
#v0-step2 .ui-datepicker td a.ui-state-default,
#v0-step2 .ui-highlight .ui-state-default { text-align: center !important; border-radius: 5px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; color: #334155 !important; font-size: 14px !important; font-weight: 500 !important; }
#v0-step2 .ui-datepicker td span.ui-state-default { text-align: center !important; border-radius: 5px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; color: lab(85.1236 -0.612259 -3.7138) !important; font-size: 14px !important; }
/* Hover — must match base specificity: .ui-datepicker td a.ui-state-default */
#v0-step2 .ui-datepicker td a.ui-state-default:hover { background: lab(44.8132 -0.207394 -19.2704 / 0.1) !important; }
/* Today = gold gradient (both selectable <a> and disabled <span>) */
#v0-step2 .ui-datepicker td.ui-datepicker-today a.ui-state-default,
#v0-step2 .ui-datepicker td.ui-datepicker-today span.ui-state-default { background: linear-gradient(to right bottom in oklab, rgb(201, 169, 98) 0%, rgb(184, 153, 82) 100%) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
/* Selected non-today = slate gradient */
#v0-step2 .ui-datepicker td.ui-datepicker-current-day:not(.ui-datepicker-today) a.ui-state-default { background: linear-gradient(to right bottom in oklab, rgb(91, 107, 138) 0%, rgb(123, 139, 168) 100%) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
/* Today + Selected = gold wins */
#v0-step2 .ui-datepicker td.ui-datepicker-today.ui-datepicker-current-day a.ui-state-default,
#v0-step2 .ui-datepicker td.ui-datepicker-today.ui-datepicker-current-day span.ui-state-default { background: linear-gradient(to right bottom in oklab, rgb(201, 169, 98) 0%, rgb(184, 153, 82) 100%) !important; color: #fff !important; border: none !important; line-height: 38px !important; }
#v0-step2 .ui-datepicker .ui-state-disabled span { color: #e2e8f0 !important; }
#v0-step2 .ui-datepicker td.ui-datepicker-today.ui-state-disabled span.ui-state-default { color: #fff !important; }
#v0-step2 .ui-datepicker-calendar { border-collapse: collapse !important; width: 100% !important; }

/* ============================================
   v0 Time Slots
   ============================================ */
#v0-step2 .time-slot-date-label { display: flex; align-items: center; gap: 8px; padding-bottom: 5px; margin-bottom: 0; border-bottom: none; font-size: 15px; font-weight: 600; color: #5b6b8a; }
#v0-step2 .time-slot-date-label svg { color: #64748b; flex-shrink: 0; }
#v0-step2 .time-slots-container { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; margin-top: 14px; }
#v0-step2 .time-slot-group { margin-bottom: 10px; display: inline; }
#v0-step2 .time-slot-group:last-child { margin-bottom: 0; }
#v0-step2 .time-slot-group-label { display: block; font-size: 12px; font-weight: 700; color: #5b6b8a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; line-height: 20px; text-align: left; }
#v0-step2 .time-slot-group-label svg { width: 16px; height: 16px; color: #94a3b8; vertical-align: -3px; margin-right: 4px; }
#v0-step2 .time-slot-group-slots { display: flex; flex-wrap: wrap; gap: 8px; }
#v0-step2 .time-slot-btn { padding: 9px 18px; border-radius: 22px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
#v0-step2 .time-slot-btn:hover { opacity: 0.85; }
#v0-step2 .time-slot-btn.active { background: #475569 !important; color: #fff !important; border-color: #475569 !important; }
#v0-step2 .time-slot-btn.morning { border: 1px solid #e0d5bf; background: linear-gradient(to right, #faf5ea, #f5eedc); color: #7a6b42; }
#v0-step2 .time-slot-btn.midday { border: 1px solid #d8dce4; background: linear-gradient(to right, #f0f4f8, #e8eef4); color: #5a6474; }
#v0-step2 .time-slot-btn.afternoon { border: 1px solid #d8d2e4; background: linear-gradient(to right, #f5f3f8, #ede8f4); color: #5a5474; }

/* ============================================
   v0 Reschedule — mirror all v0-step2 styles
   ============================================ */
.v0-reschedule .ui-datepicker { border: 1px solid #e2e8f0 !important; border-radius: 20px !important; overflow: hidden !important; width: 100% !important; background: #fff !important; box-shadow: none !important; }
.v0-reschedule .ui-datepicker-header { background: linear-gradient(160deg, #475569, #64748b) !important; border: none !important; border-radius: 20px 20px 0 0 !important; color: #fff !important; padding: 18px 14px !important; }
.v0-reschedule .ui-datepicker-title { color: #fff !important; font-weight: 700 !important; font-size: 17px !important; }
.v0-reschedule .ui-datepicker-prev, .v0-reschedule .ui-datepicker-next { top: 16px !important; cursor: pointer !important; border: none !important; background: none !important; }
.v0-reschedule .ui-datepicker-prev .ui-icon, .v0-reschedule .ui-datepicker-next .ui-icon { background-image: none !important; text-indent: -9999px !important; overflow: hidden !important; }
.v0-reschedule .ui-datepicker-prev:after { content: '‹'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; left: 10px; top: -2px; }
.v0-reschedule .ui-datepicker-next:after { content: '›'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; right: 10px; top: -2px; }
.v0-reschedule .ui-datepicker th { font-size: 11px !important; font-weight: 600 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 0 6px !important; border: none !important; background: none !important; }
.v0-reschedule .ui-datepicker td { padding: 3px 0 !important; border: none !important; background: none !important; }
.v0-reschedule .ui-datepicker td a.ui-state-default { text-align: center !important; border-radius: 5px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; color: #334155 !important; font-size: 14px !important; font-weight: 500 !important; }
.v0-reschedule .ui-datepicker td span.ui-state-default { text-align: center !important; border-radius: 5px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; color: lab(85.1236 -0.612259 -3.7138) !important; font-size: 14px !important; }
.v0-reschedule .ui-datepicker td a.ui-state-default:hover { background: lab(44.8132 -0.207394 -19.2704 / 0.1) !important; }
.v0-reschedule .ui-datepicker td.ui-datepicker-today a.ui-state-default,
.v0-reschedule .ui-datepicker td.ui-datepicker-today span.ui-state-default { background: linear-gradient(to right bottom in oklab, rgb(201, 169, 98) 0%, rgb(184, 153, 82) 100%) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
.v0-reschedule .ui-datepicker td.ui-datepicker-current-day:not(.ui-datepicker-today) a.ui-state-default,
#patient_profile_id .v0-reschedule .ui-datepicker td.ui-datepicker-current-day a.ui-state-active { background: linear-gradient(to right bottom in oklab, rgb(91, 107, 138) 0%, rgb(123, 139, 168) 100%) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
.v0-reschedule .ui-datepicker td.ui-datepicker-today.ui-datepicker-current-day a.ui-state-default,
.v0-reschedule .ui-datepicker td.ui-datepicker-today.ui-datepicker-current-day span.ui-state-default { background: linear-gradient(to right bottom in oklab, rgb(201, 169, 98) 0%, rgb(184, 153, 82) 100%) !important; color: #fff !important; border: none !important; line-height: 38px !important; }
.v0-reschedule .ui-datepicker .ui-state-disabled span { color: #e2e8f0 !important; }
.v0-reschedule .ui-datepicker td.ui-datepicker-today.ui-state-disabled span.ui-state-default { color: #fff !important; }
.v0-reschedule .ui-datepicker-calendar { border-collapse: collapse !important; width: 100% !important; }
.v0-reschedule .time-slot-date-label { display: flex; align-items: center; gap: 8px; padding-bottom: 5px; margin-bottom: 0; border-bottom: none; font-size: 15px; font-weight: 600; color: #5b6b8a; }
.v0-reschedule .time-slot-date-label svg { color: #64748b; flex-shrink: 0; }
.v0-reschedule .time-slots-container { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; margin-top: 14px; }
.v0-reschedule .time-slot-group { margin-bottom: 10px; display: inline; }
.v0-reschedule .time-slot-group:last-child { margin-bottom: 0; }
.v0-reschedule .time-slot-group-label { display: block; font-size: 12px; font-weight: 700; color: #5b6b8a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; line-height: 20px; text-align: left; }
.v0-reschedule .time-slot-group-label svg { width: 16px; height: 16px; color: #94a3b8; vertical-align: -3px; margin-right: 4px; }
.v0-reschedule .time-slot-group-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.v0-reschedule .time-slot-btn { padding: 9px 18px; border-radius: 22px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
.v0-reschedule .time-slot-btn:hover { opacity: 0.85; }
.v0-reschedule .time-slot-btn.active { background: #475569 !important; color: #fff !important; border-color: #475569 !important; }
.v0-reschedule .time-slot-btn.morning { border: 1px solid #e0d5bf; background: linear-gradient(to right, #faf5ea, #f5eedc); color: #7a6b42; }
.v0-reschedule .time-slot-btn.midday { border: 1px solid #d8dce4; background: linear-gradient(to right, #f0f4f8, #e8eef4); color: #5a6474; }
.v0-reschedule .time-slot-btn.afternoon { border: 1px solid #d8d2e4; background: linear-gradient(to right, #f5f3f8, #ede8f4); color: #5a5474; }
.v0-reschedule .profile-step-card{border:none;    box-shadow: none;padding-bottom: 5px;}
.v0-reschedule .update_form{padding-bottom:0;}

/* =========================================================================
 * Lead banners (admin/new + admin/lead_control row-lead.php)
 *
 * Banners sit at the top of each lead alert block, flagging patient state:
 *   - SELF-BOOKED (green) — they booked themselves via thank-you page widget
 *   - FUTURE CONSULT BOOKED (blue) — staff booked them into a future consult
 *   - NEVER CONVERTED / NO-SHOW / CANCELLED APPOINTMENT — outcome of past appt
 *   - SELF-CALLBACK REQUESTED (purple) — they requested callback via widget
 *
 * When a lead has self_booked_appt_id set, the whole alert wrapper gets a
 * soft purple gradient background via .lead-self-booked. Only the SELF-BOOKED
 * banner itself is decorated with sparkles above it (centered).
 * ========================================================================= */

/* Whole-row highlight for self-booked leads — subtle purple gradient
   matching the SELF-CALLBACK palette, with a soft purple glow ring. */
.alert.lead-self-booked {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #ede4fd 100%) !important;
    border: 1px solid #d8b4fe !important;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.12), 0 0 0 3px rgba(139, 92, 246, 0.04) !important;
}

/* Sparkle row — decorative SVG stars placed above the SELF-BOOKED banner.
   Four 4-point stars laid out horizontally CENTERED, each at a slightly
   different size and animation phase. CSS animates color from purple to
   green in a gentle loop; the SVG fill uses currentColor so the keyframe's
   `color` change cascades through. */
.lead-sparkles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 4px;
    margin: 2px 0 6px 0;
    pointer-events: none;
}
.lead-sparkle {
    display: inline-block;
    line-height: 0;
    color: #8b5cf6;
    animation: lead-sparkle-pulse 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.35));
    transform-origin: center;
}
.lead-sparkle svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
/* Varying sizes + animation delays so the four stars feel organic, not metronomic */
.lead-sparkle--s1 { width: 12px; height: 12px; animation-delay: 0s;   }
.lead-sparkle--s2 { width: 18px; height: 18px; animation-delay: 0.4s; }
.lead-sparkle--s3 { width: 10px; height: 10px; animation-delay: 0.8s; }
.lead-sparkle--s4 { width: 14px; height: 14px; animation-delay: 1.2s; }

@keyframes lead-sparkle-pulse {
    0%, 100% {
        color: #8b5cf6;
        transform: scale(0.85) rotate(0deg);
        opacity: 0.55;
    }
    50% {
        color: #43a047;
        transform: scale(1.15) rotate(12deg);
        opacity: 1;
    }
}

/* -------------------------------------------------------------------------
 * Banner container — shared shell used by SELF-BOOKED and FUTURE CONSULT.
 * Each banner has a header row (badge + button + link) and optional meta
 * subtitle (service name + date/time) underneath.
 * ------------------------------------------------------------------------- */
.lead-banner {
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
}
.lead-banner__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lead-banner__badge {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.lead-banner__profile {
    margin-left: auto;
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
}
.lead-banner__profile:hover { text-decoration: underline; }
.lead-banner__meta {
    margin-top: 6px;
    line-height: 1.4;
}
.lead-banner__meta-service {
    font-size: 13px;
    font-weight: 600;
}
.lead-banner__meta-when {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 1px;
}
.lead-banner__actions {
    margin-top: 6px;
}

/* SELF-BOOKED variant — green */
.lead-banner--self-booked {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}
.lead-banner__badge--self-booked   { background: #43a047; }
.lead-banner__profile--self-booked { color: #1b5e20; }
.lead-banner__meta--self-booked    { color: #2e7d32; }

/* FUTURE CONSULT BOOKED variant — blue */
.lead-banner--future {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    color: #0d47a1;
}
.lead-banner__badge--future   { background: #1976d2; }
.lead-banner__profile--future { color: #0d47a1; }
.lead-banner__meta--future    { color: #1565c0; }

/* SELF-CALLBACK REQUESTED variant — purple */
.lead-banner--self-callback {
    background: #f3e8ff;
    border: 1px solid #d8b4fe;
    color: #5b21b6;
}
.lead-banner__badge--self-callback   { background: #8b5cf6; }
.lead-banner__meta--self-callback    { color: #6d28d9; }

/* SELF-CANCELLED variant — amber, shown when a self-booked appointment
   has been cancelled. Same palette as the CANCELLED APPOINTMENT banner
   for visual consistency across all "they cancelled" outcomes. Strike-through
   the service/when meta so it's obvious the info is past-state. */
.lead-banner--self-cancelled {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
}
.lead-banner__badge--self-cancelled   { background: #d97706; }
.lead-banner__profile--self-cancelled { color: #78350f; }
.lead-banner__meta--self-cancelled    { color: #92400e; }
.lead-banner__meta--self-cancelled .lead-banner__meta-service,
.lead-banner__meta--self-cancelled .lead-banner__meta-when {
    text-decoration: line-through;
    text-decoration-color: rgba(146, 64, 14, 0.45);
    text-decoration-thickness: 1px;
}

/* Mini timeline inside SELF-BOOKED / SELF-CANCELLED banners showing when
   the patient booked themselves in and (if applicable) when they cancelled.
   Each entry has a coloured dot, a short label, and the timestamp. */
.lead-mini-timeline {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
    font-size: 11px;
    line-height: 1.5;
}
.lead-mini-timeline__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.lead-mini-timeline__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.lead-mini-timeline__dot--booked    { background: #43a047; }
.lead-mini-timeline__dot--cancelled { background: #d97706; }
.lead-mini-timeline__lbl {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 90px;
}
.lead-mini-timeline__when {
    font-weight: 500;
    opacity: 0.85;
}

/* Variant-specific colouring — use darker ink against the banner background */
.lead-mini-timeline--self-booked .lead-mini-timeline__lbl    { color: #1b5e20; }
.lead-mini-timeline--self-booked .lead-mini-timeline__when   { color: #2e7d32; }
.lead-mini-timeline--self-cancelled .lead-mini-timeline__lbl  { color: #78350f; }
.lead-mini-timeline--self-cancelled .lead-mini-timeline__when { color: #92400e; }

/* Callback attempt/completed timeline variant */
.lead-mini-timeline--cb .lead-mini-timeline__lbl    { color: #5b21b6; }
.lead-mini-timeline--cb .lead-mini-timeline__when   { color: #6d28d9; }
.lead-mini-timeline__dot--attempted  { background: #d97706; }
.lead-mini-timeline__dot--completed  { background: #16a34a; }

/* MISSED CALLBACK badge — red, pulsing to draw attention */
.lead-banner__badge--missed {
    background: #dc2626;
    animation: lead-missed-pulse 2s ease-in-out infinite;
}
@keyframes lead-missed-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* COMPLETED badge — green */
.lead-banner__badge--cb-completed { background: #16a34a; }

/* Callback action buttons inside the SELF-CALLBACK banner */
.lead-banner__cb-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(91, 33, 182, 0.2);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cb-attempt-btn,
.cb-complete-btn {
    padding: 6px 16px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.cb-attempt-btn {
    background: #d97706;
    color: #fff;
}
.cb-attempt-btn:hover { background: #b45309; }
.cb-attempt-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cb-complete-btn {
    background: #16a34a;
    color: #fff;
}
.cb-complete-btn:hover { background: #15803d; }
.cb-complete-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Lead body collapse — when banners exist, the body (everything below the
   banners) is hidden by default behind a centered "+" button. Clicking the
   button reveals the body and flips the icon to "−". */
.lead-expand-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 0 0;
    line-height: 1;
}
.lead-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #f3e8ff;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    font-size: 36px;
    font-weight: 300;
    color: #8b5cf6;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lead-expand-btn:hover { background: #ede9fe; }
.lead-expand-btn.is-open { background: #e8f5e9; color: #43a047; border-color: #43a047; }
.lead-expand-btn.is-open:hover { background: #c8e6c9; }
.lead-expand-btn__icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin-top: -8px; }

/* =========================================================================
 * Inline lead phone correction (Ravi, 2026-09-15) — .lead-phone-* prefix
 * Lives behind the "+" (xpand_more) collapse, closed by default. Toggled by
 * adding/removing .is-open (never rely on the `hidden` attribute here, the
 * .lead-phone-editor display rule below would override it).
 * ========================================================================= */
.lead-phone-editor {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 420px;
    margin-top: 8px;
    padding: 8px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}
.lead-phone-editor.is-open {
    display: flex;
}
.lead-phone-editor__input {
    flex: 1 1 160px;
    min-width: 140px;
    height: 44px;
    padding: 4px 8px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #9ca3af;
    border-radius: 4px;
    font-size: 14px;
}
.lead-phone-editor__actions {
    display: flex;
    gap: 6px;
}
.lead-phone-error {
    flex-basis: 100%;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

/* Earlier phone numbers in the lead row's History panel (2026-09-29) */
.lead-phone-history {
    background: #fffbeb;
    font-size: 13px;
}
.lead-phone-history__row {
    margin-top: 4px;
}
.lead-phone-history__old {
    font-weight: 700;
    color: #92400e;
}
.lead-history-phone {
    font-weight: 400;
}
.lead-history-phone--old {
    color: #7c2d12;
    font-weight: 700;
}
.lead-history-phone__tel {
    color: inherit;
    text-decoration: underline;
}
.lead-copy-number {
    margin-left: 6px;
    vertical-align: baseline;
}
.lead-copy-number__tmp {
    position: fixed;
    left: -9999px;
    top: 0;
}

/* =========================================================================
 * Self-Booked Appointments page (/admin/self_booked)
 * All styles scoped with .sb- prefix to avoid collisions.
 * ========================================================================= */
.sb-page { padding-top: 10px; padding-bottom: 40px; }

.sb-header { margin-bottom: 20px; }
.sb-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}
.sb-subtitle { font-size: 14px; color: #64748b; margin: 0; }

/* Stats grid: 4 cols desktop, 2 cols under 991px, always 2 cols phones */
.sb-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.sb-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
}
.sb-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.sb-stat__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.3;
}
.sb-stat__num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sb-stat__pct {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
}
.sb-stat__total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.sb-stat__total--positive { color: #14532d; }
.sb-stat__total--negative { color: #7f1d1d; }
.sb-stat__total-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94a3b8;
    margin-left: 4px;
}

.sb-stat--paid       { border-left-color: #16a34a; }
.sb-stat--paid      .sb-stat__label { color: #16a34a; }
.sb-stat--paid      .sb-stat__num   { color: #14532d; }
.sb-stat--unpaid     { border-left-color: #d97706; }
.sb-stat--unpaid    .sb-stat__label { color: #d97706; }
.sb-stat--unpaid    .sb-stat__num   { color: #78350f; }
.sb-stat--noshow     { border-left-color: #dc2626; }
.sb-stat--noshow    .sb-stat__label { color: #dc2626; }
.sb-stat--noshow    .sb-stat__num   { color: #7f1d1d; }
.sb-stat--cancelled  { border-left-color: #6b7280; }
.sb-stat--cancelled .sb-stat__label { color: #6b7280; }
.sb-stat--cancelled .sb-stat__num   { color: #1f2937; }

.sb-stats__footnote {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 26px;
}

/* Section blocks */
.sb-section { margin-bottom: 28px; }
.sb-section__title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
}

/* Upcoming sub-group (Today / Tomorrow / In 2 Days / Later) */
.sb-group { margin-bottom: 18px; }
.sb-group:last-child { margin-bottom: 0; }
.sb-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 2px;
}
.sb-group__label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #e2e8f0;
    color: #475569;
}
.sb-group__label--today     { background: #fef3c7; color: #78350f; }
.sb-group__label--tomorrow  { background: #dbeafe; color: #1e40af; }
.sb-group__label--in_2_days { background: #e0e7ff; color: #3730a3; }
.sb-group__label--later     { background: #f1f5f9; color: #64748b; }
.sb-group__count {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

/* Collapsible Past Bookings section — header is a full-width button */
.sb-past-section { margin-bottom: 40px; }
.sb-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 0.15s, box-shadow 0.15s;
}
.sb-collapse-header:hover { background: #f8fafc; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); }
.sb-collapse-header__title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-collapse-header__caret {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.2s;
}
.sb-collapse-header.is-open .sb-collapse-header__caret { transform: rotate(180deg); }
.sb-collapse-body { margin-top: 12px; }

/* Card wrapper around the table (desktop). On mobile the border moves
   down to individual cards (the table converts to block layout). */
.sb-table-wrapper {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.sb-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: auto;
}
.sb-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 11px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}
.sb-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #0f172a;
    line-height: 1.5;
}
.sb-table .sb-main-row:last-child > td { border-bottom: 0; }

.sb-td-num { text-align: right; white-space: nowrap; }
.sb-th-actions { width: 150px; }

/* Desktop/mobile visibility helpers */
.sb-desktop-only { display: inline; }
.sb-mobile-only  { display: none; }

/* Content helpers — single-line inline layout on desktop.
   .sb-cell-inner wraps multi-element cell content so mobile flex has a
   single content child to align right. */
.sb-cell-inner { display: inline-flex; align-items: center; gap: 8px; }

.sb-service { font-weight: 600; color: #0f172a; white-space: nowrap; }
.sb-patient { font-weight: 600; color: #0f172a; }
.sb-phone   { font-size: 12px; color: #2563eb; text-decoration: none; white-space: nowrap; }
.sb-phone:hover { text-decoration: underline; }

.sb-appt-cell  { white-space: nowrap; }
.sb-appt-when  { display: inline-flex; align-items: baseline; gap: 6px; }
.sb-appt-date  { font-weight: 600; }
.sb-appt-time  { font-size: 12px; color: #64748b; }

.sb-muted      { color: #94a3b8; }
.sb-empty      { color: #94a3b8; padding: 24px 14px !important; }
.sb-plan-cell  { max-width: 200px; font-size: 12px; color: #475569; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-profile-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
}
.sb-profile-link:hover { text-decoration: underline; }

/* Billing — compact single-line "£paid / £due" inline display */
.sb-billing-cell { white-space: nowrap; text-align: right; min-width: 90px; font-size: 12px; }
.sb-billing-inline { display: inline-flex; align-items: baseline; gap: 4px; }
.sb-billing__paid { font-weight: 600; color: #94a3b8; }
.sb-billing__paid.is-positive { color: #14532d; }
.sb-billing__sep  { color: #cbd5e1; font-weight: 400; }
.sb-billing__due  { font-weight: 600; color: #0f172a; }

/* Actions column — Profile link + Logs toggle inline on desktop */
.sb-actions-cell { white-space: nowrap; }
.sb-actions-wrap {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.sb-logs-toggle {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.15s, border-color 0.15s;
}
.sb-logs-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }
.sb-logs-toggle--on { background: #0f172a; color: #fff; border-color: #0f172a; }
.sb-logs-toggle--on:hover { background: #1e293b; border-color: #1e293b; }
.sb-logs-toggle__caret { display: inline-block; font-size: 9px; margin-left: 2px; }

/* Logs expansion row (desktop) — full-width dashed-top panel */
.sb-logs-row { display: none; }
.sb-logs-row.is-open { display: table-row; }
.sb-logs-row > td {
    background: #f8fafc;
    border-top: 1px dashed #cbd5e1 !important;
    padding: 16px 22px !important;
}
.sb-logs-panel { font-size: 12px; color: #475569; line-height: 1.75; }
.sb-logs-panel__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 10px;
}

/* Timeline list inside the logs panel — vertical line with dots.
   Each entry has two lines: when (bold, dark) + log text (muted, smaller). */
.sb-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    position: relative;
}
.sb-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #cbd5e1;
}
.sb-timeline__item {
    position: relative;
    padding: 6px 0 10px 0;
    line-height: 1.4;
}
.sb-timeline__item:last-child { padding-bottom: 0; }
.sb-timeline__item::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2563eb;
    box-shadow: 0 0 0 2px #f8fafc;
}
.sb-timeline__when {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.sb-timeline__log {
    font-size: 12px;
    color: #64748b;
}

/* Row tints — applied to each cell on desktop (tr background doesn't
   paint through borders) */
.sb-main-row.sb-row--today     > td { background: #fffbeb; }
.sb-main-row.sb-row--cancelled > td { background: #fef2f2; color: #7f1d1d; }
.sb-main-row.sb-row--paid      > td { background: #f0fdf4; }
.sb-main-row.sb-row--unpaid    > td { background: #fffbeb; }
.sb-main-row.sb-row--noshow    > td { background: #fef2f2; }

.sb-outcome-cell { white-space: nowrap; }

/* Outcome badges */
.sb-outcome-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sb-outcome-badge--paid      { background: #dcfce7; color: #14532d; }
.sb-outcome-badge--unpaid    { background: #fef3c7; color: #78350f; }
.sb-outcome-badge--noshow    { background: #fee2e2; color: #7f1d1d; }
.sb-outcome-badge--cancelled { background: #e5e7eb; color: #1f2937; }

/* Verified / Not Verified toggle (Upcoming table) */
.sb-confirm-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    line-height: 1.6;
    transition: background 0.15s;
}
.sb-confirm-btn--on  { background: #16a34a; color: #fff; }
.sb-confirm-btn--on:hover { background: #15803d; }
.sb-confirm-btn--off { background: #dc2626; color: #fff; }
.sb-confirm-btn--off:hover { background: #b91c1c; }

/* -------------------------------------------------------------------------
 * Responsive — Tablet (<=991px) — 2-col stats grid
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .sb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
 * Responsive — Mobile (<=768px)
 *
 * Each card shows only 2 lines by default:
 *   Line 1: (outcome pill, past only) · time · service
 *   Line 2: patient · phone  +  [verified] [expand ▾]
 *
 * Plan / Billing / Profile + Booking Timeline all reveal when the card is
 * expanded via the .is-mobile-expanded class (toggled by the ▾ button).
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sb-desktop-only { display: none !important; }
    .sb-mobile-only  { display: block; }

    .sb-stat__num { font-size: 26px; }
    .sb-stat { padding: 12px 14px; }

    /* Wrapper loses its own border/bg — cards provide their own */
    .sb-table-wrapper {
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        border-radius: 0;
    }
    .sb-table,
    .sb-table thead,
    .sb-table tbody,
    .sb-table tr,
    .sb-table td {
        display: block;
        width: 100%;
    }
    .sb-table thead { display: none; }

    /* Each main row becomes a card */
    .sb-main-row {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    /* Hide cells whose content is duplicated inside the mobile summary.
       Also hide plan/billing/actions by default — shown only when expanded. */
    .sb-main-row > .sb-cell--outcome,
    .sb-main-row > .sb-cell--patient,
    .sb-main-row > .sb-cell--appt,
    .sb-main-row > .sb-cell--plan,
    .sb-main-row > .sb-cell--billing,
    .sb-main-row > .sb-cell--actions { display: none; }

    /* The service td becomes a full-width container for the mobile summary */
    .sb-main-row > .sb-cell--service {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        display: block;
    }

    /* Row tints apply to the whole card on mobile */
    .sb-main-row.sb-row--today     { background: #fffbeb; }
    .sb-main-row.sb-row--cancelled { background: #fef2f2; }
    .sb-main-row.sb-row--paid      { background: #f0fdf4; border-color: #bbf7d0; }
    .sb-main-row.sb-row--unpaid    { background: #fffbeb; border-color: #fde68a; }
    .sb-main-row.sb-row--noshow    { background: #fef2f2; border-color: #fecaca; }

    /* Mobile summary — 2-line compact layout */
    .sb-mobile-summary { padding: 12px 14px; }
    .sb-mobile-line {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .sb-mobile-line--1 {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        margin-bottom: 6px;
    }
    .sb-mobile-line--1 .sb-outcome-badge { flex-shrink: 0; }
    .sb-mobile-time    { font-weight: 700; color: #0f172a; flex-shrink: 0; }
    .sb-mobile-sep     { color: #cbd5e1; font-weight: 400; flex-shrink: 0; }
    .sb-mobile-service {
        color: #334155;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
    }
    .sb-mobile-line--2 {
        justify-content: space-between;
        gap: 10px;
    }
    .sb-mobile-who {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }
    .sb-mobile-patient {
        font-weight: 600;
        color: #0f172a;
        font-size: 13px;
        flex-shrink: 0;
    }
    .sb-mobile-phone {
        font-size: 12px;
        color: #2563eb;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .sb-mobile-end {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .sb-mobile-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        color: #475569;
        transition: background 0.15s, border-color 0.15s, transform 0.2s;
    }
    .sb-mobile-expand:hover { background: #f1f5f9; border-color: #94a3b8; }
    .sb-mobile-expand__caret { font-size: 11px; display: inline-block; transition: transform 0.2s; }
    .sb-mobile-expand.is-open .sb-mobile-expand__caret { transform: rotate(180deg); }

    /* When expanded, reveal plan / billing / actions as stacked rows */
    .sb-main-row.is-mobile-expanded > .sb-cell--plan,
    .sb-main-row.is-mobile-expanded > .sb-cell--billing,
    .sb-main-row.is-mobile-expanded > .sb-cell--actions {
        display: block;
        padding: 10px 14px !important;
        border-top: 1px solid #f1f5f9 !important;
        background: transparent !important;
        color: #0f172a !important;
    }
    /* Plan + Billing inherit their text-align from the desktop rules —
       force left alignment on mobile since we're no longer balancing a label */
    .sb-main-row.is-mobile-expanded > .sb-cell--plan,
    .sb-main-row.is-mobile-expanded > .sb-cell--billing { text-align: left; }
    .sb-main-row.is-mobile-expanded .sb-plan-cell {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        font-size: 13px;
    }
    .sb-main-row.is-mobile-expanded .sb-billing-cell { min-width: 0; }
    .sb-main-row.is-mobile-expanded .sb-billing-cell::before,
    .sb-main-row.is-mobile-expanded .sb-plan-cell::before {
        /* Lightweight inline prefix for clarity when expanded */
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #94a3b8;
        margin-right: 8px;
    }
    .sb-main-row.is-mobile-expanded .sb-billing-cell::before { content: 'Billing'; }
    .sb-main-row.is-mobile-expanded .sb-plan-cell::before { content: 'Plan'; }

    /* Actions row: Logs toggle and Profile link both visible when expanded.
       Logs on the left, Profile on the right. */
    .sb-main-row.is-mobile-expanded > .sb-cell--actions {
        padding: 12px 14px !important;
    }
    .sb-main-row .sb-actions-wrap {
        flex-direction: row;
        gap: 8px;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .sb-main-row .sb-profile-link {
        font-size: 13px;
        padding: 6px 14px;
        border: 1px solid #bfdbfe;
        border-radius: 6px;
        background: #eff6ff;
        order: 2; /* right side */
    }
    .sb-main-row .sb-profile-link:hover { background: #dbeafe; text-decoration: none; }
    .sb-main-row .sb-logs-toggle {
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 6px;
        order: 1; /* left side */
    }

    /* Booking Timeline — only opens when the user clicks the Logs button
       (never auto-opens with the mobile expand arrow).
       Higher-specificity selector to beat .sb-table tr { display: block } above. */
    .sb-table tr.sb-logs-row {
        display: none;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-top: 1px dashed #cbd5e1;
        border-radius: 0 0 10px 10px;
        margin-top: -10px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .sb-table tr.sb-logs-row.is-open { display: block; }
    .sb-logs-row > td {
        display: block;
        padding: 14px 16px !important;
        background: transparent !important;
        border: 0 !important;
    }
    .sb-logs-row > td::before { display: none; }

    /* When the timeline is open under a mobile card, flatten the card's
       bottom corners so the timeline attaches seamlessly. Uses :has() so
       it only triggers when the very next .sb-logs-row is open. */
    .sb-main-row.is-mobile-expanded:has(+ .sb-logs-row.is-open) {
        border-radius: 10px 10px 0 0;
        border-bottom: 0;
        margin-bottom: 0;
        box-shadow: none;
    }
}

/* Phones — denser stats + summary lines */
@media (max-width: 480px) {
    .sb-stat { padding: 11px 12px; }
    .sb-stat__label { font-size: 10px; margin-bottom: 6px; }
    .sb-stat__num { font-size: 24px; }
    .sb-stat__pct { font-size: 12px; }

    .sb-mobile-line--1 { font-size: 13px; }
    .sb-mobile-line--2 { gap: 8px; }
    .sb-mobile-patient { font-size: 12px; }
    .sb-mobile-phone { font-size: 11px; }
}

/* ===== Payment Agreement (T-178) ===== */

/* Admin record view wrapper */
.pa-view-wrap { padding: 16px 24px 48px 24px; }
.pa-page-title { margin: 4px 0 6px 0; font-size: 22px; }
.pa-breadcrumb { margin: 0 0 20px 0; color: #6b7280; font-size: 13px; }
.pa-breadcrumb a { color: #0d6efd; text-decoration: none; }
.pa-breadcrumb a:hover { text-decoration: underline; }
.pa-muted { color: #6b7280; }
.pa-muted-sm { color: #94a3b8; font-size: 11px; }
.pa-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.pa-field { margin-bottom: 12px; }

/* View-page header */
.pa-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 14px;
}
.pa-view-stamps { padding-top: 6px; }
.pa-meta-line { color: #6b7280; font-size: 13px; margin: 4px 0 0 0; }
.pa-signed-stamp {
    border: 2px solid #198754; color: #198754;
    padding: 4px 14px; border-radius: 4px;
    display: inline-block; font-size: 13px; font-weight: 700;
    letter-spacing: 2px; transform: rotate(-4deg);
}
.pa-void-stamp {
    border: 2px solid #dc3545; color: #dc3545;
    padding: 4px 14px; border-radius: 4px;
    display: inline-block; font-size: 13px; font-weight: 700;
    letter-spacing: 2px; transform: rotate(-4deg);
}
.pa-draft-banner { margin-bottom: 18px; }
.pa-addr-label { display: inline-block; margin-top: 6px; }

/* Pills */
.pa-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pa-pill-existing { background: #e0f2fe; color: #075985; }
.pa-pill-new      { background: #fff7ed; color: #9a3412; }
.pa-pill-signed   { background: #d1fae5; color: #065f46; }
.pa-pill-draft    { background: #e5e7eb; color: #374151; }
.pa-pill-voided   { background: #fee2e2; color: #991b1b; }

/* Panels shared by admin view */
.pa-panel {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin: 14px 0;
    background: #fff;
    overflow: hidden;
}
.pa-panel-head {
    background: #f8fafc;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 14px;
    flex-wrap: wrap;
}
.pa-panel-head .pa-muted { font-size: 12px; }
.pa-panel-body { padding: 14px; font-size: 13px; }
.pa-panel-flush { padding: 0; }

/* Service item (shared by admin view + iPad sign) */
.pa-tp-service-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.pa-tp-service-item:last-child { border-bottom: none; }
.pa-tx-check { display: flex; align-items: center; justify-content: center; }
.pa-check-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #d1fae5; color: #065f46;
    font-size: 14px; font-weight: 700;
}
.pa-tx-body { min-width: 0; }
.pa-tx-title { font-weight: 600; color: #111827; }
.pa-tx-sub { font-size: 12px; margin-top: 2px; }
.pa-tx-right { font-weight: 700; font-size: 14px; color: #111827; }

/* View-page schedule table */
.pa-view-sched { margin: 0; }
.pa-view-sched th {
    background: #f8fafc; color: #6b7280; font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.pa-col-num { width: 50px; }
.pa-col-amount { width: 130px; text-align: right; }
.pa-sched-breakdown { font-size: 12px; }

/* Signature image */
.pa-sig-image { max-height: 150px; max-width: 400px; display: block; }
.pa-sig-caption { font-size: 12px; margin: 6px 0 0 0; }

/* Toolbar + void panel */
.pa-toolbar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pa-view-toolbar { }
.pa-void-panel {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    padding: 14px;
    margin-top: 10px;
    display: none;
}
.pa-void-panel-open { display: block; }
.pa-void-reason { margin-bottom: 10px; }
.pa-void-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- iPad / public signing page ---- */
.pa-ipad-body {
    background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%);
    margin: 0;
    min-height: 100vh;
    padding: 30px 16px 40px 16px;
}
.pa-ipad-shell {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}
.pa-ipad-logo { text-align: center; margin-bottom: 18px; }
.pa-ipad-logo img { max-height: 48px; width: auto; display: inline-block; }
.pa-ipad-h1 { font-size: 26px; margin: 0 0 4px 0; text-align: center; font-weight: 700; color: #111827; }
.pa-ipad-sub { color: #6b7280; font-size: 14px; margin: 0 0 22px 0; text-align: center; }
.pa-section-h3 { font-size: 15px; margin: 22px 0 6px 0; font-weight: 700; color: #111827; }
.pa-ipad-hint { color: #6b7280; font-size: 12px; margin: 0 0 10px 0; }
.pa-readonly { background: #f8fafc; color: #374151; }

/* Summary card (services on iPad sign page) */
.pa-summary-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    margin: 18px 0;
}
.pa-summary-title {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

/* Pay schedule card (iPad sign page) */
.pa-pay-schedule {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    margin: 18px 0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pa-pay-schedule-head {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.pa-pay-schedule-title { font-size: 14px; font-weight: 600; color: #111827; }
.pa-pay-schedule-meta  { font-size: 12px; color: #6b7280; margin-top: 2px; }
.pa-pay-schedule-total { text-align: right; flex-shrink: 0; }
.pa-pay-schedule-total-label {
    display: block; font-size: 10px; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.pa-pay-schedule-total-value {
    display: block; font-size: 22px; font-weight: 700; color: #111827; line-height: 1.1;
}
.pa-pay-schedule-list { padding: 4px 0; }
.pa-pay-schedule-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    padding: 12px 20px;
    gap: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.pa-pay-schedule-row:last-child { border-bottom: none; }
.pa-pay-schedule-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: #e0f2fe; color: #075985;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pa-pay-schedule-date-main { font-size: 15px; font-weight: 600; color: #111827; }
.pa-pay-schedule-date-sub  { font-size: 12px; color: #6b7280; margin-top: 1px; }
.pa-pay-schedule-amount    { font-size: 17px; font-weight: 700; color: #111827; }

/* Terms / signature pad */
.pa-terms {
    font-size: 13px;
    color: #57431b;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 16px 0;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.55;
}
.pa-sig-pad {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 8px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.pa-sig-pad canvas {
    width: 100%; height: 100%; display: block; touch-action: none;
}
.pa-sig-clear {
    position: absolute; top: 8px; right: 12px;
    font-size: 13px; color: #0d6efd; text-decoration: none;
    background: rgba(255,255,255,0.9);
    padding: 2px 8px; border-radius: 4px; z-index: 3;
}
.pa-sig-clear:hover { text-decoration: underline; color: #0d6efd; }
.pa-ipad-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    margin-top: 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.pa-ipad-toolbar-hint { color: #6b7280; font-size: 13px; }
.pa-sign-submit { padding: 12px 26px; font-weight: 700; }
.pa-sign-error { margin: 12px 0; }

/* Thank-you / expired */
.pa-ipad-thankyou {
    padding: 36px 40px 40px 40px;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.pa-ty-brand { margin-bottom: 24px; }
.pa-ty-brand img { height: 48px; width: auto; }
.pa-ty-check-wrap {
    width: 96px; height: 96px; border-radius: 50%;
    background: #d1fae5;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(5,150,105,0.15);
}
.pa-ty-check-wrap svg { width: 52px; height: 52px; }
.pa-ty-expired-icon { background: #fee2e2; box-shadow: 0 4px 14px rgba(220,53,69,0.15); }
.pa-ty-title {
    font-size: 30px; font-weight: 700; color: #111827;
    margin: 0 0 8px 0; letter-spacing: -0.3px;
}
.pa-ty-sub {
    font-size: 15px; color: #6b7280;
    margin: 0 0 26px 0; max-width: 440px; line-height: 1.5;
}
.pa-ty-summary {
    width: 100%; max-width: 460px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 6px 22px;
    margin-bottom: 22px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pa-ty-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid #eef0f2; font-size: 14px;
}
.pa-ty-summary-row:last-child { border-bottom: none; }
.pa-ty-summary-label { color: #6b7280; font-weight: 500; }
.pa-ty-summary-value { color: #111827; font-weight: 600; }
.pa-ty-summary-value strong { font-weight: 700; }
.pa-ty-return {
    width: 100%; max-width: 480px;
    background: #fff7ed; border: 2px solid #fdba74; border-radius: 14px;
    padding: 20px 24px;
    display: flex; align-items: center; gap: 18px;
    margin-top: 10px; text-align: left;
}
.pa-ty-return-icon {
    width: 52px; height: 52px; background: #f97316; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(249,115,22,0.25);
}
.pa-ty-return-icon svg { width: 26px; height: 26px; }
.pa-ty-return-title { font-size: 18px; font-weight: 700; color: #7c2d12; line-height: 1.2; }
.pa-ty-return-sub { font-size: 14px; color: #9a3412; margin-top: 3px; }
.pa-ipad-expired { min-height: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 60px; }

/* patient_history.php — Create Agreement row + Agreements to pay list
   Designed to sit inside the teal "Payment Plan" card. Matches the
   light-green sub-card vocabulary used by .multi-sched-date-row. */
.pa-new-btn-row {
    margin-top: 14px;
    margin-bottom: 4px;
}
.pa-new-btn-label {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    margin: 0 0 8px 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
/* Single-button flow (default): match the Create Payment Plan button's
   width + height, with a slightly darker gradient tint to distinguish it. */
.pa-new-btn-row .pa-company-btn {
    background: linear-gradient(-23deg, #7e43d4 30%, #3e83bf 100%);
}
/* Multi-company flow (rare — only if get_companies_for_location returns >1):
   side-by-side, equal-width buttons inside a flex wrapper. */
.pa-new-btn-row-has-companies {
    display: flex;
    gap: 6px;
    justify-content: stretch;
}
.pa-new-btn-row-has-companies .pa-company-btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.pa-agreements-list {
    margin-top: 16px;
}
.pa-agreements-list h5 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-align: center;
    opacity: 0.85;
}
.pa-agreements-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/* Mirror .scheduled-payments-list ul li styling used by the TP cards above. */
.pa-agreements-list ul li {
    background-color: #d9ffac;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 8px;
    padding: 10px 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pa-agreements-list ul li:last-child { margin-bottom: 0; }

/* Inner date + amount row — matches .scheduled-payments-list spans exactly. */
.pa-agreements-list ul li .sp-pay-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pa-agreements-list ul li .sp-pay-main > span:first-child {
    font-size: 13px;
    color: #555;
    font-weight: 500;
    flex: 1;
}
.pa-agreements-list ul li .sp-pay-main > span:nth-child(2) {
    font-size: 14px;
    font-weight: 700;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 2px 10px;
    border-radius: 12px;
    min-width: 70px;
    text-align: center;
}

@media (max-width: 640px) {
    .pa-ipad-shell { padding: 18px 16px; }
    .pa-pay-schedule-head { flex-direction: column; align-items: flex-start; }
}

.pa-delete-warning {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
}

.pa-dob-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px;
    gap: 8px;
}
.pa-dob-select {
    height: auto;
    padding: 8px 10px;
    font-size: 14px;
}
@media (max-width: 480px) {
    .pa-dob-row { grid-template-columns: 1fr; }
}

.pa-company-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.55;
}
.pa-company-footer-name {
    font-weight: 700;
    color: #111827;
    font-size: 13px;
    margin-bottom: 4px;
}
.pa-company-footer-line { margin: 2px 0; }
.pa-company-footer-reg {
    margin-top: 6px;
    font-size: 10.5px;
    color: #94a3b8;
}

/* ===================================================================
   Commission dashboard + lock UI (T-179, 2026-05-01)
   =================================================================== */
.cm-dash { padding-bottom: 80px; }
.cm-title { margin: 16px 0 24px 0; }
.cm-flash { margin: 12px 0; }

.cm-filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: #f7f9fc;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.cm-filter { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.cm-filter label { font-size: 12px; color: #666; font-weight: 600; margin: 0; }
.cm-filter--actions { flex-direction: row; gap: 8px; }

.cm-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.cm-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 4px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.cm-card:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.06); text-decoration: none; color: inherit; }
.cm-card--active { background: #f9fafb; box-shadow: 0 0 0 2px rgba(99,102,241,0.35) inset; }
.cm-card--pending           { border-left-color: #f59e0b; }
.cm-card--approved-awaiting { border-left-color: #6366f1; }
.cm-card--ready             { border-left-color: #10b981; }
.cm-card--paid-out          { border-left-color: #14b8a6; }
.cm-card--denied            { border-left-color: #ef4444; }
.cm-card__label  { font-size: 12px; text-transform: uppercase; color: #6b7280; letter-spacing: 0.5px; font-weight: 600; }
.cm-card__count  { font-size: 28px; font-weight: 700; color: #111827; line-height: 1.1; margin-top: 4px; }
.cm-card__amount { font-size: 13px; color: #6b7280; margin-top: 2px; }
.cm-scope-note   { font-size: 12px; color: #6b7280; margin: 0 0 24px 0; }

.cm-empty {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 32px;
    text-align: center;
    color: #6b7280;
}

.cm-bulk {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f7f9fc;
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.cm-bulk__select-all { margin: 0; font-weight: 600; cursor: pointer; }
.cm-bulk__select-all input { margin-right: 6px; }
.cm-bulk__count { color: #6b7280; font-size: 13px; margin-left: auto; }

.cm-group { margin-bottom: 24px; }
.cm-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eef2ff;
    color: #312e81;
    padding: 8px 14px;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
}
.cm-group__amount { font-weight: 400; font-size: 13px; }
.cm-group__topay { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; color: #047857; }

.cm-table { margin: 0; font-size: 14px; }
.cm-table th { background: #f9fafb; font-weight: 600; color: #374151; }
.cm-th-check   { width: 36px; text-align: center; }
.cm-th-id      { width: 60px; }
.cm-th-actions { width: 200px; }
.cm-id         { color: #6b7280; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cm-num        { text-align: right; white-space: nowrap; }
.cm-actions    { white-space: nowrap; }
.cm-actions__none { color: #9ca3af; }

.cm-row--approved-awaiting td { background: rgba(99, 102, 241, 0.04); }
.cm-row--ready td             { background: rgba(16, 185, 129, 0.06); }
.cm-row--paid-out td          { background: rgba(20, 184, 166, 0.04); color: #6b7280; }
.cm-row--denied td            { background: rgba(239, 68, 68, 0.04); }
.cm-row-reason td             { background: #fef2f2; font-size: 12px; color: #991b1b; }

.cm-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}
.cm-status--pending           { background: #fef3c7; color: #92400e; }
.cm-status--approved-awaiting { background: #e0e7ff; color: #3730a3; }
.cm-status--ready             { background: #d1fae5; color: #065f46; }
.cm-status--paid-out          { background: #ccfbf1; color: #115e59; }
.cm-status--denied            { background: #fee2e2; color: #991b1b; }
.cm-status__sub               { font-size: 11px; color: #6b7280; margin-top: 2px; }
.cm-approval                  { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.cm-approval--yes             { background: #dcfce7; color: #166534; }
.cm-approval--no              { background: #fee2e2; color: #991b1b; }

.cm-paid-partial {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    border-radius: 3px;
}

.cm-share { white-space: nowrap; }
.cm-share-form { margin: 0; }
.cm-share-select {
    display: inline-block;
    width: auto;
    min-width: 70px;
    padding: 2px 4px;
    height: auto;
    font-size: 13px;
    font-weight: 600;
}
.cm-share-readonly {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.cm-share__eligible {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.ce-percent-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.ce-percent-select { margin-bottom: 8px; }

/* Inline share-edit form on admin dashboard */
.cm-share-edit-form td { background: #eef2ff; padding: 12px; }
.cm-share-edit-form__inner {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cm-share-edit-form__inner label { font-weight: 600; color: #312e81; margin: 0 8px 0 0; min-width: 130px; }
.cm-share-edit-form__inner select,
.cm-share-edit-form__inner input[type=number] { flex: 1 1 160px; min-width: 140px; }
.cm-share-edit-btn { margin-top: 6px; padding: 1px 8px; font-size: 11px; }
.cm-share-amount-input { display: block; width: 100%; }

.cm-deny-form td { background: #fef2f2; padding: 12px; }
.cm-deny-form__inner { display: flex; gap: 8px; align-items: center; }
.cm-deny-form__inner label { font-weight: 600; color: #991b1b; margin: 0; min-width: 130px; }
.cm-deny-form__inner input[type=text] { flex: 1; }
.cm-deny-form[hidden],
.cm-share-edit-form[hidden] { display: none !important; }

@media (max-width: 1100px) {
    .cm-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .cm-dash { padding-left: 8px; padding-right: 8px; }

    /* Filter bar stacks */
    .cm-filters { flex-direction: column; padding: 12px; gap: 10px; }
    .cm-filter, .cm-filter--actions { width: 100%; min-width: 0; }
    .cm-filter--actions .btn { flex: 1; }

    /* Summary cards: 2 per row, condensed */
    .cm-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cm-card { padding: 12px 14px; }
    .cm-card__count { font-size: 22px; }
    .cm-card__amount { font-size: 12px; }

    /* Bulk action bar wraps */
    .cm-bulk { flex-wrap: wrap; }
    .cm-bulk .btn { flex: 1 1 auto; }
    .cm-bulk__count { width: 100%; text-align: right; }

    /* Group header keeps its layout but reflows */
    .cm-group__header { flex-wrap: wrap; gap: 4px; }
    .cm-group__amount { font-size: 12px; }

    /* TABLE → CARD layout */
    .cm-table thead { display: none; }
    .cm-table, .cm-table tbody { display: block; width: 100%; }
    .cm-table tr[hidden] { display: none !important; }
    .cm-table tr:not([hidden]) {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 12px 14px;
    }
    .cm-table tr.cm-row--paid-out          { border-left: 3px solid #14b8a6; }
    .cm-table tr.cm-row--ready             { border-left: 3px solid #10b981; }
    .cm-table tr.cm-row--approved-awaiting { border-left: 3px solid #6366f1; }
    .cm-table tr.cm-row--pending           { border-left: 3px solid #f59e0b; }
    .cm-table tr.cm-row--denied            { border-left: 3px solid #ef4444; }
    .cm-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 4px 0;
        border: none;
        text-align: right;
    }
    .cm-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 12px;
        text-transform: uppercase;
        flex-shrink: 0;
        text-align: left;
    }
    .cm-table td[data-label=""] { display: block; padding-top: 8px; }
    .cm-table td[data-label=""]:before { content: none; }
    .cm-table td.cm-th-check { padding-bottom: 8px; }
    .cm-table td.cm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .cm-table td.cm-actions .btn { flex: 1; }
    .cm-table td.cm-actions__none { display: none; }

    /* Inline forms (deny / share-edit) take full width inside the card */
    .cm-deny-form td,
    .cm-share-edit-form td {
        display: block;
        text-align: left;
        padding: 8px;
        margin-top: 8px;
    }
    .cm-deny-form td:before,
    .cm-share-edit-form td:before { content: none; }
    .cm-deny-form__inner,
    .cm-share-edit-form__inner { flex-direction: column; align-items: stretch; gap: 6px; }
    .cm-deny-form__inner label,
    .cm-share-edit-form__inner label { min-width: 0; }
    .cm-deny-form__inner .btn,
    .cm-share-edit-form__inner .btn { width: 100%; }
    /* Reset flex sizing so inputs / selects keep their natural height in column-flex */
    .cm-deny-form__inner select,
    .cm-deny-form__inner input,
    .cm-share-edit-form__inner select,
    .cm-share-edit-form__inner input { flex: 0 1 auto; min-width: 0; }

    /* Reason row in the denied bucket */
    .cm-row-reason td { display: block; text-align: left; padding: 6px 8px; }
    .cm-row-reason td:before { content: none; }

    /* Scope note + share badge tweaks */
    .cm-scope-note { font-size: 11px; }
    .cm-share-readonly { padding: 1px 6px; font-size: 12px; }
}
@media (max-width: 420px) {
    .cm-summary { grid-template-columns: 1fr; }
}

/* Commission payment requests (2026-09-28): staff send one request, Ravi approves all or part, then pays */
.cm-summary--four { grid-template-columns: repeat(4, 1fr); }
.cm-card--review  { border-left-color: #f59e0b; }
.cm-card--topay   { border-left-color: #10b981; }
.cm-card--history { border-left-color: #14b8a6; }
.cm-card--claims  { border-left-color: #9ca3af; }
.cm-subtitle { margin: 28px 0 8px 0; font-weight: 700; }
.cm-row--muted td { color: #9ca3af; }
.cm-batch-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 0 0;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-top: 0;
}
.cm-batch-actions__count { font-size: 13px; color: #6b7280; margin-right: auto; }
.cm-paid-day { margin-bottom: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; }
.cm-paid-day[open] { padding-bottom: 8px; }
.cm-paid-day__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    padding: 12px 16px;
    cursor: pointer;
}
.cm-paid-day__date { font-weight: 700; font-size: 15px; }
.cm-paid-day__meta { color: #6b7280; font-size: 13px; }
.cm-paid-day .cm-group { margin: 8px 16px 16px 16px; }
@media (max-width: 767px) {
    .cm-summary--four { grid-template-columns: repeat(2, 1fr); }
    .cm-batch-actions { margin-top: 0; }
    .cm-batch-actions__count { width: 100%; }
    .cm-batch-actions .btn { flex: 1; }
    .cm-paid-day .cm-group { margin: 8px; }
}

/* Plan lock UI on consultation_environment + patient_history create form */
.ce-lock-row {
    margin: 10px 0;
    padding: 8px 10px;
    background: #fef9c3;
    border-radius: 4px;
    border-left: 3px solid #ca8a04;
}
.ce-lock-toggle { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 500; color: #713f12; }
.ce-lock-toggle input { margin: 0; }

.ce-locked-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 4px;
    color: #713f12;
}
.ce-locked-banner__icon { font-size: 20px; }
.ce-locked-banner__text { font-size: 14px; }

.ce-lock-toggle-form { margin-top: 12px; }
.ce-lock-toggle-btn { width: 100%; }
.ce-lock-toggle-btn--admin {
    width: 100%;
    background: #ec4899;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ce-lock-toggle-btn--admin:hover { background: #db2777; }
.ce-lock-toggle-btn--unlock        { background: #10b981; }
.ce-lock-toggle-btn--unlock:hover  { background: #059669; }

/* Public commission action result page */
.cma-body {
    background: #f3f4f6;
    margin: 0;
    padding: 40px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    box-sizing: border-box;
}
.cma-card {
    background: #fff;
    max-width: 480px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.cma-headline { margin: 0 0 20px 0; font-size: 22px; }
.cma-headline--approved { color: #065f46; }
.cma-headline--denied   { color: #991b1b; }
.cma-headline--invalid  { color: #6b7280; }
.cma-meta { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.cma-meta td { padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.cma-meta td:first-child { color: #6b7280; font-weight: 600; width: 40%; }
.cma-deny-form label { display: block; font-weight: 600; margin: 16px 0 6px 0; }
.cma-reason { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: inherit; }
.cma-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 16px;
    margin-right: 8px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.cma-btn--approve   { background: #28a745; color: #fff; }
.cma-btn--deny      { background: #dc3545; color: #fff; }
.cma-btn--cancel    { background: #e5e7eb; color: #111827; }
.cma-btn--dashboard { background: #6366f1; color: #fff; }
.cma-extra { color: #6b7280; margin: 16px 0; }
.cma-percent {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 6px;
}
.cma-hint { color: #6b7280; font-size: 13px; margin: 0 0 12px 0; }
.cma-approve-form label { display: block; font-weight: 600; margin: 16px 0 6px 0; }

/* ============================================
   Self-Booked Today Panel (calendar page)
   ============================================ */
.sbt-panel {
    margin-top: 12px;
    margin-bottom: 20px;
    border: none;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20, 83, 45, 0.12);
}
.sbt-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 60%, #14532d 100%);
    color: #fff;
}
.sbt-panel__title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
}
.sbt-panel__title .glyphicon { margin-right: 8px; }
.sbt-panel__count {
    background: rgba(255,255,255,0.3);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
    font-weight: 600;
}
.sbt-panel__view-all {
    color: #fff;
    font-size: 13px;
    text-decoration: underline;
    opacity: 0.92;
}
.sbt-panel__view-all:hover { color: #fff; opacity: 1; }

.sbt-panel__body { padding: 0; }
.sbt-panel__table { margin-bottom: 0; }
.sbt-panel__table thead th {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #064e3b;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border-bottom: 2px solid #a7f3d0;
}
.sbt-panel__table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    border-top: 1px solid #e5f5ec;
    background: #fafdfb;
}
.sbt-panel__table tbody tr:hover td { background: #f0fdf4; }

.sbt-row--unconfirmed td { background: #fff8e1; }
.sbt-row--unconfirmed:hover td { background: #fff3c4; }

.sbt-panel__time-cell {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.sbt-panel__time {
    font-weight: 700;
    font-size: 14px;
    color: #14532d;
}
.sbt-panel__confirm-btn { margin-top: 0; }

/* Mobile-only helpers — hidden on desktop where the table layout shows everything */
.sbt-panel__phone-top { display: none; }
.sbt-panel__service-inline { display: none; }

.sbt-panel__patient-link {
    color: #166534;
    font-weight: 600;
    text-decoration: none;
}
.sbt-panel__patient-link:hover { text-decoration: underline; color: #14532d; }
.sbt-panel__phone {
    display: inline-block;
    margin-left: 8px;
    color: #475569;
    font-size: 12px;
    text-decoration: none;
}
.sbt-panel__phone:hover { text-decoration: underline; }
.sbt-panel__service { color: #334155; }
.sbt-panel__booked-ago { color: #64748b; font-size: 12px; white-space: nowrap; }
.sbt-panel__actions { white-space: nowrap; text-align: right; }
.sbt-panel__profile-btn {
    border-color: #15803d;
    color: #15803d;
    background: #fff;
}
.sbt-panel__profile-btn:hover {
    background: #15803d;
    color: #fff;
    border-color: #14532d;
}

@media (max-width: 767px) {
    .sbt-panel { margin-left: -15px; margin-right: -15px; border-radius: 0; }
    .sbt-panel__header { padding: 10px 14px; }
    .sbt-panel__table thead { display: none; }

    /* Tinted panel background so the white-ish cards stand out */
    .sbt-panel__body {
        background: #eaf6ee;
        padding: 10px;
    }
    .sbt-panel__table tbody { display: block; }

    /* Each row becomes its own card with shadow + rounded corners */
    .sbt-panel__table tbody tr {
        display: block;
        padding: 10px 12px;
        margin-bottom: 8px;
        position: relative;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #d9efe1;
        box-shadow: 0 1px 3px rgba(20, 83, 45, 0.08);
    }
    .sbt-panel__table tbody tr:last-child { margin-bottom: 0; }
    .sbt-panel__table tbody tr.sbt-row--unconfirmed {
        background: #fffbeb;
        border-color: #fde68a;
        border-left: 4px solid #f59e0b;
    }
    .sbt-panel__table tbody tr.sbt-row--confirmed {
        border-left: 4px solid #16a34a;
    }
    .sbt-panel__table tbody td {
        display: inline;            /* let cells flow inline by default */
        padding: 0 !important;       /* kill Bootstrap's .table > tbody td { padding:8px } */
        border: none !important;
        background: transparent !important;
    }

    /* TOP ROW: time | verified | phone | profile — all on one line */
    .sbt-panel__time-cell {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 4px;
        padding-right: 76px !important;     /* room for the absolute-positioned Profile button */
    }
    .sbt-panel__time { font-size: 15px; }
    .sbt-panel__confirm-btn { padding: 4px 10px; font-size: 11px; flex-shrink: 0; }

    /* Phone visible on the first row instead of inside the patient cell */
    .sbt-panel__phone-top {
        display: inline-block;
        color: #475569;
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sbt-panel__actions {
        position: absolute;
        top: 10px;
        right: 12px;
        text-align: right;
    }
    .sbt-panel__profile-btn { padding: 4px 12px; font-size: 12px; }

    /* Patient cell — name + service name INLINE on one row */
    .sbt-panel__table tbody td:nth-of-type(2) {
        display: block;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .sbt-panel__patient-link { font-size: 16px; }

    /* Hide the duplicated phone (we already render it in the top row on mobile) */
    .sbt-panel__phone { display: none; }

    /* Show service inline next to the name; hide the standalone service td */
    .sbt-panel__service-inline {
        display: inline;
        font-size: 14px;
        color: #334155;
        margin-left: 6px;
    }
    .sbt-panel__service-inline::before {
        content: "· ";
        color: #cbd5e1;
        margin-right: 2px;
    }
    .sbt-panel__service { display: none !important; }

    /* Bottom row: location badge + "Booked X ago" inline */
    .sbt-panel__table tbody td:nth-of-type(4) {
        display: inline-block;
        vertical-align: middle;
    }
    .sbt-panel__booked-ago {
        display: inline-block !important;
        vertical-align: middle;
        margin-left: 6px;
        font-size: 12px;
        color: #64748b;
    }
    .sbt-panel__booked-ago::before {
        content: "· ";
        color: #cbd5e1;
        margin-right: 2px;
    }

    /* Compact location badge — must stay on a single line on small screens */
    .sbt-panel .loc-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        font-size: 11px;
        white-space: nowrap;
        line-height: 1.4;
        border-radius: 12px;
    }
    .sbt-panel .loc-flag { margin-right: 0; }
}

/* Calendar pending appointment requests (overbookings column) */
.cell_b.appointment.pending {
    background: #de6356 !important;
}
.cell_b.appointment.pending .pending-badge {
    background: #fff;
    color: #de6356;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin: 4px 0;
}
.cell_b.appointment.pending a { color: #fff; }

/* ---------- T-180: Staff Management ---------- */
.staff-mgmt { max-width: 1200px; }
.staff-mgmt-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.staff-mgmt-header h2 { margin: 0; }
.staff-mgmt-filter { margin: 12px 0; color: #555; font-size: 13px; }
.staff-mgmt-table { background: #fff; }
.staff-mgmt-table th { white-space: nowrap; font-size: 13px; }
.staff-mgmt-table td { vertical-align: middle; font-size: 13px; }
.staff-row-inactive td { background: #f7f7f7; color: #888; }
.staff-actions { white-space: nowrap; }
.staff-actions form { margin: 0; }
.staff-actions .btn { margin-left: 4px; }

.staff-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #e7e7e7; color: #333; text-transform: uppercase; }
.staff-badge-admin { background: #d9534f; color: #fff; }
.staff-badge-active { background: #5cb85c; color: #fff; }
.staff-badge-inactive { background: #aaa; color: #fff; }
.staff-badge-banned { background: #333; color: #fff; }

.staff-loc-pill { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 4px; background: #e3eef9; color: #234; font-size: 11px; }
.staff-perm-tag { display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 4px; background: #f1f1f1; color: #555; font-size: 11px; }
.staff-muted { color: #888; font-size: 12px; }
.staff-warning { color: #d9534f; font-weight: 600; }

.staff-form { background: #fff; padding: 20px; max-width: 720px; border: 1px solid #e1e1e1; border-radius: 6px; }
.staff-form-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.staff-form-section:last-of-type { border-bottom: none; }
.staff-form-section h3 { font-size: 16px; margin: 0 0 12px; }
.staff-form .form-group { margin-bottom: 14px; }
.staff-form .form-group label { font-weight: 600; display: block; margin-bottom: 4px; }
.staff-form .form-group label input[type="checkbox"] { margin-right: 6px; font-weight: 400; }
.staff-form-actions { margin-top: 8px; }
.staff-form-actions .btn { margin-right: 6px; }

.staff-password-row { display: flex; gap: 6px; align-items: stretch; }
.staff-password-row .form-control { flex: 1; }

.staff-locations-grid, .staff-perms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }

.staff-leadsrc-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.staff-leadsrc-toolbar .form-control { flex: 1; }
.staff-leadsrc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; max-height: 360px; overflow-y: auto; border: 1px solid #e1e1e1; padding: 8px; border-radius: 4px; background: #fafafa; }
.staff-leadsrc-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 3px; cursor: pointer; font-weight: 400; margin: 0; }
.staff-leadsrc-row:hover { background: #f0f0f0; }
.staff-leadsrc-row input { margin: 0; }
.staff-leadsrc-source { font-family: monospace; font-size: 12px; color: #444; }
.staff-leadsrc-row small { margin-left: 4px; }

.staff-accesslog-filter { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin: 12px 0 20px; padding: 12px; background: #f6f6f6; border-radius: 6px; }
.staff-accesslog-filter label { display: flex; flex-direction: column; font-weight: 600; font-size: 12px; gap: 4px; }
.staff-accesslog-filter .form-control { min-width: 160px; }
.staff-accesslog-filter .btn { white-space: nowrap; }
.staff-accesslog-pagination { margin-top: 12px; display: flex; gap: 8px; align-items: center; color: #555; font-size: 13px; }
.staff-loc-checkbox { display: block; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-weight: 400; cursor: pointer; }
.staff-loc-checkbox:has(input:checked) { background: #eef6ff; border-color: #4a90d9; }
.staff-loc-checkbox input { margin-right: 6px; }
.staff-loc-checkbox small { display: block; margin-top: 2px; }
.staff-loc-hidden-tag { color: #999; font-size: 11px; font-style: italic; }
.staff-perms-grid label { font-weight: 400; padding: 6px 0; cursor: pointer; }
.staff-perms-grid label input { margin-right: 6px; }

/* ============================================================
   admin/urgency — daily "who to call now" cockpit
   ============================================================ */
.urg-wrap { max-width: 820px; margin: 0 auto; padding: 14px 10px 60px; background: transparent; }
.urg-hidden { display: none !important; }

/* "To Call" button — on the Book-New row, between Calendar and Dublin */
.tocall_but {
    background: #dc2626 !important; border: 1px solid #fff;
    border-radius: 40px;
    display: flex; justify-content: center; align-items: center;
    min-width: 110px; padding-left: 14px; padding-right: 10px; color: #fff;
}
.tocall_but:hover, .tocall_but:focus { background: #b91c1c !important; color: #fff; }
.tocall_but span {
    background: #fff; color: #dc2626; border-radius: 50%;
    min-width: 24px; height: 24px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 8px; font-weight: 800; font-size: 12px;
}

/* ---- T-227 Calling Queue (dark). Palette lives on body.urg-page, so a light
   variant is a matter of redefining these variables. ---- */
body.urg-page {
    --urg-bg: #0b1220;
    --urg-card: #111a2b;
    --urg-card-2: #0d1626;
    --urg-border: #1e293b;
    --urg-text: #e5e7eb;
    --urg-muted: #94a3b8;
    --urg-green: #22c55e;
    --urg-wa: #25d366;
    --urg-sms: #60a5fa;
    --urg-red: #ef4444;
    --urg-amber: #f59e0b;
    --urg-gold: #d4a017;
    /* filter pill colours, in pill order (owner 2026-10-12) */
    --urg-c-fresh: #d4a017;
    --urg-c-callbacks: #ef4444;
    --urg-c-called-once: #3b82f6;
    --urg-c-called-twice: #8b5cf6;
    --urg-c-called-three: #ec4899;
    --urg-c-patient: #14b8a6;
    --urg-c-last: #94a3b8;
    background: var(--urg-bg);
}
.urg-screen { background: var(--urg-bg); color: var(--urg-text); min-height: 100vh; }
.urg-ico { display: block; width: 22px; height: 22px; }

/* page header: title + open-items count, subtitle, scrollable counter chips */
.urg-head { margin-bottom: 20px; }
.urg-head__top { display: flex; align-items: center; gap: 10px; }
.urg-head__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--urg-text); }
.urg-head__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px;
    background: var(--urg-green); color: #052e14; font-size: 14px; font-weight: 800;
}
.urg-head__sub { margin: 4px 0 12px; font-size: 13px; color: var(--urg-muted); }
/* filter pills: all visible at once (no sideways scroll), equal widths, rows
   centred, one colour per pill (owner 2026-10-12). Four per row from 480px up. */
.urg-chips { --urg-pills-per-row: 4; --urg-pills-gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--urg-pills-gap); }
.urg-pill, a.urg-pill:hover, a.urg-pill:focus {
    flex: 0 0 calc((100% - (var(--urg-pills-per-row) - 1) * var(--urg-pills-gap)) / var(--urg-pills-per-row));
    min-width: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 10px; border-radius: 999px;
    border: 1px solid var(--urg-pill); background: var(--urg-card); color: var(--urg-pill);
    font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
a.urg-pill:hover { background: var(--urg-pill-tint); }
.urg-pill b {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
    background: var(--urg-pill-tint); color: var(--urg-pill); font-size: 13px; font-weight: 800;
}
.urg-pill.is-active, a.urg-pill.is-active:hover, a.urg-pill.is-active:focus { background: var(--urg-pill); border-color: var(--urg-pill); color: #0b1220; }
.urg-pill.is-active b { background: rgba(11, 18, 32, .22); color: #0b1220; }
/* window chips under the pills (T-227): how far back the lists look; one line, centred */
.urg-window { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.urg-window__lbl { margin-right: 2px; font-size: 12px; color: var(--urg-muted); white-space: nowrap; }
.urg-window__chip, a.urg-window__chip:hover, a.urg-window__chip:focus {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 11px;
    border: 1px solid #334155; border-radius: 999px; background: transparent; color: var(--urg-muted);
    font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
a.urg-window__chip:hover { border-color: var(--urg-muted); color: var(--urg-text); }
.urg-window--clinics { margin-top: 6px; }
.urg-window__chip.is-active, a.urg-window__chip.is-active:hover, a.urg-window__chip.is-active:focus { border-color: var(--urg-muted); background: var(--urg-muted); color: #0b1220; }
.urg-pill--fresh             { --urg-pill: var(--urg-c-fresh);        --urg-pill-tint: rgba(212, 160, 23, .18); }
.urg-pill--callbacks         { --urg-pill: var(--urg-c-callbacks);    --urg-pill-tint: rgba(239, 68, 68, .18); }
.urg-pill--called-once       { --urg-pill: var(--urg-c-called-once);  --urg-pill-tint: rgba(59, 130, 246, .18); }
.urg-pill--called-twice      { --urg-pill: var(--urg-c-called-twice); --urg-pill-tint: rgba(139, 92, 246, .18); }
.urg-pill--called-three      { --urg-pill: var(--urg-c-called-three); --urg-pill-tint: rgba(236, 72, 153, .18); }
.urg-pill--patient-callbacks { --urg-pill: var(--urg-c-patient);      --urg-pill-tint: rgba(20, 184, 166, .18); }
.urg-pill--last-calls        { --urg-pill: var(--urg-c-last);         --urg-pill-tint: rgba(148, 163, 184, .18); }

.urg-empty { padding: 12px 14px; border: 1px dashed var(--urg-border); border-radius: 14px; font-size: 13px; font-style: italic; color: var(--urg-muted); }

/* T-227 Call Log cards: this week, last 3 weeks, best time to call, how the targets are worked out */
.urg-cl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.urg-cl-card { padding: 12px 14px; border: 1px solid var(--urg-border); border-radius: 14px; background: var(--urg-card); color: var(--urg-text); }
.urg-cl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.urg-cl-card__title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--urg-text); }
.urg-cl-card__note { font-size: 12px; color: var(--urg-muted); white-space: nowrap; }
.urg-cl-goal { margin-bottom: 12px; }
.urg-cl-goal__line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--urg-muted); }
.urg-cl-goal__label b { font-size: 18px; font-weight: 800; color: var(--urg-text); }
.urg-cl-pace { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.urg-cl-pace--ok     { background: rgba(34, 197, 94, .16);  color: #4ade80; }
.urg-cl-pace--behind { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.urg-cl-bar {
    display: block; width: 100%; height: 6px; margin-top: 6px; border: 0; border-radius: 999px;
    background: var(--urg-border); overflow: hidden; -webkit-appearance: none; appearance: none;
}
.urg-cl-bar--ok     { --urg-bar: var(--urg-green); color: var(--urg-green); }
.urg-cl-bar--behind { --urg-bar: var(--urg-amber); color: var(--urg-amber); }
.urg-cl-bar::-webkit-progress-bar   { background: var(--urg-border); border-radius: 999px; }
.urg-cl-bar::-webkit-progress-value { background: var(--urg-bar); border-radius: 999px; }
.urg-cl-bar::-moz-progress-bar      { background: var(--urg-bar); border-radius: 999px; }
.urg-cl-money-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.urg-cl-money { margin: 0; font-size: 13px; color: var(--urg-muted); }
.urg-rbtn--reports { display: flex; align-items: center; justify-content: center; padding: 0; border-color: #334155; color: var(--urg-text); line-height: 1; }
.urg-cl-reports-btn__ico { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.urg-cl-reports-btn__minus, .urg-cl-reports-btn[aria-expanded="true"] .urg-cl-reports-btn__plus { display: none; }
.urg-cl-reports-btn[aria-expanded="true"] .urg-cl-reports-btn__minus { display: block; }
.urg-rbtn--reports:hover, .urg-rbtn--reports[aria-expanded="true"] { background: rgba(148, 163, 184, .12); }
.urg-cl-reports { display: flex; flex-direction: column; gap: 10px; }
.urg-cl-reports[hidden] { display: none; }
/* pill switch without a reload: the old list stays visible, dimmed, until the new one arrives */
.urg-content { transition: opacity .15s ease; }
.urg-content.is-loading { opacity: .45; pointer-events: none; }
.urg-cl-money b { color: var(--urg-text); }
.urg-cl-weeks { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--urg-muted); }
.urg-cl-weeks li { padding: 6px 0; border-top: 1px solid var(--urg-border); }
.urg-cl-weeks li:first-child { padding-top: 0; border-top: 0; }
.urg-cl-weeks__when { font-weight: 700; color: var(--urg-text); }
.urg-cl-weeks__clinic { display: block; padding-left: 10px; }
/* one block per clinic in "This week" when All clinics is chosen */
.urg-cl-clinic--multi + .urg-cl-clinic--multi { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--urg-border); }
.urg-cl-clinic__name { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--urg-muted); }
.urg-cl-clinic__name--basis { margin-top: 14px; }
.urg-cl-fold__sum { display: block; list-style: none; font-weight: 400; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.urg-cl-fold__sum::-webkit-details-marker { display: none; }
.urg-cl-fold__sum .urg-cl-card__head { margin-bottom: 4px; }
.urg-cl-fold__more {
    flex: 0 0 auto; width: 9px; height: 9px; margin: 0 4px 3px 0;
    border-right: 2px solid var(--urg-muted); border-bottom: 2px solid var(--urg-muted);
    transform: rotate(45deg); transition: transform .2s ease;
}
.urg-cl-fold[open] .urg-cl-fold__more { transform: rotate(-135deg); margin-bottom: -2px; }
.urg-cl-best__line { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--urg-muted); }
.urg-cl-best__line b { color: var(--urg-text); }
.urg-cl-grid { display: grid; gap: 3px; margin-top: 12px; }
.urg-cl-grid__row { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 3px; }
.urg-cl-grid__band { align-self: end; font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--urg-muted); overflow-wrap: anywhere; }
.urg-cl-grid__day { align-self: center; font-size: 11px; font-weight: 700; color: var(--urg-muted); }
.urg-cl-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 38px; border-radius: 6px; line-height: 1.15; color: var(--urg-text);
}
.urg-cl-cell b { font-size: 11px; font-weight: 800; }
.urg-cl-cell small { font-size: 9px; opacity: .75; }
.urg-cl-cell--few { background: rgba(148, 163, 184, .08); color: var(--urg-muted); }
.urg-cl-heat--0 { background: rgba(34, 197, 94, .06); }
.urg-cl-heat--1 { background: rgba(34, 197, 94, .14); }
.urg-cl-heat--2 { background: rgba(34, 197, 94, .26); }
.urg-cl-heat--3 { background: rgba(34, 197, 94, .42); }
.urg-cl-heat--4 { background: rgba(34, 197, 94, .62); color: #052e14; }
.urg-cl-heat--5 { background: rgba(34, 197, 94, .85); color: #052e14; }
.urg-cl-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--urg-muted); }
.urg-cl-basis { margin: 12px 0 0; }
.urg-cl-basis dt { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--urg-muted); }
.urg-cl-basis dd { margin: 1px 0 9px; font-size: 14px; font-weight: 700; color: var(--urg-text); }

/* one row = one card: logo + name block (tap target) + round buttons + chevron */
.urg-item {
    margin-bottom: 8px; border: 1px solid var(--urg-border); border-radius: 14px;
    background: var(--urg-card); color: var(--urg-text); transition: border-color .15s ease;
}
.urg-item.is-open { border-color: var(--urg-green); }
.urg-item__line { display: flex; align-items: center; gap: 6px; min-height: 84px; padding: 8px; }
.urg-item__hit {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; align-self: stretch;
    border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; outline: none;
    -webkit-tap-highlight-color: transparent;
}
.urg-item__hit:focus-visible { box-shadow: 0 0 0 2px var(--urg-green); }
a.urg-item__hit:hover, a.urg-item__hit:focus { color: inherit; text-decoration: none; }
.urg-logo {
    flex: 0 0 76px; width: 76px; height: 52px; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.urg-logo__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.urg-logo--text { font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--urg-muted); overflow-wrap: anywhere; }
.urg-logo--icon { color: var(--urg-muted); }
.urg-logo--icon .urg-ico { width: 26px; height: 26px; }
.urg-item__info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.urg-item__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.urg-item__name .lb-test-badge { flex: 0 0 auto; }
/* clinic of the row (T-227 owner correction): flag + short name, first on the badge line */
.urg-clinic { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; line-height: 1; color: var(--urg-muted); white-space: nowrap; }
.urg-clinic__flag { display: block; width: 14px; height: 10px; border-radius: 2px; }
.urg-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 700; color: var(--urg-text); }
.urg-item__meta { font-size: 12.5px; line-height: 1.3; color: var(--urg-muted); overflow-wrap: anywhere; }
.urg-item__meta .loc-flag { margin-right: 3px; }
.urg-nw { white-space: nowrap; }
.urg-item__late { font-style: normal; font-weight: 700; color: var(--urg-red); }
.urg-item__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.urg-item__badges:empty { display: none; }
.urg-item__sched { align-self: center; min-width: 0; font-size: 10px; line-height: 1.5; color: var(--urg-muted); }

.urg-badge { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .5px; line-height: 1.5; white-space: nowrap; }
.urg-badge--overdue   { background: rgba(239, 68, 68, .16);   color: #f87171; }
.urg-badge--today { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.urg-badge--upcoming, .urg-badge--called { background: rgba(96, 165, 250, .16); color: #93c5fd; }
.urg-badge--new       { background: rgba(212, 160, 23, .18);  color: var(--urg-gold); }
.urg-badge--connected, .urg-badge--booked { background: rgba(34, 197, 94, .16); color: #4ade80; }
/* a lead called a moment ago stays in its list, marked (T-227, owner 2026-10-12): green left edge + "CALLED 3m" */
.urg-item.is-called { box-shadow: inset 4px 0 0 var(--urg-green); }
.urg-badge.urg-badge--calledmark { background: var(--urg-green); color: #052e14; font-size: 10px; white-space: nowrap; overflow-wrap: normal; } /* "CALLED now" / "CALLED 10m": always one line */
.urg-badge--callback  { background: rgba(96, 165, 250, .16);  color: #93c5fd; }
.urg-badge--notinterested { background: rgba(148, 163, 184, .16); color: var(--urg-muted); }
.urg-badge--outline   { padding: 1px 6px; border: 1px solid var(--urg-border); background: transparent; color: var(--urg-muted); }
.urg-badge--attempted { border-color: rgba(245, 158, 11, .45); color: #fbbf24; }

/* customer-context badge (link to the profile) */
a.urg-ctx { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; }
a.urg-ctx:hover, a.urg-ctx:focus { text-decoration: underline; }
a.urg-ctx--customer, a.urg-ctx--customer:hover   { background: rgba(212, 160, 23, .18); color: var(--urg-gold); }
a.urg-ctx--future, a.urg-ctx--future:hover       { background: rgba(96, 165, 250, .16); color: #93c5fd; }
a.urg-ctx--neverconv, a.urg-ctx--neverconv:hover { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
a.urg-ctx--past, a.urg-ctx--past:hover           { background: rgba(239, 68, 68, .16); color: #f87171; }

/* round buttons */
.urg-item__btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.urg-rbtn {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1.5px solid; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, transform .08s ease;
}
.urg-rbtn:active { transform: scale(.94); }
.urg-rbtn:disabled { opacity: .5; cursor: default; }
.urg-rbtn--wa, a.urg-rbtn--wa:hover { color: var(--urg-wa); border-color: var(--urg-wa); }
.urg-rbtn--wa:hover { background: rgba(37, 211, 102, .12); }
.urg-rbtn--sms { color: var(--urg-sms); border-color: var(--urg-sms); }
.urg-rbtn--sms:hover { background: rgba(96, 165, 250, .12); }
.urg-rbtn--done { color: var(--urg-green); border-color: var(--urg-green); }
.urg-rbtn--done:hover { background: rgba(34, 197, 94, .12); }
.urg-rbtn--call, a.urg-rbtn--call:hover, a.urg-rbtn--call:focus {
    width: 52px; height: 52px; border-color: var(--urg-green); background: var(--urg-green); color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, .28);
}
.urg-rbtn--call .urg-ico { width: 24px; height: 24px; }
.urg-pcb__doneform { margin: 0; display: flex; }
.urg-chev, a.urg-chev:hover, a.urg-chev:focus {
    flex: 0 0 auto; width: 30px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--urg-muted); cursor: pointer;
}
.urg-chev .urg-ico { width: 24px; height: 24px; border-radius: 50%; transition: transform .2s ease, background-color .2s ease; }
.urg-item.is-open .urg-expand .urg-ico { width: 30px; height: 30px; padding: 3px; transform: rotate(-90deg); background: rgba(255, 255, 255, .08); color: var(--urg-text); }

/* expanded area: quick strip, then the full lead card (light) */
.urg-item__exp { padding: 0 8px 8px; }
.urg-strip { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.urg-strip__row { display: flex; gap: 6px; }
.urg-strip__row > .urg-act { flex: 1 1 0; min-width: 0; }
.urg-act {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--urg-border); border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    background: var(--urg-card-2); color: var(--urg-text); font-size: 14px; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer;
}
a.urg-act:hover, a.urg-act:focus { color: var(--urg-text); text-decoration: none; border-color: #334155; }
.urg-act:disabled { opacity: .5; cursor: default; }
select.urg-act { height: 44px; padding: 0 10px; }
.urg-act--ok { background: var(--urg-green); border-color: var(--urg-green); color: #052e14; font-weight: 700; }
.urg-act--danger { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .55); color: #fca5a5; font-weight: 700; }
.urg-card-slot { overflow: hidden; border-radius: 12px; background: #fff; color: #333; }
.urg-card-slot:empty { display: none; }
.urg-card-loading { padding: 14px; text-align: center; font-size: 13px; color: #64748b; }
.urg-card-loading--err { color: #dc2626; }

/* phones: tighter spacing so the name block keeps about 100px next to the
   three round buttons (logo slot 64px here, 76px from 480px up) */
@media (max-width: 479px) {
    .urg-item__line { gap: 4px; padding: 6px; }
    .urg-item__hit { gap: 8px; }
    .urg-item__btns { gap: 4px; }
    .urg-logo { flex-basis: 64px; width: 64px; height: 48px; }
    .urg-chev, a.urg-chev:hover, a.urg-chev:focus { width: 24px; }
    .urg-item__exp { padding: 0 6px 6px; }
    .urg-item__meta { font-size: 12px; }
    /* compact filter pills, two per row on phones (2 + 2 + 2 + 1, last one centred).
       Three per row was measured at 390px: a third of the row is 119px and
       "Patient callbacks" with a one-digit count needs about 117px at 11px text,
       so a two-digit count would clip (owner rule: then two per row). */
    .urg-chips { --urg-pills-per-row: 2; --urg-pills-gap: 6px; }
    .urg-window { gap: 4px; }
    .urg-window__lbl { font-size: 11.5px; }
    .urg-window__chip, a.urg-window__chip:hover, a.urg-window__chip:focus { padding: 0 8px; font-size: 11.5px; }
    .urg-pill, a.urg-pill:hover, a.urg-pill:focus { min-height: 0; gap: 5px; padding: 8px 6px; font-size: 12px; line-height: 1.2; }
    .urg-pill b { min-width: 20px; height: 18px; padding: 0 5px; font-size: 11px; }
    /* badges never wider than the name block: tighter tracking, long ones wrap */
    .urg-badge, a.urg-ctx { max-width: 100%; letter-spacing: .2px; white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
    .urg-wrap { padding-top: 24px; }
    .urg-head__title { font-size: 30px; }
}

/* ============================================
   Payment Calendar — "Total Sold" + "Collected" boxes inside the blue tile
   ============================================ */
.pc-total-sold,
.pc-collected {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}
.pc-total-sold {
    background: rgba(255, 255, 255, 0.30);
    color: #fff;
}
.pc-sale-today {
    color: #4ade80; /* green = package sold on this day */
    font-weight: 800;
}
.pc-collected {
    background: #1a4a73;
    color: #fff;
}
.pc-total-sold strong,
.pc-collected strong {
    font-weight: 800;
    font-size: 15px;
}
/* Day-level "Total Sales" box — sits below the green Collected total */
.day-total-sales {
    margin-top: 8px;
    padding: 10px;
    background: linear-gradient(135deg, #7c3aed 0%, #10b981 100%);
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}


/* ============================================================
   T-183 — Staff time tracking (clock in/out)
   ============================================================ */

/* ---- self-service ---- */
.tc-self {
    max-width: 820px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px 28px;
    margin-bottom: 40px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.tc-page-title { margin-top: 4px; margin-bottom: 20px; }
.tc-muted { color: #64748b; }

.tc-card {
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.tc-card--in  { background: #ecfdf5; border-color: #6ee7b7; }
.tc-card--out { background: #f8fafc; border-color: #e2e8f0; }

.tc-card-status { display: flex; flex-direction: column; gap: 4px; }
.tc-status-text { font-size: 18px; }
.tc-since { color: #475569; font-size: 14px; }
.tc-timer { font-weight: 700; font-variant-numeric: tabular-nums; }

.tc-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #cbd5e1; margin-right: 8px;
}
.tc-dot--live { background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: tc-pulse 1.6s infinite; }
@keyframes tc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.tc-card-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-clinic-select { min-width: 240px; display: inline-block; width: auto; }
.tc-btn { font-size: 16px; font-weight: 700; padding: 12px 28px; border-radius: 10px; color: #fff; border: 0; min-height: 48px; }
.tc-btn--in  { background: #10b981; }
.tc-btn--in:hover  { background: #059669; color: #fff; }
.tc-btn--out { background: #ef4444; }
.tc-btn--out:hover { background: #dc2626; color: #fff; }
.tc-btn:disabled { opacity: .6; }

.tc-error {
    flex-basis: 100%;
    margin-top: 8px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
}

.tc-hist-title { margin: 0 0 12px; }

.tc-month { border-radius: 10px; overflow: hidden; }
.tc-month-head {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
}
.tc-month-name { font-weight: 700; font-size: 16px; }
.tc-current-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    background: #2563eb; color: #fff; border-radius: 6px; padding: 2px 6px; margin-left: 6px;
}
.tc-month-totals { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.tc-clinic-total { white-space: nowrap; }
.tc-chevron { color: #64748b; }

.tc-entries { margin-bottom: 0; }
.tc-entries th { font-size: 12px; text-transform: uppercase; color: #64748b; }
.tc-row-open { background: #fffbeb !important; }
.tc-inprogress {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    background: #f59e0b; color: #fff; border-radius: 6px; padding: 2px 8px;
}

/* ---- admin manage ---- */
.tc-manage {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px 32px;
    margin-bottom: 40px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.tc-manage h2 { margin-top: 4px; }
.tc-manage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tc-filters {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
}
.tc-filters label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 4px; margin: 0; }
.tc-filters .form-control { min-width: 180px; }

.tc-add-panel, .tc-edit-row .tc-entry-form {
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 10px; padding: 16px; margin-bottom: 20px;
}
.tc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tc-form-grid label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 4px; margin: 0; }
.tc-note-field { grid-column: 1 / -1; }
.tc-form-actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; }

.tc-summary { margin-bottom: 24px; }
.tc-summary h4 { margin-bottom: 10px; }
.tc-summary-table .tc-clinic-total { display: inline-block; margin-right: 16px; }

.tc-entries-title { margin: 18px 0 10px; }
.tc-manage-table th { font-size: 12px; text-transform: uppercase; color: #64748b; }
.tc-company { font-size: 12px; }
.tc-src {
    font-size: 11px; text-transform: uppercase; font-weight: 700; border-radius: 6px; padding: 2px 7px;
}
.tc-src--self  { background: #e0f2fe; color: #0369a1; }
.tc-src--admin { background: #fef3c7; color: #92400e; }
.tc-edited { font-size: 12px; color: #7c3aed; margin-left: 6px; }
.tc-note-show { font-size: 12px; color: #475569; margin-top: 4px; font-style: italic; }
.tc-edit-row > td { background: #f8fafc; }

@media (max-width: 600px) {
    .tc-card { flex-direction: column; align-items: stretch; text-align: center; }
    .tc-card-action { justify-content: center; }
    .tc-clinic-select { min-width: 0; width: 100%; }
    .tc-btn { width: 100%; }
    .tc-month-totals { margin-left: 0; flex-basis: 100%; }
}

/* T-183 — auto-closed (pending review) flag */
.tc-row-review { background: #fff7ed !important; }
.tc-review {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    background: #f97316; color: #fff; border-radius: 6px; padding: 1px 7px; margin-left: 4px;
}
.tc-hist-note { margin: -6px 0 14px; font-size: 13px; }

/* T-183 — staff menu spacing + mobile polish */
.staff-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
/* gap controls spacing; keep the buttons at their natural compact size */
.staff-menu .btn { margin: 0; }

/* keep the in-progress badge on one line */
.tc-inprogress { white-space: nowrap; }

@media (max-width: 600px) {
    /* compact, wrapping menu (gaps only — no enlarging) */
    .staff-menu { gap: 8px; }

    /* self-service card: reclaim side padding for the table */
    .tc-self { padding: 18px 14px 22px; }
    .tc-page-title { font-size: 26px; }

    /* entries table: tighter so 5 columns fit a phone without ugly wraps */
    .tc-entries { font-size: 12px; }
    .tc-entries th, .tc-entries td { padding: 7px 6px; }
    .tc-entries th { font-size: 10px; }
    .tc-inprogress { font-size: 10px; padding: 2px 6px; }
    .tc-month-head { padding: 12px 12px; }
    .tc-month-name { font-size: 15px; }
}

/* T-183 — no clinic assigned message on the clock card */
.tc-noclinic {
    flex: 1 1 100%;
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
}

/* ============================================================
   T-183 — persistent clock in/out bar (below menu, all pages)
   ============================================================ */
.tc-bar {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    color: #1e293b;
}
.tc-bar--in  { background: #ecfdf5; border-bottom-color: #a7f3d0; }
.tc-bar-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tc-bar-status { display: flex; align-items: center; }
.tc-bar-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-bar-select { display: inline-block; width: auto; height: 34px; }
.tc-bar-clinic-label { color: #475569; font-weight: 600; }
.tc-bar-btn {
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 8px;
    color: #fff;
    border: 0;
}
.tc-bar-btn--in  { background: #10b981; }
.tc-bar-btn--in:hover  { background: #059669; color: #fff; }
.tc-bar-btn--out { background: #ef4444; }
.tc-bar-btn--out:hover { background: #dc2626; color: #fff; }
.tc-bar-btn:disabled { opacity: .6; }
.tc-bar-timer { font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-bar-note { color: #92400e; font-size: 13px; }
.tc-bar-error { color: #b91c1c; font-size: 13px; display: none; }

@media (max-width: 600px) {
    /* keep the bar on ONE line (like desktop): status shrinks, controls stay right */
    .tc-bar-inner { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
    .tc-bar-status { flex: 1 1 auto; min-width: 0; }
    .tc-bar-text {
        display: inline-block; max-width: 100%; vertical-align: middle;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tc-bar-since { display: none; }            /* drop "· since 10:35 am" to save room */
    .tc-bar-action { flex: 0 0 auto; }
    .tc-bar-select { width: auto; max-width: 120px; font-size: 12px; }
    .tc-bar-btn { padding: 7px 12px; }
}

/* ============================================================
   T-183 — admin manage page: edit-row toggle + mobile cards
   ============================================================ */
/* Edit row is hidden until its class is toggled on (class-based, not inline). */
.tc-edit-row { display: none; }
.tc-edit-row.tc-edit-open { display: table-row; }

@media (max-width: 767px) {
    .tc-manage { padding: 16px 12px 24px; }
    .tc-manage-head { flex-wrap: wrap; gap: 10px; }
    .tc-manage-head h2 { font-size: 24px; }

    /* filters: full-width stacked controls */
    .tc-filters { gap: 10px; padding: 12px; }
    .tc-filters label { width: 100%; }
    .tc-filters .form-control { min-width: 0; width: 100%; }

    /* ---- Totals summary -> stacked cards ---- */
    .tc-summary-table > thead { display: none; }
    .tc-summary-table,
    .tc-summary-table > tbody,
    .tc-summary-table > tbody > tr,
    .tc-summary-table > tbody > tr > td { display: block; width: 100%; }
    .tc-summary-table > tbody > tr {
        border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
    }
    .tc-summary-table > tbody > tr > td { border: 0 !important; padding: 3px 0; text-align: left; }
    .tc-summary-table .tc-clinic-total { display: block; margin: 2px 0; }

    /* ---- Entries table -> stacked cards ---- */
    .tc-manage-table > thead { display: none; }
    .tc-manage-table,
    .tc-manage-table > tbody,
    .tc-manage-table > tbody > tr,
    .tc-manage-table > tbody > tr > td { display: block; width: 100%; }

    .tc-manage-table > tbody > tr {
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 6px 12px;
        background: #fff;
    }
    .tc-manage-table > tbody > tr.tc-row-open   { background: #fffbeb !important; }
    .tc-manage-table > tbody > tr.tc-row-review { background: #fff7ed !important; }

    .tc-manage-table > tbody > tr > td {
        border: 0 !important;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: right;
        flex-wrap: wrap;
    }
    .tc-manage-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        color: #64748b;
        text-align: left;
        white-space: nowrap;
    }
    .tc-manage-table .tc-note-show { flex-basis: 100%; text-align: right; }

    /* actions cell: buttons row across the bottom of the card */
    .tc-manage-table > tbody > tr > td.tc-actions {
        justify-content: flex-end;
        gap: 8px;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid #eef2f7 !important;
    }
    .tc-manage-table > tbody > tr > td.tc-actions .btn { padding: 6px 16px; font-size: 13px; }

    /* edit row: hidden unless open, then a full-width block form */
    .tc-manage-table > tbody > tr.tc-edit-row { display: none; padding: 0; border: 0 !important; background: transparent; margin-bottom: 12px; }
    .tc-manage-table > tbody > tr.tc-edit-row.tc-edit-open { display: block; }
    .tc-manage-table > tbody > tr.tc-edit-row > td { display: block; text-align: left; padding: 0; }
}

/* T-183 — manage page: first/last patient columns + >30min flag */
.tc-patient-time { color: #334155; }
.tc-flag-cell { background: #fef2f2 !important; }
.tc-flag {
    display: inline-block;
    color: #b91c1c;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    margin-left: 4px;
}
@media (max-width: 767px) {
    .tc-flag { display: block; margin-left: 0; margin-top: 2px; }
}

/* ===== Lead Email Attribution dashboard (T-179 attribution) ===== */
.ea-dashboard { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.ea-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.ea-sub { color: #6b7280; margin: 0 0 24px; font-size: 14px; }
.ea-sub-inline { color: #9ca3af; font-weight: 400; font-size: 13px; }
.ea-h2 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.ea-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.ea-table th, .ea-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.ea-table thead th { background: #f9fafb; color: #374151; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ea-table .ea-num { text-align: right; font-variant-numeric: tabular-nums; }
.ea-funnel .ea-book { font-weight: 700; color: #047857; }
.ea-funnel .ea-row-direct td { background: #fafafa; color: #4b5563; border-top: 1px dashed #e5e7eb; }
.ea-funnel tfoot .ea-total td { background: #f9fafb; font-weight: 700; border-top: 2px solid #e5e7eb; }
.ea-detail .ea-email-sub { color: #9ca3af; font-size: 12px; margin-top: 2px; }
.ea-detail .ea-source { color: #6b7280; font-size: 13px; }
.ea-detail .ea-when { color: #6b7280; white-space: nowrap; font-size: 13px; }
.ea-row-booked { background: #f0fdf4; }
.ea-yes { color: #047857; font-weight: 600; white-space: nowrap; }
.ea-no { color: #d1d5db; }
.ea-empty { color: #6b7280; padding: 24px; background: #f9fafb; border-radius: 8px; text-align: center; }
.ea-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2ff; color: #4338ca; white-space: nowrap; }
.ea-pill-welcome  { background: #ecfeff; color: #0e7490; }
.ea-pill-day1     { background: #fce7f3; color: #be185d; }
.ea-pill-day3     { background: #eff6ff; color: #1d4ed8; }
.ea-pill-day7     { background: #fef3c7; color: #b45309; }
.ea-pill-callback { background: #fae8ff; color: #a21caf; }
@media (max-width: 600px) {
  .ea-table, .ea-table thead, .ea-table tbody, .ea-table tr, .ea-table th, .ea-table td { display: block; }
  .ea-table thead { display: none; }
  .ea-detail tr { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; padding: 6px; }
  .ea-table td { border: none; padding: 4px 10px; }
  .ea-table .ea-num { text-align: left; }
}

/* ============================================================
   T-184 Patient Referral Program — profile section (.rp-*)
   Ported from the v0 "You win, they win" design. oklch tokens
   resolved to hex/rgba for universal device support.
   primary #d84497 · accent #a2f0e0 · success #029e72
   ============================================================ */
.rp-section { max-width: 640px; margin: 34px auto 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #361e3b; }
.rp-section * { box-sizing: border-box; }
.rp-section p, .rp-section h1, .rp-section h2, .rp-section h3 { margin: 0; }

/* hero */
.rp-hero { background: #d84497; color: #fff9ff; border-radius: 18px; }
.rp-hero-in { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.4rem 1.25rem 2.6rem; text-align: center; }
.rp-pill { display: inline-flex; align-items: center; gap: .375rem; border-radius: 999px; background: rgba(255,249,255,.16); padding: .25rem .75rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rp-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rp-lede { max-width: 30rem; line-height: 1.5; color: rgba(255,249,255,.85); font-size: 15px; }
.rp-stat { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(255,249,255,.16); padding: .5rem 1rem; font-size: 14px; font-weight: 600; }
.rp-hero svg, .rp-section svg { display: inline-block; vertical-align: middle; }

/* T-186 follow-up: white referral banner at the profile top, CTA inside + animated gradient star.
   Reuses the .rp-pill/.rp-h1/.rp-lede/.rp-stat markup but recolours pink-on-white. */
.rp-herobar { position: relative; overflow: hidden; background: #fff; color: #d84497; border: 1px solid #f3d3e6; border-radius: 18px; box-shadow: 0 6px 22px rgba(216,68,151,.10); padding: 1.6rem 1.25rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; text-align: left; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.rp-herobar * { box-sizing: border-box; }
.rp-herobar h1, .rp-herobar p { margin: 0; }
.rp-herobar svg { display: inline-block; vertical-align: middle; }
.rp-herobar .rp-pill { color: #d84497; background: rgba(216,68,151,.10); }
.rp-herobar .rp-h1 { color: #c2367f; }
.rp-herobar .rp-lede { color: #9c5f86; }
.rp-herobar .rp-stat { color: #d84497; background: rgba(216,68,151,.10); }
.rp-herobar .rp-invite-cta { margin-top: .35rem; }

/* animated gradient star badge, top-right of the banner */
.rp-herobar-star { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, rgb(139,92,246), rgb(236,72,153), rgb(6,182,212), rgb(139,92,246)); background-size: 300% 300%; animation: rp-star-gradient 6s ease infinite; box-shadow: 0 6px 16px rgba(236,72,153,.4); }
.rp-herobar-star svg { width: 24px; height: 24px; }
@keyframes rp-star-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .rp-herobar-star { animation: none; } }

/* stacked content (pulled up over hero) */
.rp-stack { position: relative; z-index: 1; margin: 16px 14px 0; display: flex; flex-direction: column; gap: 1.4rem; }
.rp-track-section { order: -1; } /* T-185: show Live tracking above the booking cards */
@media (max-width: 480px){ .rp-stack { margin-left: 10px; margin-right: 10px; } }

.rp-card { border-radius: 22px; border: 1px solid rgba(216,68,151,.2); background: #fff; padding: 1.4rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.rp-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #361e3b; }
.rp-card .rp-sub { margin-top: .25rem; font-size: 16px; color: #795e7f; }

.rp-btn { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: .5rem; border-radius: 14px; padding: 0 1.25rem; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.rp-btn-primary { background: #d84497; color: #fff9ff; }
.rp-btn-primary:hover { background: #c63d88; color: #fff9ff; }
.rp-btn-outline { width: 100%; border-color: #d84497; background: rgba(216,68,151,.06); color: #d84497; }
.rp-btn-outline:hover { background: rgba(216,68,151,.12); color: #d84497; }

.rp-field { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.rp-label { font-size: 14px; font-weight: 600; color: #361e3b; }
.rp-select-wrap { position: relative; margin-top: 15px; }
.rp-select, .rp-input { min-height: 54px; width: 100%; border-radius: 14px; border: 1px solid #e7d8eb; background: #fff; padding: 0 16px; font-size: 16px; color: #361e3b; outline: none; font-family: inherit; }
.rp-select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; }
.rp-select:focus, .rp-input:focus { box-shadow: 0 0 0 2px #d84497; border-color: #d84497; }
.rp-select-chev { pointer-events: none; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: #795e7f; }
.rp-input::placeholder { color: #b9a9bf; }

.rp-grid { display: grid; gap: .75rem; }
.rp-fg { display: flex; flex-direction: column; gap: .375rem; }
.rp-note-ok { font-size: 13px; color: #029e72; font-weight: 600; margin-top: .4rem; min-height: 1em; }

/* gifts */
.rp-gifts { overflow: hidden; border-radius: 22px; border: 1px solid rgba(216,68,151,.2); background: rgba(242,233,255,.5); }
.rp-gifts-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.25rem 0; }
.rp-gifts-id { display: flex; align-items: center; gap: .75rem; }
.rp-ic { display: flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 16px; background: #d84497; color: #fff9ff; }
.rp-gifts-id h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.rp-gifts-id p { font-size: 14px; color: #795e7f; }
.rp-toggle { display: flex; min-height: 2.75rem; align-items: center; gap: .25rem; border: none; background: none; border-radius: 999px; padding: 0 .75rem; font-size: 14px; font-weight: 600; color: #d84497; cursor: pointer; font-family: inherit; }
.rp-gifts-note { padding: .5rem 1.25rem 1.25rem; font-size: 14px; line-height: 1.55; color: #795e7f; }
.rp-gifts-list { margin-top: 0; display: grid; gap: .75rem; padding: 0 1.25rem 1.25rem; }
.rp-gift { display: flex; flex-direction: column; gap: .75rem; border-radius: 18px; border: 1px solid #e7d8eb; background: #fff; padding: 1rem; }
.rp-gift-id { display: flex; align-items: flex-start; gap: .75rem; }
.rp-gift-ic { display: flex; height: 2.25rem; width: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 14px; background: #a2f0e0; color: #003e43; }
.rp-gift-id .rp-gs { font-size: 16px; font-weight: 600; color: #361e3b; }
.rp-gift-id .rp-gm { font-size: 14px; color: #795e7f; }
.rp-gstat { display: inline-flex; align-items: center; align-self: flex-start; gap: .375rem; white-space: nowrap; border-radius: 999px; padding: .375rem .75rem; font-size: 13px; font-weight: 600; }
.rp-gstat.rp-added { background: rgba(2,158,114,.15); color: #029e72; }
.rp-gstat.rp-ready { background: #a2f0e0; color: #003e43; }
.rp-gstat .rp-dot { height: .5rem; width: .5rem; border-radius: 999px; background: currentColor; }
.rp-empty { padding: 0; font-size: 14px; color: #795e7f; }

/* tracking */
.rp-track-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.rp-track-head .rp-l { display: flex; align-items: center; gap: .5rem; }
.rp-track-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.rp-live { display: inline-flex; align-items: center; gap: .375rem; border-radius: 999px; background: rgba(2,158,114,.15); padding: .25rem .6rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #029e72; }
.rp-live .rp-pulse { position: relative; display: inline-flex; height: .5rem; width: .5rem; }
.rp-live .rp-pa { position: absolute; inset: 0; border-radius: 999px; background: #029e72; opacity: .75; animation: rp-ping 1s cubic-bezier(0,0,.2,1) infinite; }
.rp-live .rp-pb { position: relative; height: .5rem; width: .5rem; border-radius: 999px; background: #029e72; }
@keyframes rp-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.rp-track-head .rp-won { font-size: 14px; font-weight: 600; color: #795e7f; }
.rp-track-list { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.rp-tcard { border-radius: 22px; border: 1px solid #e7d8eb; background: #fff; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.rp-tcard.rp-unlocked { border-color: rgba(2,158,114,.3); }
.rp-tcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.rp-tcard-head h3 { font-size: 16px; font-weight: 700; }
.rp-badge { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; border-radius: 999px; padding: .375rem .75rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.rp-badge.rp-win { background: rgba(2,158,114,.15); color: #029e72; }
.rp-badge.rp-prog { background: #a2f0e0; color: #003e43; }
.rp-section .rp-msg { margin-top: 32px; border-radius: 18px; padding: 1rem; font-size: 15px; line-height: 1.55; color: #361e3b; }
.rp-msg.rp-win { background: rgba(2,158,114,.1); }
.rp-msg.rp-prog { background: #f8eefa; }

/* progress track */
.rp-steps { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rp-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.rp-step:last-child { flex: none; }
.rp-conn { position: absolute; right: 50%; top: 1.25rem; height: 2px; width: 100%; transform: translateY(-50%); }
.rp-conn.rp-cp { background: #d84497; }
.rp-conn.rp-cs { background: #029e72; }
.rp-conn.rp-cb { background: #e7d8eb; }
.rp-node { position: relative; z-index: 2; display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid; font-size: 14px; font-weight: 700; }
.rp-node.rp-complete { border-color: #d84497; background: #d84497; color: #fff9ff; }
.rp-node.rp-current { border-color: #d84497; background: #fff; color: #d84497; }
.rp-node.rp-todo { border-color: #e7d8eb; background: #fff; color: #795e7f; }
.rp-node.rp-wonn { border-color: #029e72; background: #029e72; color: #fff9ff; }
.rp-node.rp-locked { border-color: #e7d8eb; background: #fff; color: #795e7f; }
.rp-slbl { text-align: center; font-size: 13px; font-weight: 500; line-height: 1.2; }
.rp-slbl.rp-fg { color: #361e3b; }
.rp-slbl.rp-pm { color: #d84497; }
.rp-slbl.rp-mu { color: #795e7f; }

/* the "Invite a friend" button at the top of the profile */
.rp-invite-cta { display: inline-flex; align-items: center; gap: .5rem; background: #d84497; color: #fff !important; border: none; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 2px 8px rgba(216,68,151,.3); }
.rp-invite-cta:hover { background: #c63d88; color: #fff !important; }
.rp-cta-wrap { margin: 4px 15px 16px; }

@media (min-width: 560px) {
  .rp-h1 { font-size: 34px; }
  .rp-grid { grid-template-columns: 1fr 1fr; }
  .rp-btn-outline { width: auto; }
  .rp-gift { flex-direction: row; align-items: center; justify-content: space-between; }
  .rp-gstat { align-self: center; }
}

/* T-184 referral credits banner inside the admin "Create Treatment Plan" form (.rpc-*) */
.rpc-banner { border: 1px solid #e6d4b0; background: linear-gradient(180deg,#fffdf8,#fff8ec); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.rpc-head { font-size: 15px; font-weight: 700; color: #7a5a23; }
.rpc-count { display: inline-block; background: #B9955C; color: #1a1407; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: 4px; }
.rpc-note { margin: 4px 0 12px; font-size: 12.5px; color: #8a7a5c; }
.rpc-list { display: flex; flex-direction: column; gap: 8px; }
.rpc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #e6d4b0; border-radius: 9px; padding: 9px 12px; }
.rpc-row--active { border-color: #B9955C; box-shadow: 0 0 0 2px rgba(185,149,92,.2); }
.rpc-txt { flex: 1; font-size: 13.5px; font-weight: 700; color: #3a2f1a; min-width: 160px; }
.rpc-txt small { display: block; font-weight: 400; color: #9a8a6c; font-size: 11.5px; margin-top: 1px; }
.rpc-apply { background: #B9955C; color: #1a1407; border: none; font-weight: 700; }
.rpc-apply:hover { background: #a8854e; color: #1a1407; }
.rpc-applied-tag { display: none; font-size: 12.5px; font-weight: 700; color: #13733b; background: #eafaef; border: 1px solid #bfe8cb; border-radius: 7px; padding: 6px 10px; }
.rpc-applied-tag .rpc-remove { color: #b0266b; margin-left: 6px; text-decoration: underline; }
input.rpc-free { background: #fff8ec !important; color: #7a5a23 !important; font-weight: 700; }
.rpa-attribute { margin-top: 18px; }
.rpa-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rpa-form .rpa-in { flex: 1 1 200px; width: auto; min-width: 180px; max-width: 340px; }
.rpa-msg { background: #eafaef; border: 1px solid #bfe8cb; color: #13733b; border-radius: 7px; padding: 8px 11px; font-size: 13px; margin-bottom: 10px; }

/* T-185: referral attribution box below customer-details (collapsed button -> form, or "Referred by" line) */
.rpa-box-wrap { margin: 12px 0; }
.rpa-known { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 10px; background: #eafaef; border: 1px solid #bfe8cb; font-size: 13.5px; font-weight: 600; color: #13733b; }
.rpa-known a { color: #0e5f30; font-weight: 700; text-decoration: underline; }
.rpa-box { border: 1px solid #dcc6f5; border-radius: 10px; background: #faf6ff; overflow: hidden; }
.rpa-box[open] { background: #fff; }
.rpa-box > summary { list-style: none; cursor: pointer; display: block; padding: 11px 13px; font-size: 13.5px; font-weight: 700; color: #6b21a8; user-select: none; }
.rpa-box > summary::-webkit-details-marker { display: none; }
.rpa-box > summary:hover { background: #f4ecfd; }
.rpa-box-body { padding: 0 13px 13px; }
.rpa-box-note { font-size: 12.5px; color: #8a7a5c; margin: 0 0 10px; line-height: 1.45; }
.rp-giftico { vertical-align: -3px; flex-shrink: 0; }

/* T-185 host-an-event card (.rpe-*) — reuses the .rp-* tokens/components */
.rpe-types { display: flex; gap: 10px; flex-wrap: wrap; }
.rpe-type { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; border: 1px solid #e7d8eb; border-radius: 12px; padding: 10px 13px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rpe-type input { accent-color: #d84497; }
.rpe-opt { color: #b9a9bf; font-weight: 400; }
.rpe-video { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: #5d2869; }
.rpe-video input { accent-color: #d84497; }
.rpe-friends { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rpe-friend { border: 1px solid #efe6f2; border-radius: 14px; padding: 12px; background: #fdfbff; }
.rpe-friend-row2 { margin-top: 8px; }
.rpe-reward { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(2,158,114,.1); color: #029e72; font-size: 13px; font-weight: 600; line-height: 1.35; }
.rpe-reward-ic { display: inline-flex; flex-shrink: 0; }
.rpe-reward strong { font-weight: 800; }
.rpe-remove { margin-top: 8px; background: none; border: none; color: #b0266b; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.rpe-add, .rpe-submit { width: 100%; margin-top: 12px; }
.rpe-count { opacity: .7; font-weight: 600; }

/* T-185 per-friend live availability slot picker — up to 9 slots in an even 3-up grid */
.rpe-friend .rp-grid { margin-top: 8px; }
.rpe-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 38px; align-items: start; }
.rpe-slot { width: 100%; box-sizing: border-box; text-align: center; background: #fff; border: 1px solid #e3d3ea; border-radius: 8px; padding: 13px 4px; font-size: 14px; font-weight: 600; color: #5d2869; cursor: pointer; transition: all .12s; }
.rpe-slot:hover { border-color: #d84497; }
.rpe-slot.is-selected { background: #d84497; border-color: #d84497; color: #fff; }
.rpe-slot-hint { grid-column: 1 / -1; align-self: center; font-size: 13px; color: #b9a9bf; }

/* T-185 event-flow date popup — reproduces the v0 booking calendar (#v0-step2) design, floating as a popup */
.ui-datepicker.rpe-dp { width: 330px !important; max-width: calc(100vw - 20px) !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; overflow: hidden !important; background: #fff !important; box-shadow: 0 16px 40px rgba(15,23,42,.22) !important; padding: 0 !important; z-index: 99999; }
.ui-datepicker.rpe-dp .ui-datepicker-header { background: linear-gradient(160deg, #475569, #64748b) !important; border: none !important; border-radius: 20px 20px 0 0 !important; color: #fff !important; padding: 18px 14px !important; }
.ui-datepicker.rpe-dp .ui-datepicker-title { color: #fff !important; font-weight: 700 !important; font-size: 17px !important; }
.ui-datepicker.rpe-dp .ui-datepicker-prev, .ui-datepicker.rpe-dp .ui-datepicker-next { top: 16px !important; cursor: pointer !important; border: none !important; background: none !important; }
.ui-datepicker.rpe-dp .ui-datepicker-prev .ui-icon, .ui-datepicker.rpe-dp .ui-datepicker-next .ui-icon { background-image: none !important; text-indent: -9999px !important; overflow: hidden !important; }
.ui-datepicker.rpe-dp .ui-datepicker-prev:after { content: '\2039'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; left: 10px; top: -2px; }
.ui-datepicker.rpe-dp .ui-datepicker-next:after { content: '\203A'; color: rgba(255,255,255,0.8); font-size: 24px; position: absolute; right: 10px; top: -2px; }
.ui-datepicker.rpe-dp th { font-size: 11px !important; font-weight: 600 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 0 6px !important; border: none !important; background: none !important; }
.ui-datepicker.rpe-dp td { padding: 3px 0 !important; border: none !important; background: none !important; }
.ui-datepicker.rpe-dp td a.ui-state-default,
.ui-datepicker.rpe-dp td span.ui-state-default { text-align: center !important; border-radius: 5px !important; width: 38px !important; height: 38px !important; line-height: 38px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; color: #334155 !important; font-size: 14px !important; font-weight: 500 !important; }
.ui-datepicker.rpe-dp td a.ui-state-default:hover { background: rgba(91,107,138,.1) !important; }
.ui-datepicker.rpe-dp td.ui-datepicker-today a.ui-state-default,
.ui-datepicker.rpe-dp td.ui-datepicker-today span.ui-state-default { background: linear-gradient(135deg, rgb(201,169,98), rgb(184,153,82)) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
.ui-datepicker.rpe-dp td.ui-datepicker-current-day a.ui-state-default { background: linear-gradient(135deg, rgb(91,107,138), rgb(123,139,168)) !important; color: #fff !important; font-weight: 700 !important; border: none !important; }
.ui-datepicker.rpe-dp td.ui-datepicker-today.ui-datepicker-current-day a.ui-state-default { background: linear-gradient(135deg, rgb(201,169,98), rgb(184,153,82)) !important; color: #fff !important; border: none !important; }
.ui-datepicker.rpe-dp .ui-state-disabled span, .ui-datepicker.rpe-dp .ui-state-disabled { color: #e2e8f0 !important; }
.ui-datepicker.rpe-dp .ui-datepicker-calendar { border-collapse: collapse !important; width: 100% !important; }

/* T-185 admin events dashboard + tracker "Event" pill */
.ev-wrap { margin-top: 20px; padding-bottom: 40px; }
.ev-title { margin-bottom: 12px; }
.ev-meta { color: #6b6b6b; margin-bottom: 14px; }
.ev-back { margin-bottom: 6px; }
.ev-hint { margin-top: 12px; font-size: 13px; }
.ev-table td, .ev-table th { vertical-align: middle; }
.rp-evpill { display: inline-block; margin-left: 8px; background: rgba(216,68,151,.12); color: #b0266b; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }

/* T-187 "course of 6" cards on the patient profile (.rpcourse-*) — reuses .rp-* tokens */
.rpcourse-section { order: -2; display: flex; flex-direction: column; gap: 1.4rem; }
.rp-stack .rp-track-section { order: 2; } /* push single-referrals list below the course + booking cards */
.rpcourse-card { border-radius: 22px; border: 1px solid rgba(216,68,151,.2); background: #fff; padding: 1.4rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.rpcourse-card.rpcourse-done { border-color: rgba(224,150,47,.45); box-shadow: 0 6px 22px rgba(224,150,47,.14); }
/* service logo, centered on top of the card */
.rpcourse-logowrap { display: flex; justify-content: center; margin-bottom: 1.15rem; }
/* fallback: gradient rounded badge holds the generic icon (services with no logo file, e.g. Sofwave) */
.rpcourse-logo { width: 76px; height: 76px; flex-shrink: 0; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d84497, #a855f7); color: #fff9ff; }
/* a real brand logo renders at its natural aspect ratio (sized by height) — no badge, no letterboxing */
.rpcourse-logo--img { width: auto; height: auto; border-radius: 0; overflow: visible; background: none; }
.rpcourse-logo--img img { height: 76px; width: auto; max-width: 240px; object-fit: contain; display: block; }

/* pink "Your course of 6" progress sub-card */
.rpcourse-progress { border-radius: 20px; background: rgba(216,68,151,.06); padding: 1.15rem 1.2rem 1.25rem; }
.rpcourse-phead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.1rem; }
.rpcourse-ptitle { display: inline-flex; align-items: center; gap: .5rem; font-size: 16px; font-weight: 700; color: #5d2869; }
.rpcourse-ptitle svg { color: #d84497; }
.rpcourse-pcount { font-size: 16px; font-weight: 700; color: #d84497; white-space: nowrap; }

/* track: 6 columns (5 friends + crown), each a node above a progress-bar pill; fills on PAID only */
.rpcourse-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: start; }
.rpcourse-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.rpcourse-node { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.rpcourse-node--todo { background: rgba(216,68,151,.14); color: #c489ac; }
.rpcourse-node--done { background: #d84497; color: #fff9ff; }
.rpcourse-node--crown { background: rgba(224,150,47,.16); color: #d49a2e; }
.rpcourse-node--crown.is-won { background: linear-gradient(135deg, #f4c33a, #e0962f); color: #fff; box-shadow: 0 3px 10px rgba(224,150,47,.4); }
.rpcourse-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(216,68,151,.14); }
.rpcourse-bar--done { background: #d84497; }
.rpcourse-bar--crown { background: rgba(224,150,47,.22); }
.rpcourse-bar--crown.is-won { background: linear-gradient(90deg, #f4c33a, #e0962f); }

.rp-section .rpcourse-note { margin-top: 1.75rem; margin-bottom: 0; font-size: 14px; line-height: 1.5; color: #795e7f; }
.rpcourse-note-win { color: #0d7a52; font-weight: 600; }
.rpcourse-stats { margin-top: 1.1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rpcourse-stat { border: 1px solid #f1d9e8; border-radius: 16px; padding: .85rem 1.05rem; background: rgba(216,68,151,.05); }
.rpcourse-stat-l { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b0568f; }
.rpcourse-stat b { display: block; margin-top: 4px; font-size: 30px; font-weight: 800; color: #b0266b; }
.rpcourse-crownmini { color: #e0962f; vertical-align: -2px; }

.rpcourse-guests { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rpcourse-guest { display: block; border: 1px solid #efe6f2; border-radius: 12px; padding: 12px; background: #fff; }
.rpcourse-gtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }  /* compact avatar+name | status+time */
.rpcourse-gleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }          /* avatar + name, vertically centered */
.rpcourse-gright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; text-align: right; }  /* status + consult time, stacked */
.rpcourse-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #d84497, #a855f7); }
.rpcourse-gname { flex: 1; font-size: 14px; font-weight: 600; color: #361e3b; min-width: 0; line-height: 1.25; }
.rpcourse-glast { display: block; font-size: 12px; font-weight: 400; color: #795e7f; }
/* consult day + time — colour comes from the guest's status class (green/amber/blue) */
.rpcourse-gwhen { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.rpcourse-gwhen svg { flex-shrink: 0; }
.rpcourse-gbadge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 0; font-size: 12px; font-weight: 700; }
.rpcourse-gpaid { background: rgba(2,158,114,.14); color: #029e72; }      /* eligible for benefit — green */
.rpcourse-gbooked { background: #e9f1fb; color: #2f6fb0; }                /* consultation booked — blue */
.rpcourse-gattended { background: #fbf0df; color: #b9791b; }             /* attended consultation — amber */
.rpcourse-remove { display: none; width: 26px; height: 26px; flex-shrink: 0; border: none; border-radius: 50%; background: #f7e7ef; color: #b0266b; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.rpcourse-remove:hover { background: #f0cfdd; }
.rpcourse-remove:disabled { opacity: .5; cursor: default; }

.rpcourse-add { margin-top: 12px; border: 1px dashed #d9b8e8; border-radius: 14px; overflow: hidden; }
.rpcourse-add > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 11px 13px; font-size: 14px; font-weight: 700; color: #9159a6; }
.rpcourse-add > summary::-webkit-details-marker { display: none; }
.rpcourse-add[open] > summary { border-bottom: 1px solid #efe0f3; }
.rpcourse-addbody { padding: 12px 13px 13px; }
.rpcourse-goldtag { display: inline-block; margin-left: 6px; background: linear-gradient(135deg, #f4c33a, #e0962f); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 800; vertical-align: 1px; }

/* T-187 "Host an event" hero header — larger pink title flanked by sparkles, with extra spacing.
   Scoped to the title + sub so the form fields below stay left-aligned. Two-class selectors beat .rp-card h2. */
.rp-event-hero .rp-event-title { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #c2367f; }
.rp-event-hero .rp-event-title .rp-event-star { display: inline-flex; flex-shrink: 0; color: #d84497; }
.rp-event-hero .rp-sub { margin-top: 1.15rem; text-align: center; }

/* T-189 status tint for a link "form completed" guest (pre-booking) — purple */
.rpcourse-gform { background: #f3eaf7; color: #9159a6; }

/* T-189 per-guest journey card (block layout with a compact stepper + caption) */
.rpguest-sep { border-top: 1px solid rgba(0,0,0,.08); margin: .85rem -12px 0; } /* full-bleed divider */
.rpguest-via { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9159a6; background: #f3eaf7; border-radius: 999px; padding: 2px 7px; }
.rpguest-via svg { flex-shrink: 0; }
.rpguest-steps { margin: .85rem 0 0; }
.rpguest-steps .rp-step:last-child { flex: 1 1 0; } /* let the final step flex so its connector bridges */
.rpguest-steps .rp-node { height: 30px; width: 30px; font-size: 12px; }
.rpguest-steps .rp-conn { top: 15px; }
.rpguest-steps .rp-slbl { font-size: 11px; }
.rpguest-cap { margin-top: .7rem; font-size: 13px; line-height: 1.4; color: #6b4f72; }

/* T-189 "Share your link" card — filled magenta panel, white text, link in a translucent box */
.rp-share { margin-top: 1.2rem; border-radius: 22px; background: linear-gradient(160deg, #cf3a90, #b4297c); padding: 1.4rem 1.3rem; color: #fff9ff; }
.rp-share-title { display: flex; align-items: center; gap: .6rem; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #fff9ff; }
.rp-share-title svg { flex-shrink: 0; }
.rp-share-sub { margin-top: .55rem; font-size: 14.5px; line-height: 1.5; color: rgba(255,249,255,.85); }
.rp-share-box { margin-top: 1.1rem; border-radius: 18px; background: rgba(255,255,255,.14); padding: .85rem .9rem; }
.rp-share-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,249,255,.72); margin-bottom: .5rem; }
.rp-share-linkrow { display: flex; gap: 8px; align-items: stretch; }
.rp-share-input { flex: 1; min-width: 0; min-height: 48px; border: none; border-radius: 12px; background: rgba(255,255,255,.16); padding: 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #fff9ff; outline: none; }
.rp-share-copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: 0 16px; border: none; border-radius: 12px; background: #fff9ff; color: #c2367f; font-size: 14px; font-weight: 700; cursor: pointer; }
.rp-share-copy:hover { background: #fff; }
.rp-share-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; border: none; }
.rp-share-wa, .rp-share-sms { background: #fff9ff; color: #c2367f; }
.rp-share-wa:hover, .rp-share-sms:hover { background: #fff; color: #c2367f; }
.rp-share-more { width: 100%; margin-top: 10px; background: #e6c565; color: #5a4718; }
.rp-share-more:hover { background: #ddb94f; color: #5a4718; }

/* T-189 TEMP: patient-facing referral surface hidden on the magic-link profile (hero CTA banner +
   the whole referral section) — not ready to go live. Staff-facing admin events are unaffected.
   Remove this rule to re-enable. */
.rp-cta-wrap, .rp-section { display: none !important; }

/* ===== Patient-profile action buttons row =====
   Scoped to #pt-action-buttons so the global .title_b / .btn styles (used elsewhere) are untouched. */
#pt-action-buttons { margin: 16px 0; }   /* breathing room above (notes) and below */
/* :not(.badge) so the "unread" count span is left alone (it's an absolute corner badge, not text). */
#pt-action-buttons .title_b.create span:not(.badge) { font-size: 13px; padding: 11px 14px; }
/* match the .btn buttons (e.g. .toggle-multi-session-mode) to the .title_b ones — its own
   rule sets 15px font + 15px padding, so override both here (id beats its single class). */
#pt-action-buttons > .btn { font-size: 13px; padding: 11px 14px; }
/* anchor the unread badge to its own button's top-right corner (was becoming a full-width pill). */
#pt-action-buttons > .title_b.create { position: relative; }
#pt-action-buttons > .title_b.create > .badge.bg-danger { position: absolute; top: -8px; right: -6px; left: auto; margin: 0; z-index: 2; }
@media (max-width: 767px) {
    #pt-action-buttons { margin: 14px 0; }
    /* two buttons per line. The container's INLINE gap:10px wins over any stylesheet gap, so the
       width must subtract 6px (>= half the 10px gap) or the 2nd button overflows and wraps.
       Explicit width (not calc-in-`flex`, which is flaky on mobile) + border-box keeps it exact. */
    #pt-action-buttons > .title_b.create,
    #pt-action-buttons > .btn {
        box-sizing: border-box;
        width: calc(50% - 6px);
        flex: 0 0 auto;
        margin: 0;
        min-width: 0;
    }
    #pt-action-buttons > .title_b.create > span:not(.badge) {
        display: block;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
        font-size: 12px;
        padding: 12px 4px;
    }
    #pt-action-buttons > .btn {
        white-space: normal;
        text-align: center;
        font-size: 12px;
        padding: 12px 4px;
    }
}

/* ===== GoCardless prominent golden circle buttons (above Treatment Plans) ===== */
/* TEMP KILL-SWITCH (2026-07-09): GoCardless account is under review, so hide the
   create-link circle + panel. Pay360 circle/panel stay live. Backend stays live
   (webhook, received list, allocation). DELETE THIS BLOCK to restore GoCardless. */
.gc-circle-btn[data-target="#xpand_gocardless"], #xpand_gocardless { display: none !important; }
.gc-circles-wrap { margin: 8px 0 18px; }
.gc-circles { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.gc-circle-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; width: 90px; text-align: center; -webkit-tap-highlight-color: transparent; }
.gc-circle {
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f6cf4e, #d9912b);
    color: #fff; font-size: 28px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(193, 138, 30, .45);
    border: 3px solid #ffe9a8;
    transition: transform .12s ease, box-shadow .12s ease;
}
.gc-circle .glyphicon { font-size: 25px; top: 0; }
.gc-circle-btn:hover .gc-circle { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(193, 138, 30, .55); }
.gc-circle-btn:active .gc-circle { transform: translateY(0); }
.gc-circle__label { margin-top: 8px; font-size: 12px; font-weight: 700; color: #8a5a00; line-height: 1.15; }

/* ===== GoCardless (Instant Bank Pay) link panel ===== */
.gc-panel { background: #f4f9f6; border: 1px solid #cfe6da; border-radius: 8px; padding: 18px 20px; margin-top: 12px; margin-bottom: 16px; }
.gc-panel__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #14503a; }
.gc-badge { display: inline-block; margin-left: 8px; background: #1a8754; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.gc-help { color: #52606d; font-size: 13px; margin: 0 0 14px; }
.gc-create { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.gc-field { display: flex; flex-direction: column; }
.gc-field label { font-size: 12px; font-weight: 600; color: #3e4c59; margin-bottom: 4px; }
.gc-field .gc-amount { width: 160px; }
.gc-optional, .gc-field--btn { font-weight: 400; }
.gc-field--btn { justify-content: flex-end; }
.gc-result { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #cfe6da; }
.gc-result__label { font-size: 12px; font-weight: 600; color: #3e4c59; }
.gc-linkrow { display: flex; gap: 8px; margin-bottom: 10px; }
.gc-linkrow .gc-link { font-family: monospace; font-size: 12px; }
.gc-send { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gc-send-status { font-size: 13px; }
.gc-msg { margin-top: 12px; font-size: 14px; font-weight: 600; }
/* Received bank payments (always-visible list) */
.gc-received { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 8px; padding: 16px 20px; margin-top: 12px; }
.gc-recv__row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid #f0e3c6; }
.gc-recv__row:last-child { border-bottom: 0; }
.gc-recv__row.is-allocated { opacity: .7; }
.gc-recv__amt { font-weight: 800; color: #8a5a00; min-width: 90px; font-size: 16px; }
.gc-recv__date { color: #6b7785; font-size: 13px; min-width: 130px; flex: 1; }
.gc-alloc-toggle { min-width: 140px; }
/* Pending (unpaid) links */
.gc-badge--amber { background: #d9822b; }
.gc-pending-wrap { background: #fbf7ff; border: 1px solid #e3d5f0; border-radius: 8px; padding: 16px 20px; margin-top: 12px; }
.gc-links-page { background: #fff; padding-bottom: 24px; }
.gc-links-page .gc-pending { margin-top: 10px; }
.gc-pend__row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #eee; }
.gc-pend__row:last-child { border-bottom: 0; }
.gc-pend__row.is-expired { opacity: .6; }
.gc-pend__amt { font-weight: 800; color: #4b3b63; min-width: 80px; font-size: 16px; }
.gc-pend__who { min-width: 160px; font-weight: 600; }
.gc-pend__meta { color: #6b7785; font-size: 12px; flex: 1; min-width: 180px; }
.gc-pend__exp { color: #c0392b; font-weight: 700; text-transform: uppercase; }
.gc-pend__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gc-pend-status { font-size: 12px; }

/* T-190 TEMP kill-switch (2026-07-03) — gift UI hidden so an unrelated prod bugfix can
   deploy before the feature launches (mirrors the T-189 .rp-section switch below it).
   Hides: the "Gift Sessions" button + panel on admin/patient_history and the gift card
   on the magic-link profile. Backend stays live (/redeem-gift, endpoints, credits).
   DELETE THIS BLOCK to launch Gift Sessions. */
#pt-action-buttons [data-target="#xpand_gift"], #xpand_gift, .gs-profile { display: none !important; }

/* ============================================================
   T-190 GIFT SESSIONS (.gs-*)
   Three surfaces: (1) staff panel on admin/patient_history,
   (2) host share card on the magic-link profile,
   (3) public claim page /redeem-gift (brand colour arrives as
       the --gs-brand custom property set per-service by the view).
   ============================================================ */

/* ---------- (1) staff panel ---------- */
.gs-panel { background: #fdfaf5; border: 1px solid #ead9bd; border-radius: 10px; padding: 18px 20px; margin: 12px 0; }
.gs-panel__title { margin: 0 0 6px; font-weight: 800; color: #3d3427; }
.gs-badge { display: inline-block; background: #b9955c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; vertical-align: middle; margin-left: 8px; }
.gs-help { color: #6b6353; font-size: 13px; margin: 0 0 14px; }
.gs-create { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.gs-cfield { min-width: 240px; }
.gs-cfield label { font-size: 12px; font-weight: 700; color: #6b6353; display: block; margin-bottom: 4px; }
.gs-cfield--btn { min-width: 0; }
.gs-result { margin-top: 14px; }
.gs-result__label { font-size: 12px; font-weight: 700; color: #6b6353; display: block; margin-bottom: 4px; }
.gs-linkrow { display: flex; gap: 8px; }
.gs-linkrow .gs-link { flex: 1; font-size: 13px; }
.gs-send { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gs-send-status { font-size: 12px; }
.gs-msg { margin-top: 10px; font-size: 13px; font-weight: 600; }
.gs-list { margin-top: 20px; border-top: 1px dashed #ead9bd; padding-top: 14px; }
.gs-list__title { font-size: 15px; }
.gs-row { background: #fff; border: 1px solid #eee3cf; border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.gs-row--off { opacity: 0.55; }
.gs-row__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gs-row__svc { font-weight: 800; color: #3d3427; }
.gs-row__meta { color: #8a8171; font-size: 12px; }
.gs-row__earned { color: #a07a1e; font-size: 12px; font-weight: 700; }
.gs-row__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.gs-row-status { font-size: 12px; }
.gs-claims { list-style: none; margin: 10px 0 0; padding: 0; }
.gs-claim { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-top: 1px dotted #f0e8d8; }
.gs-claim__name { font-weight: 600; color: #3d3427; min-width: 140px; }
.gs-claim-void { padding: 0 4px; color: #c0392b; }
.gs-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; }
.gs-chip--booked { background: #e7f0fb; color: #2b5f9e; }
.gs-chip--in { background: #e5f5ea; color: #1a7a41; }
.gs-chip--paid { background: #fbf1d8; color: #a07a1e; }
.gs-chip--cancelled { background: #fde8e6; color: #b03a2e; }
.gs-chip--noshow { background: #f2f2f2; color: #777; }

/* ---------- (2) host profile card (mirrors the T-187 .rpcourse-* course-card look) ---------- */
.gs-profile { max-width: 640px; margin: 26px auto; padding: 0 10px; }
.gs-card { background: #fff; border: 1px solid rgba(216, 68, 151, 0.2); border-radius: 22px; padding: 1.4rem; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.gs-logowrap { display: flex; justify-content: center; margin-bottom: 0.55rem; }
.gs-tagline { text-align: center; margin: 0 0 1.15rem; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c2367f; }
.gs-logo img { height: 76px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.gs-logofall { width: 76px; height: 76px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d84497, #a855f7); color: #fff9ff; }
.gs-panelpink { border-radius: 20px; background: rgba(216, 68, 151, 0.06); padding: 1.15rem 1.2rem 1.25rem; }
.gs-phead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; }
.gs-ptitle { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 800; color: #2d1533; }
.gs-ptitle svg { color: #c2367f; flex-shrink: 0; }
.gs-pcount { font-size: 15px; font-weight: 800; color: #d84497; white-space: nowrap; }
.gs-pnote { margin: 0; font-size: 13.5px; line-height: 1.55; color: #6c5a72; }
.gs-stats { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.gs-stat { border: 1px solid #f1d9e8; border-radius: 16px; padding: 0.85rem 1.05rem; background: rgba(216, 68, 151, 0.05); }
.gs-stat-l { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b0568f; }
.gs-stat b { display: block; margin-top: 4px; font-size: 30px; font-weight: 800; color: #b0266b; }
/* Share block mirrors the referral share layout: light rounded box with a pill input +
   pill Copy, then WhatsApp/SMS pills on one row and a full-width "Share another way",
   all in the gift magenta. */
.gs-share { margin-top: 16px; }
.gs-share-box { background: rgba(216, 68, 151, 0.07); border-radius: 18px; padding: 14px 14px 16px; }
.gs-share-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #b0568f; margin: 2px 2px 10px; }
.gs-share-linkrow { display: flex; gap: 8px; align-items: stretch; }
.gs-share-input { flex: 1; border: 0; border-radius: 999px; padding: 11px 16px; font-size: 13px; font-family: Menlo, Consolas, monospace; color: #55284a; background: #fff; min-width: 0; }
.gs-share-copy { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #cf3a90, #b4297c); color: #fff; font-weight: 800; font-size: 14px; padding: 11px 20px; cursor: pointer; white-space: nowrap; }
.gs-share-actions { display: flex; gap: 10px; margin-top: 12px; }
.gs-share-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #cf3a90, #b4297c); color: #fff; font-weight: 700; font-size: 14.5px; padding: 13px 12px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.gs-share-btn:hover, .gs-share-btn:focus { background: linear-gradient(135deg, #b93381, #9c2069); color: #fff; text-decoration: none; }
.gs-share-web { display: flex; width: 100%; margin-top: 10px; }
.gs-guests { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gs-guest { display: block; border: 1px solid #efe6f2; border-radius: 12px; padding: 12px; }
.gs-gtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs-gleft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.gs-gright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; text-align: right; }
.gs-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #d84497, #a855f7); }
.gs-gname { flex: 1; font-size: 14px; font-weight: 600; color: #361e3b; min-width: 0; line-height: 1.25; }
.gs-glast { display: block; font-size: 12px; font-weight: 400; color: #795e7f; }
.gs-gbadge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.gs-gwhen { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.gs-gwhen svg { flex-shrink: 0; }
.gs-gnote { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #a07a1e; }
.gs-gpaid { background: rgba(2, 158, 114, 0.14); color: #029e72; }     /* purchased a package — green */
.gs-gbooked { background: #e9f1fb; color: #2f6fb0; }                   /* session booked — blue */
.gs-gattended { background: #fbf0df; color: #b9791b; }                 /* attended their session — amber */
.gs-gcancel { background: #f4f2f2; color: #8a8484; }                   /* cancelled — grey */
.gs-tracker-empty { margin: 14px 2px 0; color: #7a6c76; font-size: 13px; }
.gs-earned { margin: 14px 2px 0; padding: 10px 12px; background: #fbf1d8; border-radius: 9px; color: #7c5d13; font-size: 13px; font-weight: 700; }

/* ---------- (3) public claim page ---------- */
.gs-claim-body { background: #f4f2ee; font-family: 'Helvetica Neue', Arial, sans-serif; }
.gs-shell { max-width: 560px; margin: 26px auto 50px; background: #fff; border-radius: 16px; padding: 0 0 26px; box-shadow: 0 6px 26px rgba(40, 32, 20, 0.1); overflow: hidden; }
.gs-brandbar { background: #1c1a17; padding: 18px 22px; text-align: center; }
.gs-brandlogo { max-height: 46px; max-width: 220px; }
.gs-brandname { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.gs-hero { text-align: center; padding: 24px 24px 6px; }
.gs-gifticon { color: var(--gs-brand, #b9955c); line-height: 1; }
.gs-gifticon--muted { color: #b8b2a7; }
.gs-title { font-size: 22px; font-weight: 800; color: #221f1b; margin: 12px 0 6px; line-height: 1.3; }
.gs-free { color: var(--gs-brand, #b9955c); }
.gs-sub { color: #7a756c; font-size: 13px; margin: 0 0 12px; }
#gs-claim-form { padding: 16px 26px 0; }
.gs-field { margin-bottom: 14px; }
.gs-label { display: block; font-size: 12px; font-weight: 700; color: #6b6558; margin-bottom: 5px; }
.gs-input { height: 42px; font-size: 15px; border-radius: 12px; }
.gs-input.gs-date { background: #fff; cursor: pointer; }
.gs-hint { display: block; font-size: 11px; color: #a09a90; margin-top: 4px; }
.gs-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gs-slot { border: 1.5px solid #ddd3c2; border-radius: 8px; background: #fff; padding: 9px 4px; font-size: 14px; font-weight: 600; color: #443f36; cursor: pointer; }
.gs-slot--on { border-color: var(--gs-brand, #b9955c); background: var(--gs-brand, #b9955c); color: #fff; }
.gs-slots-loading, .gs-slots-none { grid-column: 1 / -1; color: #8a847a; font-size: 13px; padding: 4px 2px; }
.gs-claim-btn { width: 100%; border: 0; border-radius: 10px; background: var(--gs-brand, #b9955c); color: #fff; font-size: 16px; font-weight: 800; padding: 14px; margin-top: 6px; cursor: pointer; }
.gs-claim-btn[disabled] { opacity: 0.6; }
#gs-claim-form .gs-msg { color: #b03a2e; background: #fdf0ee; border-radius: 8px; padding: 9px 12px; }
.gs-clinicfoot { margin-top: 26px; padding: 16px 24px 0; border-top: 1px solid #eee7db; text-align: center; }
.gs-clinicfoot__name { font-size: 13px; font-weight: 700; color: #6b6558; }
.gs-clinicfoot__line { font-size: 12px; color: #a09a90; margin-top: 3px; }
.gs-success { text-align: center; padding: 34px 26px 10px; color: #221f1b; }
.gs-success-check { color: #1a8754; }
.gs-success-title { font-size: 22px; font-weight: 800; margin: 14px 0 8px; }
.gs-success-sub { color: #6b6558; font-size: 14px; }
.gs-invalid { text-align: center; padding: 44px 30px 40px; }
@media (max-width: 480px) {
    .gs-shell { margin: 0 auto 30px; border-radius: 0; }
    .gs-slots { grid-template-columns: repeat(3, 1fr); }
    .gs-create { flex-direction: column; align-items: stretch; }
    .gs-cfield { min-width: 0; }
}

/* =========================================================================
   T-191 Telepliant (gloCOM) phone integration — .tpc-*
   Calls panel on patient_history, /admin/call_logs page, click-to-dial line.
   ========================================================================= */
.tpc-panel { background: #f9f9f9; border-radius: 5px; padding: 16px 20px; margin-top: 10px; }
.tpc-title { margin: 0 0 12px; font-weight: 700; }
.tpc-badge { display: inline-block; background: #2b6cb0; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 9px; vertical-align: middle; margin-left: 6px; }
.tpc-help { color: #6b7280; font-size: 13px; margin: 6px 0 14px; }
.tpc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 4px; border-bottom: 1px solid #ececec; font-size: 13px; }
.tpc-row:last-child { border-bottom: none; }
.tpc-dir { font-weight: 700; min-width: 52px; }
.tpc-dir--in { color: #1a8754; }
.tpc-dir--out { color: #2b6cb0; }
.tpc-when { min-width: 130px; color: #374151; }
.tpc-caller { min-width: 160px; font-weight: 600; }
.tpc-caller a { color: #2b6cb0; }
.tpc-unmatched { color: #b45309; font-weight: 600; }
.tpc-lead-src { color: #6b7280; font-weight: 400; font-size: 12px; }
.tpc-num { color: #374151; min-width: 120px; }
.tpc-status { font-weight: 700; font-size: 11px; border-radius: 10px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .3px; }
.tpc-status--answered { background: #d1fae5; color: #065f46; }
.tpc-status--unanswered { background: #fee2e2; color: #991b1b; }
.tpc-status--busy, .tpc-status--unavailable { background: #fef3c7; color: #92400e; }
.tpc-status--inprogress { background: #dbeafe; color: #1e40af; }
.tpc-dur { color: #6b7280; min-width: 60px; }
.tpc-rec { color: #2b6cb0; text-decoration: underline; }
.tpc-dial { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.tpc-dial:hover { color: #2b6cb0; }
.tpc-logs-page h2 { margin-bottom: 4px; }
@media (max-width: 600px) {
    .tpc-row { gap: 8px; }
    .tpc-when, .tpc-num, .tpc-caller { min-width: 0; }
}

/* =========================================================================
   T-192 Automation Platform — .au-*
   /admin/automations: segment cards overview + segment detail lists.
   ========================================================================= */
.au-page h2 { margin-bottom: 4px; }
.au-help { color: #6b7280; font-size: 13px; margin: 6px 0 18px; }
.au-back { margin: 10px 0 0; }
.au-back a { color: #2b6cb0; }
.au-count-badge { display: inline-block; background: #2b6cb0; color: #fff; font-size: 14px; font-weight: 700; border-radius: 12px; padding: 3px 12px; vertical-align: middle; margin-left: 8px; }
.au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 30px; }
.au-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 18px; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.au-card:hover { border-color: #2b6cb0; box-shadow: 0 2px 10px rgba(43, 108, 176, .12); text-decoration: none; color: inherit; }
.au-card__count { font-size: 30px; font-weight: 800; color: #1f2937; line-height: 1.1; }
.au-card__label { font-weight: 700; color: #2b6cb0; margin-top: 2px; }
.au-card__total { font-weight: 700; color: #065f46; margin-top: 4px; }
.au-card__totalnote { font-weight: 400; color: #9ca3af; font-size: 11px; }
.au-card__desc { color: #6b7280; font-size: 12px; margin-top: 6px; line-height: 1.45; }
.au-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.au-filters label { font-size: 12px; color: #6b7280; font-weight: 600; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.au-filters .form-control { min-width: 170px; }
.au-tablewrap { overflow-x: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.au-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.au-table th { text-align: left; padding: 10px 14px; background: #f9fafb; border-bottom: 2px solid #e5e7eb; color: #374151; white-space: nowrap; }
.au-table td { padding: 9px 14px; border-bottom: 1px solid #f1f2f4; }
.au-table tr:last-child td { border-bottom: none; }
.au-table a { color: #2b6cb0; font-weight: 600; }
.au-val { font-weight: 700; }
/* 'packages' segment renderer (S0): stacked plan lines + session pills */
.au-pkgcell { min-width: 220px; }
.au-pkg-total { display: block; font-weight: 700; font-size: 15px; color: #111827; margin-bottom: 3px; }
.au-pkg-line { display: block; font-size: 12px; color: #4b5563; line-height: 1.5; white-space: nowrap; }
.au-pkg-line em { font-style: normal; color: #9ca3af; }
/* per-plan states: amber = money still owed (with the due amount); green =
   paid in full; red count = sessions still to use on a paid plan. Fully
   settled plans collapse into the <details> expander below the live ones. */
.au-pkg-line.is-settled { color: #15803d; }
.au-pkg-line.is-owing { color: #b45309; font-weight: 600; }
.au-pkg-line.is-owing em { color: #d97706; font-weight: 600; }
.au-pkg-line.is-open { color: #15803d; }
.au-left-red { color: #b91c1c; font-weight: 700; margin-left: 4px; }
.au-pkg-line .au-sesspill { margin: 0 0 0 6px; padding: 1px 8px; font-size: 11px; vertical-align: 1px; }
.au-pkg-more { margin-top: 3px; }
.au-pkg-more summary { cursor: pointer; list-style: none; font-size: 11px; color: #6b7280; user-select: none; }
.au-pkg-more summary::-webkit-details-marker { display: none; }
.au-pkg-more summary::before { content: '+ '; font-weight: 700; color: #15803d; }
.au-pkg-more[open] summary::before { content: '\2212 '; }
.au-sesspill.is-zero { background: #e5e7eb; border-color: #d1d5db; color: #374151; }
.au-sesspill.is-zero strong { color: #374151; }
.au-sesspill.is-zero .au-sesspill__of { color: #6b7280; }
.au-sesspill.is-fresh { background: #7c3aed; border-color: #7c3aed; color: #ffffff; }
.au-sesspill.is-fresh strong { color: #ffffff; }
.au-sesspill.is-fresh .au-sesspill__of { color: rgba(255, 255, 255, .75); }
.au-balcell { color: #b45309; white-space: nowrap; }
.au-sesscell { min-width: 200px; }
.au-sesspill { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 10px; border-radius: 999px; background: #1d4ed8; border: 1px solid #1d4ed8; color: #ffffff; font-size: 12px; white-space: nowrap; }
.au-sesspill strong { font-weight: 700; color: #ffffff; }
.au-sesspill__of { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 600px) {
    .au-cards { grid-template-columns: 1fr; }
}

/* T-192 part 2: tabs, queue tables, pause switch */
.au-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin: 14px 0 18px; flex-wrap: wrap; }
.au-tab { padding: 8px 16px; font-weight: 600; color: #6b7280; border-radius: 6px 6px 0 0; text-decoration: none; }
.au-tab:hover { color: #2b6cb0; text-decoration: none; }
.au-tab.is-active { background: #2b6cb0; color: #fff; }
.au-tab--soon { color: #c3c9d1; cursor: default; font-weight: 400; }
.au-off-badge { display: inline-block; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 3px 12px; vertical-align: middle; margin-left: 10px; }
.au-st { font-weight: 700; font-size: 11px; border-radius: 10px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .3px; }
.au-st--sent { background: #d1fae5; color: #065f46; }
.au-st--cancelled { background: #f3f4f6; color: #4b5563; }
.au-st--skipped { background: #fef3c7; color: #92400e; }
.au-actions { white-space: nowrap; }
.au-actions form { display: inline-block; margin: 0 2px 0 0; }
.au-reason { color: #6b7280; font-size: 12px; }
.au-pauseform { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.au-pausestate { font-size: 12px; color: #6b7280; font-weight: 600; }
.au-pausestate--off { color: #b45309; }

/* T-192 part 3: campaign builder */
.au-camp-st { font-weight: 700; font-size: 11px; border-radius: 10px; padding: 2px 10px; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.au-camp-st--draft { background: #e0e7ff; color: #3730a3; }
.au-camp-st--live { background: #d1fae5; color: #065f46; }
.au-camp-st--paused { background: #fef3c7; color: #92400e; }
.au-camp-st--archived { background: #f3f4f6; color: #6b7280; }
.au-preview { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 0 0 16px; }
.au-preview--warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.au-campform { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.au-campgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.au-campgrid label { font-size: 12px; color: #6b7280; font-weight: 600; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.au-steprow { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; background: #fafafa; }
.au-steprow__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.au-steprow__head label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; margin: 0; }
.au-step-delay { width: 70px; }
.au-step-subject { margin-bottom: 8px; }
.au-stepbodies { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-testform { background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px 16px; }
@media (max-width: 700px) { .au-stepbodies { grid-template-columns: 1fr; } }

/* T-192: automated follow-ups block in the Follow Up tab */
.au-patientauto { border-top: 1px solid #e5e7eb; margin-top: 18px; padding-top: 14px; }
.au-patientauto__title { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.au-patientauto__list { list-style: none; padding: 0; margin: 0 0 10px; }
.au-patientauto__list li { padding: 5px 0; font-size: 13px; border-bottom: 1px dashed #eee; }
.au-patientauto__camp { color: #6b7280; font-size: 12px; }
.au-patientauto__none { color: #6b7280; font-size: 13px; }
.au-fieldnote { font-weight: 400; font-size: 11px; color: #9ca3af; }

/* T-192b: per-company automations. Clinic switcher (same unified blue as the
   calendar location switcher), off badge, Duplicate control. */
.au-clinic-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.au-clinic-btn { display: inline-block; padding: 7px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; text-decoration: none; background: #d6eaf8; color: #1a5276; border: 1px solid #2471a3; transition: all 0.2s ease; }
.au-clinic-btn:hover { background: #aed6f1; color: #1a5276; text-decoration: none; }
.au-clinic-btn.is-active { background: #2471a3; color: #fff; border-color: #1a5276; box-shadow: 0 3px 8px rgba(36,113,163,0.4); }
.au-clinic-btn.is-active:hover { background: #2471a3; color: #fff; }
.au-clinic-off { display: inline-block; margin-left: 4px; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.au-dupform { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.au-dupform .form-control { min-width: 130px; width: auto; height: 24px; padding: 1px 6px; font-size: 12px; }
.au-sandbox-badge { display: inline-block; margin-left: 10px; background: #7c3aed; color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; vertical-align: middle; }

/* T-192d: per-service branded S0 campaigns - service chip on the campaign list. */
.au-segchip { display: inline-block; margin-left: 6px; background: #e0e7ff; color: #3730a3; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 1px 8px; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }

/* =========================================================================
   T-192 tracked Pay360 payment links — public /paylink page (.plk-*)
   and admin surfaces (.p360-*)
   ========================================================================= */
.plk-body { margin: 0; padding: 24px 12px; background: #080808; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; min-height: 100vh; }
.plk-shell { max-width: 480px; margin: 30px auto; background: #0f0f0f; border: 1px solid #40392b; border-radius: 12px; padding: 34px 30px 24px; text-align: center; }
.plk-brand__eyebrow { display: block; font-size: 11px; letter-spacing: 3px; color: #cccccc; }
.plk-brand__name { display: block; font-size: 30px; color: #ffffff; font-family: Georgia, 'Times New Roman', serif; margin-top: 2px; }
.plk-brand__rule { display: block; width: 64px; height: 1px; background: #B9955C; margin: 16px auto 22px; }
.plk-greet { color: #ffffff; font-size: 18px; margin: 0 0 8px; }
.plk-copy { color: #cfcfcf; font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.plk-copy a { color: #B9955C; }
.plk-amount { color: #ffffff; font-size: 40px; font-weight: 700; margin: 6px 0 4px; }
.plk-desc { color: #9a9a9a; font-size: 13px; margin: 0 0 14px; }
.plk-btn { display: block; width: 100%; background: #B9955C; color: #0a0a0a; border: 0; border-radius: 10px; padding: 15px 18px; font-size: 16px; font-weight: 600; cursor: pointer; margin: 12px 0 6px; }
.plk-small { color: #7a7a7a; font-size: 11px; margin-top: 12px; }
.plk-foot { color: #9a9a9a; font-size: 11px; border-top: 1px solid #333; margin-top: 24px; padding-top: 14px; }
.plk-spinner { width: 34px; height: 34px; border: 3px solid #40392b; border-top-color: #B9955C; border-radius: 50%; margin: 18px auto; animation: plkspin 1s linear infinite; }
@keyframes plkspin { to { transform: rotate(360deg); } }

.p360-panel { background: #f9f9f9; border-radius: 5px; padding: 16px 20px; margin-top: 10px; }
.p360-title { margin: 0 0 6px; font-weight: 700; }
.p360-badge { display: inline-block; background: #6d28d9; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 9px; vertical-align: middle; margin-left: 6px; }
.p360-help { color: #6b7280; font-size: 13px; margin: 4px 0 14px; }
.p360-create { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.p360-amount { max-width: 220px; }
.p360-subtitle { margin: 14px 0 6px; font-weight: 700; font-size: 13px; color: #374151; }
.p360-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px solid #ececec; font-size: 13px; }
.p360-row:last-child { border-bottom: none; }
.p360-row.is-allocated { opacity: .55; }
.p360-amt { font-weight: 700; min-width: 70px; }
.p360-date { color: #6b7280; }
.p360-url { color: #6b7280; font-size: 12px; word-break: break-all; }
.p360-actions { display: flex; gap: 4px; }
.p360-actions form, .p360-row form { display: inline-block; margin: 0; }

/* T-192: Pay360 circle next to the GoCardless one, same design, light purple */
.gc-circle--p360 { background: linear-gradient(135deg, #cdb4f0, #a678e8); border-color: #e9defc; box-shadow: 0 4px 12px rgba(134, 90, 205, .45); }
.gc-circle-btn:hover .gc-circle--p360 { box-shadow: 0 8px 18px rgba(134, 90, 205, .55); }
.gc-circle__label--p360 { color: #6b4aa3; }
.p360-field label { font-size: 12px; color: #6b7280; font-weight: 600; display: block; margin-bottom: 4px; }
.p360-optional { font-weight: 400; color: #9ca3af; }
.p360-field--btn { align-self: flex-end; }
.p360-result { margin-top: 12px; }
.p360-result__label { font-size: 12px; color: #6b7280; font-weight: 600; display: block; margin-bottom: 4px; }
.p360-linkrow { display: flex; gap: 8px; margin-bottom: 10px; }
.p360-linkrow .p360-link { flex: 1; }
.p360-send { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p360-send-status, .p360-pend-status { font-size: 12px; }
.p360-msg { margin-top: 10px; font-size: 13px; font-weight: 600; }

/* =========================================================================
   T-194 Phase A — Companies Console (.cc-*)
   ========================================================================= */
.cc-page { max-width: 1200px; }
.cc-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cc-page-header h2 { margin: 0; }
.cc-muted { color: #888; font-size: 12px; }
.cc-gmail-status { font-size: 12px; color: #666; margin-top: 4px; }

.cc-table { background: #fff; }
.cc-table th { white-space: nowrap; font-size: 13px; }
.cc-table td { vertical-align: middle; font-size: 13px; }
.cc-row--muted td { background: #f7f7f7; color: #aaa; }

.cc-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #e7e7e7; color: #333; text-transform: uppercase; }
.cc-badge--on { background: #5cb85c; color: #fff; }
.cc-badge--off { background: #d9534f; color: #fff; }
.cc-badge--muted { background: #aaa; color: #fff; }
.cc-badge--admin { background: #6d28d9; color: #fff; }

.cc-loc-pill { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 4px; background: #e3eef9; color: #234; font-size: 11px; }
.cc-perm-tag { display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 4px; background: #f1f1f1; color: #555; font-size: 11px; }

/* Collapsible sections */
.cc-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.cc-section__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; background: #fafafa; border-bottom: 1px solid #e5e7eb; }
.cc-section__head h3 { margin: 0; font-size: 16px; }
.cc-section__chevron { color: #888; transition: transform 0.15s ease; }
.cc-section--collapsed .cc-section__chevron { transform: rotate(-90deg); }
.cc-section--collapsed .cc-section__body { display: none; }
.cc-section__body { padding: 18px; }

/* Inline reveal panels (add company / add user) — hidden until toggled */
.cc-panel { display: none; background: #fafafa; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; }
.cc-panel.cc-panel--open { display: block; }

.cc-form-section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eee; }
.cc-form-section:last-of-type { border-bottom: none; }
.cc-form-section h4 { font-size: 14px; margin: 0 0 10px; }
.cc-form .form-group { margin-bottom: 12px; }
.cc-form .form-group label { font-weight: 600; display: block; margin-bottom: 4px; }
.cc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.cc-form-actions { margin-top: 8px; }

.cc-loc-grid, .cc-perms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.cc-loc-checkbox { display: block; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-weight: 400; cursor: pointer; }
.cc-loc-checkbox:has(input:checked) { background: #eef6ff; border-color: #4a90d9; }
.cc-perms-grid label { font-weight: 400; padding: 4px 0; cursor: pointer; }

/* On/off switch used in the Services panel */
.cc-switch { display: inline-block; position: relative; width: 40px; height: 22px; cursor: pointer; }
.cc-switch-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__track { position: absolute; inset: 0; background: #ccc; border-radius: 22px; transition: background 0.15s ease; }
.cc-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.cc-switch-input:checked + .cc-switch__track { background: #5cb85c; }
.cc-switch-input:checked + .cc-switch__track .cc-switch__thumb { left: 20px; }
.cc-switch-input:disabled + .cc-switch__track { opacity: 0.6; }

/* Orphan company id notice (location group referencing a company id that
   has no companies row yet, e.g. Square Mile Clinic / company_id 4). */
.cc-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff8ec; border: 1px solid #f0c869; border-radius: 8px; padding: 12px 18px; margin-bottom: 16px; }
.cc-notice__text { margin: 0; font-size: 13px; color: #7a5a23; }

/* "This will create company record N for: ..." line inside the Add Company
   panel, shown when a claim_company_id is set (button click or a flashed
   validation failure that had one posted). */
.cc-claim-line { display: none; font-size: 13px; font-weight: 600; color: #7a5a23; background: #fff8ec; border: 1px solid #f0c869; border-radius: 4px; padding: 8px 12px; margin: 0 0 14px; }
.cc-claim-line.cc-claim-line--visible { display: block; }

/* =========================================================================
   T-194 Phase B — Locations wizard (.cc-* continued)
   ========================================================================= */

/* "No rooms defined, falls back to London" notice on the location page. */
.cc-warning-line { font-size: 13px; color: #7a5a23; background: #fff8ec; border: 1px solid #f0c869; border-radius: 4px; padding: 8px 12px; margin: 0 0 14px; }

/* Room table action cell (Edit button + inline Delete form side by side). */
.cc-room-actions { display: flex; gap: 6px; align-items: center; }
.cc-room-actions form { margin: 0; }

/* Per-service settings sub-blocks (Service settings section). Each one
   reuses .cc-section's collapse mechanic (same delegated .cc-section__head
   click handler in companies_console.php handles nested sections too), just
   with a smaller header and collapsed-by-default state set server-side. */
.cc-svc-block { margin-bottom: 12px; }
.cc-svc-block:last-child { margin-bottom: 0; }
.cc-svc-block__head { padding: 10px 14px; }
.cc-svc-block__head h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cc-svc-block .cc-section__body { padding: 14px; }

/* Divider between stacked "edit existing row" forms inside a service block. */
.cc-svc-row-sep { border: none; border-top: 1px dashed #ddd; margin: 14px 0; }

/* "Add settings" progressive-disclosure form (native <details>, no JS/modal
   needed per CLAUDE.md rule #4). */
.cc-svc-add-details { margin-top: 10px; }
.cc-svc-add-details summary { cursor: pointer; font-weight: 600; color: #4a90d9; margin-bottom: 10px; }

/* Button group in .cc-page-header when there's more than one action
   (Domains link + Add Company, on the index page). */
.cc-page-header__actions { display: flex; align-items: center; gap: 8px; }

/* Domains section: per-row location <select>, sized to fit the table cell
   rather than stretching full-width like a stacked form control. */
.cc-domain-select { width: auto; min-width: 220px; display: inline-block; }

/* Overdue Sessions (S0) mobile collections list */
/* T-192c: /admin/overdue_sessions — mobile-first counterpart of the
   automations.php packages segment table. Reuses .au-pkg-line / .au-sesspill
   as-is for the plan breakdown; everything below is new (.ovs-*) and stays a
   single stacked column at every viewport width (no desktop grid). */
.ovs-page { max-width: 100%; }
.ovs-companybadge { display: inline-block; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 3px 10px; vertical-align: middle; margin-left: 6px; }

.ovs-summary { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.ovs-summary__item { flex: 1 1 140px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px; }
.ovs-summary__value { display: block; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.15; }
.ovs-summary__label { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }

.ovs-searchwrap { margin: 0 0 16px; }
.ovs-search { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px; border: 1px solid #d1d5db; border-radius: 8px; }
.ovs-search:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43, 108, 176, .15); }

.ovs-list { display: flex; flex-direction: column; gap: 12px; }
.ovs-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.ovs-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ovs-card__name { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 700; color: #2b6cb0; text-decoration: none; }
.ovs-card__name:hover { text-decoration: underline; }
.ovs-card__balance { text-align: right; }
.ovs-balance { display: block; font-size: 20px; font-weight: 800; color: #b45309; white-space: nowrap; }
.ovs-balance__label { display: block; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .3px; }

.ovs-lastvisit { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.ovs-lastvisit strong { color: inherit; }
.ovs-lastvisit__ago { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.ovs-lastvisit__svc { display: block; margin-top: 2px; font-size: 12px; opacity: .8; }
/* Recency bands: green < 30 days, orange 30-120, red > 120 */
.ovs-lastvisit--green { background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; }
.ovs-lastvisit--green .ovs-lastvisit__ago { background: #15803d; }
.ovs-lastvisit--orange { background: #ffedd5; border: 1px solid #fed7aa; color: #9a3412; }
.ovs-lastvisit--orange .ovs-lastvisit__ago { background: #d97706; }
.ovs-lastvisit--red { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }
.ovs-lastvisit--red .ovs-lastvisit__ago { background: #dc2626; }
.ovs-lastvisit--none { font-style: italic; }

.ovs-pkgs { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f2f4; }
.ovs-pkgs .au-pkg-line { white-space: normal; margin-bottom: 3px; }

.ovs-card__foot { margin-top: 12px; }
.ovs-callbtn { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; box-sizing: border-box; background: #15803d; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 8px; padding: 10px 14px; }
.ovs-callbtn:hover, .ovs-callbtn:active { background: #166534; color: #fff; text-decoration: none; }

.ovs-calls { margin-top: 8px; }
.ovs-calls__pill { display: inline-block; list-style: none; cursor: pointer; padding: 4px 12px; border-radius: 999px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; font-size: 12px; font-weight: 600; min-height: 28px; }
.ovs-calls__pill::-webkit-details-marker { display: none; }
.ovs-calls__pill::after { content: ' \25BE'; color: #9ca3af; }
.ovs-calls[open] .ovs-calls__pill::after { content: ' \25B4'; }
.ovs-calls__count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #4b5563; color: #fff; font-size: 11px; }
.ovs-calls__list { margin: 8px 0 0; padding: 8px 12px; list-style: none; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.ovs-calls__list li { padding: 4px 0; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f2f4; }
.ovs-calls__list li:last-child { border-bottom: none; }
.ovs-calls__empty { color: #9ca3af; font-style: italic; }

/* S0 call sheets (2026-07-28): per-caller batches. "Batch N" tag on cards
   inside the earlier-batches expander, the expander pill itself, and the
   assignment panel on the automations segments dashboard. */
.ovs-batchtag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.ovs-earlier { margin-top: 18px; }
.ovs-earlier__pill { display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; min-height: 44px; padding: 10px 14px; border-radius: 8px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; font-size: 14px; font-weight: 700; }
.ovs-earlier__pill::-webkit-details-marker { display: none; }
.ovs-earlier__pill::after { content: ' \25BE'; color: #9ca3af; margin-left: 6px; }
.ovs-earlier[open] .ovs-earlier__pill::after { content: ' \25B4'; }
.ovs-earlier__count { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #4b5563; color: #fff; font-size: 12px; }
.ovs-earlier__list { margin-top: 12px; }

.au-s0assign { margin-top: 26px; }
.au-s0assign .au-help { margin-bottom: 10px; }
.au-s0assign__total { display: block; font-size: 12px; color: #6b7280; }

@media (min-width: 700px) {
    .ovs-list { max-width: 640px; }
    .ovs-summary { max-width: 640px; }
    .ovs-searchwrap { max-width: 640px; }
    .ovs-earlier { max-width: 640px; }
}

/* =========================================================================
   F1 Follow-up invite (T-192e) — .fu-*
   Complimentary follow-up card(s) on the magic-link profile
   (admin/profile/followup_section.php). One card per qualifying service.
   GOLD palette matching the Request An Appointment button + Appointment
   Requests header (owner 2026-07-22; was teal): gradient
   rgb(212,168,83) -> rgb(196,152,67), hover -> rgb(180,136,51).
   ========================================================================= */
.fu-profile { margin: 0 0 18px; }
.fu-card { background: #fff; border: 1px solid rgba(196, 152, 67, 0.45); border-radius: 22px; padding: 1.4rem; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.fu-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.fu-title { font-size: 17px; font-weight: 800; color: #7a5a1c; }
.fu-timing { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: #c49843; }
.fu-note { margin: 0 0 1rem; font-size: 13px; line-height: 1.55; color: #6b6455; }
.fu-picker, .tu-picker { border-top: 1px dashed #ead9b5; padding-top: 14px; }
.fu-label { display: block; font-size: 12px; font-weight: 700; color: #6b5a35; margin-bottom: 5px; }
.fu-input { height: 42px; font-size: 15px; border-radius: 12px; }
.fu-input.fu-date, .fu-input.tu-date { background: #fff; cursor: pointer; }
.fu-slots-wrap { margin-top: 14px; }
.fu-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-slot, .tu-slot { border: 1.5px solid #e6d3a8; border-radius: 8px; background: #fff; padding: 9px 4px; font-size: 14px; font-weight: 600; color: #6b5a35; cursor: pointer; }
.fu-slot--on, .tu-slot--on { border-color: #c49843; background: linear-gradient(to right in oklab, rgb(212, 168, 83) 0%, rgb(196, 152, 67) 100%); color: #fff; }
.fu-slots-loading, .fu-slots-none { grid-column: 1 / -1; color: #8e8471; font-size: 13px; padding: 4px 2px; }
.fu-msg { margin-top: 10px; font-size: 13px; font-weight: 600; color: #b03a2e; background: #fdf0ee; border-radius: 8px; padding: 9px 12px; }
.fu-request-btn, .tu-book-btn { width: 100%; border: 0; border-radius: 10px; background-image: linear-gradient(to right in oklab, rgb(212, 168, 83) 0%, rgb(196, 152, 67) 100%); color: #fff; font-size: 15px; font-weight: 800; padding: 13px; margin-top: 14px; cursor: pointer; }
.fu-request-btn:hover, .tu-book-btn:hover { background-image: linear-gradient(to right in oklab, rgb(196, 152, 67) 0%, rgb(180, 136, 51) 100%); color: #fff; }
.fu-request-btn[disabled], .tu-book-btn[disabled] { opacity: 0.6; }
.fu-status { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; }
.fu-status--requested { background: #e9f1fb; color: #2f6fb0; }
.fu-status--confirmed { background: #e5f5ea; color: #1a7a41; }

@media (max-width: 480px) {
    .fu-slots { grid-template-columns: repeat(3, 1fr); }
}

/* ===== T-192g (S6): gift-call landing page (patientcare, service-branded).
   Light email family look: #f4f3f6 page, white card, accent bar. The two
   dynamic colors arrive as CSS vars from the view: --gc-accent / --gc-name. */
.gc-body { background: #f4f3f6; font-family: Arial, 'Helvetica Neue', sans-serif; margin: 0; }
.gc-shell { max-width: 600px; margin: 32px auto 40px; padding: 0 16px; }
.gc-brandbar { text-align: center; margin-bottom: 24px; }
.gc-brandlogo { display: inline-block; max-width: 220px; max-height: 72px; background: #fff; border-radius: 8px; padding: 8px 16px; }
.gc-brandname { display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: bold; color: var(--gc-accent); background: #fff; border-radius: 8px; padding: 10px 18px; }
.gc-card { background: #fff; border-radius: 12px; overflow: hidden; padding-bottom: 28px; }
.gc-accentbar { height: 4px; background: var(--gc-accent); }
.gc-hero { text-align: center; padding: 28px 32px 6px; }
.gc-gifticon { color: var(--gc-accent); margin-bottom: 10px; }
.gc-eyebrow { font-size: 12px; font-weight: bold; letter-spacing: 3px; color: var(--gc-accent); margin-bottom: 12px; }
.gc-title { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; line-height: 1.3; color: #1c1a33; margin: 0 0 2px; }
.gc-name { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 42px; line-height: 1.15; color: var(--gc-name); margin-bottom: 12px; }
.gc-sub { font-size: 15px; line-height: 24px; color: #4c4a5e; margin: 0 0 8px; }
.gc-cbhead { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 19px; font-weight: bold; color: #1c1a33; margin: 6px 0 14px; }
.gc-cbhead svg { color: #1c1a33; }
/* 24h gift-window countdown */
.gc-timerwrap { text-align: center; margin: 10px 32px 6px; padding: 14px 16px; background: #f1f0f4; border: 1px solid #e8e6ee; border-radius: 12px; }
.gc-timer-label { font-size: 12px; font-weight: bold; letter-spacing: 2px; color: var(--gc-accent); }
.gc-timer { font-size: 40px; font-weight: bold; color: #1c1a33; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }
.gc-timer-note { font-size: 13px; line-height: 19px; color: #8a8899; }
.gc-timerwrap--over .gc-timer { color: #b12a1b; }
#gc-form { padding: 10px 32px 0; }
.gc-field { margin-bottom: 12px; }
.gc-select { display: block; width: 100%; height: 52px; padding: 0 44px 0 18px; font-size: 16px; color: #1c1a33; background: #f1f0f4 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234c4a5e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center; border: 1px solid #e8e6ee; border-radius: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.gc-select:focus { outline: none; border-color: var(--gc-accent); }
/* Inline weekday calendar (thank-you page convention) */
.gc-cal { background: #f1f0f4; border: 1px solid #e8e6ee; border-radius: 12px; padding: 14px 14px 10px; margin-bottom: 12px; }
.gc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gc-cal-title { font-size: 16px; color: #1c1a33; font-weight: bold; }
.gc-cal-nav { background: none; border: 0; font-size: 22px; line-height: 1; color: #4c4a5e; cursor: pointer; padding: 2px 10px; }
.gc-cal-nav[disabled] { color: #c9c7d2; cursor: default; }
.gc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.gc-cal-dow { font-size: 12px; color: #8a8899; padding: 6px 0; }
.gc-cal-day { font-size: 14px; color: #1c1a33; padding: 9px 0; border-radius: 8px; cursor: pointer; }
.gc-cal-day:hover { background: #e8e6ee; }
.gc-cal-day--blank, .gc-cal-day--blank:hover { cursor: default; background: none; }
.gc-cal-day--off, .gc-cal-day--off:hover { color: #c9c7d2; cursor: default; background: none; }
.gc-cal-day--on, .gc-cal-day--on:hover { background: var(--gc-accent); color: #fff; font-weight: bold; }
.gc-msg { border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.gc-msg--err { background: #fdecea; color: #b12a1b; }
.gc-msg--ok { background: #e5f5ea; color: #1a7a41; }
.gc-submit { display: block; width: 100%; background: var(--gc-accent); color: #fff; border: 0; border-radius: 8px; padding: 15px 20px; font-size: 15px; font-weight: bold; letter-spacing: 1px; cursor: pointer; }
.gc-submit:hover { filter: brightness(0.92); }
.gc-submit[disabled] { opacity: .6; cursor: default; }
.gc-success { text-align: center; padding: 16px 32px 0; }
.gc-success-check { color: var(--gc-accent); margin-bottom: 8px; }
.gc-success-title { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; color: #1c1a33; margin: 0 0 6px; }
.gc-success-sub { font-size: 15px; color: #4c4a5e; margin: 0 0 8px; }
.gc-success-note { font-size: 13px; color: #8a8899; margin: 0; }
.gc-clinicfoot { text-align: center; margin-top: 22px; font-size: 12px; line-height: 18px; color: #8a8899; }
.gc-clinicfoot__name { font-weight: bold; color: #4c4a5e; }
@media (max-width: 480px) {
    .gc-shell { margin-top: 16px; }
    .gc-hero { padding: 22px 18px 6px; }
    #gc-form { padding: 8px 18px 0; }
    .gc-cal-day { padding: 8px 0; font-size: 13px; }
}

/* ============================================================
   Media consent (2026-07-28): teal camera circle + create/send
   panel on the patient profile (mirrors the Pay360 panel)
   ============================================================ */
.gc-circle--media { background: linear-gradient(135deg, #7fd4c1, #2ba18a); border-color: #d9f2ec; box-shadow: 0 4px 12px rgba(31, 122, 102, .45); }
.gc-circle--media .glyphicon { color: #fff; }
.gc-circle__label--media { color: #1f7a66; }
.mcx-panel { background: #f2faf8; border: 1px solid #bfe5db; border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
.mcx-title { margin: 0 0 6px; color: #175e4e; font-weight: 700; }
.mcx-badge { background: #2ba18a; color: #fff; border-radius: 10px; padding: 2px 10px; font-size: 11px; vertical-align: middle; }
.mcx-help { color: #52606d; font-size: 13px; margin-bottom: 12px; }
.mcx-create { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.mcx-field label { font-size: 12px; color: #33413c; }
.mcx-field .mcx-service { min-width: 220px; }
.mcx-result { margin-top: 14px; }
.mcx-result__label { font-size: 12px; color: #33413c; }
.mcx-linkrow { display: flex; gap: 8px; }
.mcx-linkrow .mcx-link { flex: 1; }
.mcx-send { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mcx-msg { margin-top: 10px; font-size: 13px; }
.mcx-list { margin-top: 16px; border-top: 1px dashed #bfe5db; padding-top: 10px; }
.mcx-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; flex-wrap: wrap; }
.mcx-row__svc { font-weight: 700; color: #175e4e; min-width: 120px; }
.mcx-row__status { color: #b45309; font-size: 12px; }
.mcx-row__status--signed { color: #1a8754; }
.mcx-row-status-msg { font-size: 12px; }

/* Shared consent-page company footer (2026-07-28): replaces the legacy
   per-view blocks whose "fond-size" typo never applied the 11px size */
.consent-company-footer { font-size: 11px; margin-top: 300px; }
.consent-company-footer p { margin-bottom: 0; }
@media screen and (max-width: 767px) {
    .consent-company-footer { margin-top: 80px; }
}

/* Media consent temporarily hidden (owner 2026-07-31): feature is built and
   committed but not yet launched; remove this rule to reveal the circle. */
.gc-circle-btn[data-target="#xpand_media_consent"], #xpand_media_consent { display: none !important; }

/* Payments Overview heading row with the admin CSV export button on the left (2026-07-31) */
.po-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.po-heading-row .po-heading { margin: 0; line-height: 1; }
.po-heading-row .po-export-btn { margin: 0; line-height: 1.4; }

/* ============================================================
   Admin menu redesign: dark tile-grid panel (2026-07-31)
   Search row + icon tiles with badges, replacing the pill rows.
   ============================================================ */
.lbm-container {
    padding-top: 12px;
    padding-bottom: 12px;
    background: transparent;
}
.lbm-panel {
    background: #f4f4f6;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 16px;
}

/* Search row */
.lbm-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0;
}
.lbm-search-box {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.lbm-search-icon {
    position: absolute;
    left: 13px;
    display: flex;
    align-items: center;
    color: #999;
    pointer-events: none;
}
.lbm-search-input {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    color: #1a1a1a;
    font-size: 14px;
    padding: 0 14px 0 40px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lbm-search-input::placeholder { color: #999; }
.lbm-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.lbm-search-btn,
.lbm-search-btn:focus {
    height: 44px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
}
.lbm-search-btn:hover,
.lbm-search-btn:active {
    background: #2563eb;
    color: #fff;
}
/* Burger button restyled inside the menu panel */
.lbm-panel .admin-burger-btn {
    height: 44px;
    width: 48px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: none;
}
.lbm-panel .admin-burger-btn:hover { background: #f5f5f5; }
.lbm-panel .admin-burger-btn .icon-bar { width: 16px; background: #555; }

/* Tile grid */
.lbm-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.lbm-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 12px 24px 11px 12px;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.lbm-tile:hover,
.lbm-tile:focus {
    color: #1a1a1a;
    text-decoration: none;
    border-color: rgba(var(--lbm-solid), 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.lbm-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(var(--lbm-rgb), 0.13);
    color: rgb(var(--lbm-solid));
    margin-bottom: 12px;
}
.lbm-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.lbm-tile-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lbm-tile-sub {
    font-size: 10.5px;
    color: #888;
    line-height: 1.35;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lbm-tile-chev {
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -7px;
    color: #bbb;
    display: flex;
}
.lbm-tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgb(var(--lbm-solid));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wide bottom tiles (Sofwave Leads, Red List) */
.lbm-wide-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.lbm-tile--wide {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 1 300px;
    min-width: 220px;
    padding: 10px 34px 10px 12px;
}
.lbm-tile--wide .lbm-tile-icon { margin-bottom: 0; }
.lbm-tile--wide .lbm-tile-chev { right: 12px; }

/* Accent colors from the Lead Tracker palette: --lbm-rgb tints the icon
   circle, --lbm-solid fills the badge and colors the icon.
   blue #3b82f6, emerald #13b981, green #22c55f, sky #38bdf8,
   pink #c92377 (brand), red #ef4444, amber #fbc024, violet #8b5cf6 */
.lbm-tile--blue   { --lbm-rgb: 59, 130, 246;  --lbm-solid: 37, 99, 235; }
.lbm-tile--teal   { --lbm-rgb: 19, 185, 129;  --lbm-solid: 16, 150, 105; }
.lbm-tile--green  { --lbm-rgb: 34, 197, 95;   --lbm-solid: 22, 163, 74; }
.lbm-tile--sky { --lbm-rgb: 56, 189, 248;  --lbm-solid: 2, 132, 199; }
.lbm-tile--pink   { --lbm-rgb: 201, 35, 119;  --lbm-solid: 201, 35, 119; }
.lbm-tile--red    { --lbm-rgb: 239, 68, 68;   --lbm-solid: 220, 38, 38; }
.lbm-tile--amber  { --lbm-rgb: 251, 192, 36;  --lbm-solid: 217, 119, 6; }
.lbm-tile--violet { --lbm-rgb: 139, 92, 246;  --lbm-solid: 124, 58, 237; }

/* Phones: keep 5 tiles per row (2 rows total) by shrinking the tiles */
@media all and (max-width: 600px) {
    .lbm-panel { padding: 10px; }
    .lbm-grid { gap: 5px; margin-top: 10px; }
    .lbm-tile { padding: 7px 10px 7px 7px; border-radius: 11px; }
    .lbm-tile-icon { width: 24px; height: 24px; margin-bottom: 7px; }
    .lbm-tile-icon svg { width: 13px; height: 13px; }
    .lbm-tile-title { font-size: 7px; }
    .lbm-tile-sub { font-size: 8px; }
    .lbm-tile-chev { right: 1px; margin-top: -6px; }
    .lbm-tile-chev svg { width: 11px; height: 11px; }
    .lbm-tile-badge { top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 9px; }
    .lbm-tile--wide { min-width: 0; flex: 1 1 auto; padding: 8px 24px 8px 8px; }
    .lbm-tile--wide .lbm-tile-icon { margin-bottom: 0; }
    .lbm-tile--wide .lbm-tile-chev { right: 8px; }
    .lbm-search-btn { padding: 0 16px; }
}

/* Patient Emails: Load more button (old patient_history inbox/sent list) */
.mail-load-more-wrap {
    text-align: center;
    padding: 10px 0 4px;
}
.mail-load-more {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 22px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mail-load-more:hover {
    background: #f5f5f5;
    color: #333;
}
.mail-load-more:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Received Reviews: review.clinic push status (T-195) */
.rc-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.rc-status--pushed {
    color: #1a8754;
}
.rc-status--error {
    color: #c0392b;
    cursor: help;
}
.rc-status-cell {
    white-space: nowrap;
}

/* ============================================================
   tmp_history redesign (ph2-): patient profile new shell.
   Scoped to .ph2-page so the live patient_history is unaffected.
   Tokens from design_handoff_patient_profile/README.md.
   ============================================================ */
.ph2-page {
    background: #eef0f6;
    color: #1c1f2e;
    min-height: 100vh;
    /* Was 110px to clear the (removed) fixed mobile bottom nav. */
    padding-bottom: 40px;
    font-size: 16px;
    line-height: 1.45;
}
/* Owner fix 1: use the DEFAULT Bootstrap .container width (750/970/1170px
   responsive steps from bootstrap.min.css) instead of a fixed 900px cap.
   Only padding/background are overridden here; leaving width/max-width
   unset lets the unscoped Bootstrap .container rule (lower specificity,
   so it was previously shadowed by width:100%+max-width:900px above) take
   over sizing again. */
.ph2-page .container {
    background: transparent;
    padding-left: clamp(10px, 3vw, 24px);
    padding-right: clamp(10px, 3vw, 24px);
}
/* Bootstrap rows pull -15px; cap the pull at the container padding so narrow
   viewports (clamp < 15px) cannot overflow horizontally. */
.ph2-page .container > .row {
    margin-left: max(-15px, calc(-1 * clamp(10px, 3vw, 24px)));
    margin-right: max(-15px, calc(-1 * clamp(10px, 3vw, 24px)));
}
/* Owner fix 2: zero the stray Bootstrap col-sm-12 padding on the tiles/notes
   zone wrapper (tmp_history.php ~line 969), which sits directly in .container
   with no .row ancestor to cancel it. Restores the same width as the profile
   card above and Quick Note/panels below. */
/* The zone now gets relocated INSIDE the actions .row by the shell (owner
   request 2026-08-11: tiles directly under the top buttons), so it needs the
   standard col gutter again - the row's negative margins cancel it. */
.ph2-page .ph2-zone-col {
    padding-left: 15px;
    padding-right: 15px;
    /* The actions row above is a floated col-xs-12 at ALL widths, but this
       col-SM-12 only floats >=768px - on mobile the un-floated zone overlaps
       that float and the first tile grid gets float-squeezed to 0 width.
       Clearing drops the zone below the float everywhere. */
    clear: both;
}
/* Owner fix 10: tmp_history.php nests a second .row (~line 1536) directly
   inside .ph2-panels-zone's own .row (~line 984) with no .col-* between them
   to cancel the outer row's -15px margin first. That doubled the negative
   margin, pushing the Quick Note card and every panel below it (Invoices,
   Notes, Reviews, Consents, Payments, Follow Up, etc.) 15px past the
   profile/tiles card edges. Zero the inner row's own margin so its
   col-sm-12 child lands back at the same edge as the tiles card. */
.ph2-page .ph2-panels-zone > .row > .row {
    margin-left: 0;
    margin-right: 0;
}
/* Prototype link palette (line 14). :where() keeps specificity at (0,0,1)/(0,1,1)
   so any class-based legacy/button color rule still wins. */
:where(.ph2-page) a { color: #2f6bea; }
:where(.ph2-page) a:hover { color: #1d4fc4; }

/* Accent helpers: --ph2-tint pastel circle, --ph2-solid strong color.
   T-200: the tile grid below uses only 4 of these (green/rust/blue/grey -
   one per category); blue/green/amber are still shared with the stats
   strip above, so their values are untouched. .ph2-i-rust and the grey
   tint were added/adjusted specifically for the tile-grid categorization
   (rust = CLINICAL, distinct from the stats strip's brighter .ph2-i-amber;
   grey tint tightened to #eef0f5 per the category spec - only the tile
   grid's More expander used .ph2-i-grey before, so nothing else moves). */
.ph2-i-blue   { --ph2-tint: #e8eefc; --ph2-solid: #2f6bea; }
.ph2-i-green  { --ph2-tint: #e4f5e9; --ph2-solid: #17a34a; }
.ph2-i-amber  { --ph2-tint: #fdf1dc; --ph2-solid: #f59e0b; }
.ph2-i-rust   { --ph2-tint: #fdf1dc; --ph2-solid: #b45309; }
.ph2-i-pink   { --ph2-tint: #fce7f3; --ph2-solid: #ec4899; }
.ph2-i-purple { --ph2-tint: #f0e9fc; --ph2-solid: #7c3aed; }
.ph2-i-red    { --ph2-tint: #fdecec; --ph2-solid: #e23c3c; }
.ph2-i-sky    { --ph2-tint: #e3f4fd; --ph2-solid: #0284c7; }
.ph2-i-teal   { --ph2-tint: #dff4f1; --ph2-solid: #14b8a6; }
.ph2-i-grey   { --ph2-tint: #eef0f5; --ph2-solid: #6b7280; }

/* --- Sticky top bar --- */
.ph2-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(238, 240, 246, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(28, 31, 46, 0.06);
}
/* Owner fix 1: track the same responsive steps as Bootstrap's .container
   (750/970/1170px) so the sticky topbar lines up with the page content.
   T-199: the "••• More" button is gone (its items are tiles now), so Back +
   title are the only children; a 1fr/auto/1fr grid keeps the title dead
   center regardless of the Back button's own width, without needing an
   empty spacer element for the (now absent) third child. */
.ph2-topbar-inner {
    margin: 0 auto;
    padding: 12px clamp(14px, 3vw, 24px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
@media (min-width: 768px)  { .ph2-topbar-inner { max-width: 750px; } }
@media (min-width: 992px)  { .ph2-topbar-inner { max-width: 970px; } }
@media (min-width: 1200px) { .ph2-topbar-inner { max-width: 1170px; } }
.ph2-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    background: none;
    border: none;
    color: #2f6bea;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 6px;
}
.ph2-topbar-title {
    grid-column: 2;
    font-size: 17px;
    font-weight: 700;
    color: #1c1f2e;
}

/* --- Primary actions row --- */
.ph2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.ph2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.ph2-btn:hover, .ph2-btn:focus { color: #fff; text-decoration: none; filter: brightness(0.94); }
.ph2-btn--blue  { background: #2f6bea; }
.ph2-btn--teal  { background: #59bed2; }
.ph2-btn--teal-dark { background: #3e98ac; }
.ph2-btn--pink  { background: #da2bed; }
.ph2-btn--purple { background: #675d97; }
.ph2-btn--green { background: #5cb85c; }
/* Right-aligned + circle on the top action buttons; absolute so the label
   stays centered in the full-width buttons. */
.ph2-page .ph2-actions .ph2-btn { position: relative; }
.ph2-btn-plus {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 0;
    padding-bottom: 1px;
}
/* T-199: actions row is down to 3 buttons (Record Session / Pay360 / Media
   Consent all moved to tiles), so it stacks one-per-row on mobile instead of
   the old 2-column grid, which would leave a lone 3rd button dangling. */
@media all and (max-width: 760px) {
    .ph2-page .ph2-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ph2-page .ph2-actions .ph2-btn {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        justify-content: center;
        font-size: 12.5px;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }
}

/* iPad range: all three action buttons on ONE row - no wrap, buttons share
   the width and compress (smaller font/padding) instead of breaking. */
@media (min-width: 761px) and (max-width: 1024px) {
    .ph2-page .ph2-actions {
        flex-wrap: nowrap;
        align-items: center;
    }
    /* Equal columns: width is content-independent, so spacing stays uniform. */
    .ph2-page .ph2-actions .ph2-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        align-items: center;
        font-size: 11.5px;
        padding: 0 6px;
        height: 40px;
        min-height: 0;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}

/* Owner request: one border for every button in the actions row. */
.ph2-page .ph2-actions .ph2-btn {
    border: 1px solid rgb(163, 153, 196);
}
/* Owner request 2026-08-11: the three top buttons share the full row width.
   Tablet-and-up only - mobile keeps its stacked grid layout (the media rule
   below would otherwise lose to this later flex rule). */
@media (min-width: 761px) {
    .ph2-page .ph2-actions {
        display: flex;
    }
    .ph2-page .ph2-actions .ph2-btn {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
    }
}
/* Compact tiles (owner: the relocated zone should be about half its former
   height): smaller pills, tighter grid and section spacing. */
.ph2-page .ph2-tile {
    padding: 8px 10px;
    border-radius: 11px;
}
.ph2-page .ph2-tile-icon {
    width: 30px;
    height: 30px;
}
.ph2-page .ph2-tile-label {
    font-size: 13px;
}
.ph2-page .ph2-grid {
    gap: 8px;
}
.ph2-page .ph2-tile-section + .ph2-tile-section {
    margin-top: 10px;
}
.ph2-page .ph2-tile-section-h {
    margin-bottom: 6px;
}
.ph2-page .ph2-card.ph2-tiles {
    padding: 12px 16px;
    /* Hidden until the profile card's Menu button reveals it (shell JS
       slideToggle; deep links from the stats strip also reveal it). */
    display: none;
}
/* Menu button: highlighted while the tiles card is open. */
.ph2-page .ph2-act--menu-open {
    background: #f5f8ff;
    border-color: #2f6bea;
    color: #2f6bea;
}
/* Owner request: tighter Finance panel padding on this page. */
.ph2-page .finance_link_panel {
    padding: 10px 0;
}

/* --- Cards --- */
.ph2-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
    padding: 16px;
    margin-bottom: 14px;
}

/* --- Profile card --- */
.ph2-profile { padding: 20px 20px 14px; }
/* Prototype draws no ring on the card while consent is pending; the DO NOT
   TREAT chip alone conveys the danger state (class kept for the PHP toggle). */
.ph2-profile--warn { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07); }
.ph2-profile-head {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ph2-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #c9cdf4;
    color: #fff;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ph2-avatar-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #17a34a;
    border: 3px solid #fff;
}
.ph2-profile-id { min-width: 0; }
.ph2-profile-name {
    font-size: 23px;
    font-weight: 800;
    color: #1c1f2e;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.2;
}
.ph2-chip {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
}
.ph2-chip--active { background: #e8eefc; color: #2f6bea; }
.ph2-chip--locked { background: #fdecec; color: #e23c3c; }
.ph2-chip--ccy    { background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
/* Owner fix 15: .ph2-ccy-form/.ph2-ccy-chip (the admin-only currency SELECT
   on the profile card) removed along with the markup that used them; the
   Invoices panel's own currency selector (.patient-currency-form/select,
   further down this file) is unrelated and untouched. */
.ph2-profile-line {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #3d4254;
    font-size: 15px;
    margin-top: 6px;
    word-break: break-all;
}
.ph2-profile-name + .ph2-profile-line { margin-top: 9px; }
.ph2-profile-line svg { color: #6b7280; flex: 0 0 auto; }
.ph2-profile-line a { color: #2f6bea; }
.ph2-referred {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 13px;
    color: #6b7280;
}
.ph2-referred a { color: #2f6bea; font-weight: 600; }

/* --- Spend-tier chip (owner feature, 2026-08-11) ---
   Third child of .ph2-profile-head (flex row): identity block stays left,
   this pushes to the right via margin-left:auto; on mobile it wraps below
   the name, left-aligned (see the 760px block further down). */
.ph2-tier-block {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.ph2-tier-wrap { position: relative; }
.ph2-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    line-height: 1.3;
}
.ph2-tier-chip svg { flex: 0 0 auto; }
.ph2-tier-chip--new      { background: #e8eefc; color: #2f6bea; }
.ph2-tier-chip--bronze   { background: #fdf1dc; color: #b45309; }
.ph2-tier-chip--silver   { background: #eef0f5; color: #6b7280; }
.ph2-tier-chip--gold     { background: #fff8e6; color: #d97706; }
.ph2-tier-chip--platinum { background: #f0e9fc; color: #7c3aed; }
.ph2-tier-chip--vip      { background: #e4f5e9; color: #17a34a; }
.ph2-tier-select-wrap {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* [hidden] outranks the plain class above (higher specificity), so the
   hidden attribute toggled by the shell JS actually hides it. */
.ph2-tier-select-wrap[hidden] { display: none; }
.ph2-tier-select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(28, 31, 46, 0.14);
    background: #fff;
    color: #1c1f2e;
}
.ph2-tier-select--override { border-bottom: 1px dotted #b45309; }
.ph2-tier-manual-hint {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    white-space: nowrap;
}
.ph2-joined {
    font-size: 12px;
    color: #94a3b8;
    text-align: right;
}
.ph2-alert-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.ph2-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 999px;
}
.ph2-alert-chip--danger { background: #fdecec; color: #c1015e; }
.ph2-alert-chip--amber  { background: #fdf1dc; color: #b45309; font-weight: 600; }
.ph2-alert-chip--done   { background: #e4f5e9; color: #17a34a; font-weight: 600; }
button.ph2-alert-chip { cursor: pointer; }
.ph2-alert-chip-chev { font-weight: 800; }
.ph2-medical-body {
    margin-top: 10px;
    margin-bottom: 0;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 12px 16px;
    color: #1c1f2e;
    font-size: 14px;
    box-shadow: none;
}
.ph2-medical-body .consent-yes-alert__service { font-size: 14px; margin-top: 8px; margin-bottom: 4px; }
.ph2-medical-body .consent-yes-alert__service:first-child { margin-top: 0; }
.ph2-medical-body .consent-yes-alert__questions { color: #6b5a1e; }
.ph2-profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    border-top: 1px solid rgba(28, 31, 46, 0.07);
    padding-top: 12px;
}
.ph2-act {
    flex: 1;
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 12px;
    padding: 11px 8px;
    color: #2f6bea;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ph2-act:hover, .ph2-act:focus {
    background: #f5f8ff;
    color: #2f6bea;
    text-decoration: none;
}
.ph2-act--call { color: #17a34a; }
.ph2-act--call:hover, .ph2-act--call:focus { background: #f4fbf6; color: #17a34a; }
.ph2-act--sms { color: #7c3aed; }
.ph2-act--sms:hover, .ph2-act--sms:focus { background: #f9f6ff; color: #7c3aed; }
.ph2-act--link { color: #1c1f2e; }
.ph2-act--link:hover, .ph2-act--link:focus { background: #f7f8fb; color: #1c1f2e; }
.ph2-email-link-btn {
    width: 100%;
    margin-top: 12px;
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 700;
}
.ph2-email-link-btn:hover { background: #2558c4; }
.ph2-profile .success {
    color: #3c763d;
    font-size: 13px;
    background-color: #dff0d8;
    padding: 12px;
    margin-top: 14px;
    border: 1px solid #d6e9c6;
    border-radius: 10px;
}
.ph2-profile .error {
    color: #a94442;
    background-color: #f2dede;
    font-size: 13px;
    padding: 12px;
    margin-top: 14px;
    border: 1px solid #ebccd1;
    border-radius: 10px;
}

/* --- Stats strip --- */
.ph2-stats {
    display: flex;
    overflow-x: auto;
    gap: 2px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}
.ph2-stat {
    flex: 1 0 128px;
    min-width: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid rgba(28, 31, 46, 0.06);
}
.ph2-stat:first-child { border-left: none; }
.ph2-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ph2-tint, #e8eefc);
    color: var(--ph2-solid, #2f6bea);
    margin-bottom: 7px;
}
.ph2-stat-icon--currency {
    font-size: 17px;
    font-weight: 700;
}
.ph2-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1c1f2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph2-stat-label { font-size: 13px; color: #6b7280; }
.ph2-stat-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--ph2-solid, #2f6bea);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph2-stat-link {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    color: #2f6bea;
}
.ph2-stat-link:hover { color: #1d4fc4; }
.ph2-stat-link--amber { color: #f59e0b; }
.ph2-stat-link--amber:hover { color: #d97706; }

/* --- Tile grid --- */
.ph2-tiles { padding: 14px; }
/* Section header: small uppercase label + hairline rule running to the
   card's right edge (mockup, 2026-08-10). ::after supplies the rule so the
   PHP only needs to print the label text - no extra markup. */
.ph2-tile-section-h {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa1b2;
    margin: 0 0 12px;
}
.ph2-tile-section-h::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(28, 31, 46, 0.08);
}
.ph2-tile-section + .ph2-tile-section { margin-top: 18px; }
.ph2-grid {
    display: grid;
    /* Owner request: always 5 equal columns from iPad width up (the 5
       Payments tiles fill one row); mobile drops to 3 (media query below). */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.ph2-tile {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    min-width: 0;
    background: #fff;
    /* T-200: lightened from rgba(...,.08) and box-shadow dropped - calmer,
       flatter chrome so the category accent color is the only color left. */
    border: 1px solid rgba(28, 31, 46, 0.06);
    border-radius: 14px;
    padding: 14px 16px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ph2-tile:focus { outline: none; }
.ph2-tile:focus-visible { outline: 2px solid #2f6bea; outline-offset: 2px; }
.ph2-tile-active {
    background: #f5f8ff;
    border: 1.5px solid #2f6bea;
}
.ph2-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 14px;
    background: var(--ph2-tint, #e8eefc);
    color: var(--ph2-solid, #2f6bea);
}
/* Horizontal pill body: label next to the icon, badge + chevron pushed to
   the far right. The label's flex-grow absorbs the tile's leftover width
   (text itself stays left-aligned), so badge/chevron land flush right. */
.ph2-tile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.ph2-tile-label {
    font-size: 15px;
    font-weight: 700;
    color: #1c1f2e;
    text-align: left;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.ph2-tile-chev { color: #9aa1b2; font-size: 16px; line-height: 1; flex: 0 0 auto; }
/* Count badge: small pill right before the chevron, tinted to match the
   tile's own category accent (same --ph2-tint/--ph2-solid pair as the icon
   circle) so it reads as part of the same tile family. */
.ph2-tile-badge {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: center;
    background: var(--ph2-tint, #eceef4);
    color: var(--ph2-solid, #6b7280);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 99px;
}
/* Chevron flips from › to ⌄ on the open tile */
.ph2-tile .ph2-chev-open { display: none; }
.ph2-tile-active .ph2-chev-open { display: inline; }
.ph2-tile-active .ph2-chev-closed { display: none; }
/* Gated Record Session tile (onboarding incomplete, no override code yet):
   same inert grey look as the old .ph2-btn--disabled actions-row button. */
.ph2-tile-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.ph2-tile-disabled .ph2-tile-icon { background: #eceef4; color: #9aa1b2; }
/* The real .toggle-multi-session-mode button (Record Session tile forwards
   clicks to it - see tmp_history_shell.php) never renders visibly; the
   legacy record_multiple_sessions.php script only ever touches its
   innerHTML/classes, never its display, so this has to win permanently. */
.ph2-tile-hidden-trigger { display: none; }
/* "More" tile expander (mobile-only, <=760px): reveals Alt Phones / Save
   Plans as IMG / Calls (.ph2-tile--secondary), which are hidden there by
   default. Desktop always shows every tile, so this stays hidden - see the
   <=760px override below. */
.ph2-tile-more { display: none; }
/* T-200: the More tile's chevron-down icon rotates 180deg in place instead
   of tmp_history_shell.php swapping glyph content on click - the JS still
   flips aria-expanded, this just reads it. */
.ph2-tile-more-chev svg {
    transition: transform 0.15s ease;
}
#ph2-tile-more[aria-expanded="true"] .ph2-tile-more-chev svg {
    transform: rotate(180deg);
}

/* --- Opened tile panels get the grey panel treatment --- */
@keyframes ph2PanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.ph2-page #xpand_invoices.in,
.ph2-page #xpand_invoices.collapsing,
.ph2-page #xpand_add_note.in,
.ph2-page #xpand_add_note.collapsing,
.ph2-page #xpand_more_reviews.in,
.ph2-page #xpand_more_reviews.collapsing,
.ph2-page #xpand_missed_calls.in,
.ph2-page #xpand_missed_calls.collapsing,
.ph2-page #xpand_calls.in,
.ph2-page #xpand_calls.collapsing,
.ph2-page #xpand_pay360_activity.in,
.ph2-page #xpand_pay360_activity.collapsing,
.ph2-page #xpand_pay360.in,
.ph2-page #xpand_pay360.collapsing,
.ph2-page #xpand_media_consent.in,
.ph2-page #xpand_media_consent.collapsing,
.ph2-page #xpand_more_sched_p.in,
.ph2-page #xpand_more_sched_p.collapsing,
.ph2-page #ph2_panel_consents.in,
.ph2-page #ph2_panel_consents.collapsing,
.ph2-page #ph2_panel_paymentplan.in,
.ph2-page #ph2_panel_paymentplan.collapsing,
.ph2-page #xpand_follow_up.in,
.ph2-page #xpand_follow_up.collapsing,
.ph2-page #xpand_finance_link.in,
.ph2-page #xpand_finance_link.collapsing,
.ph2-page #xpand_communication.in,
.ph2-page #xpand_communication.collapsing,
.ph2-page #xpand_more_reason.in,
.ph2-page #xpand_more_reason.collapsing,
.ph2-page #xpand_more_numbers.in,
.ph2-page #xpand_more_numbers.collapsing,
.ph2-page #manage-ai-sessions.in,
.ph2-page #manage-ai-sessions.collapsing,
.ph2-page #xpand_gift.in,
.ph2-page #xpand_gift.collapsing {
    background: #f7f8fb;
    border-radius: 16px;
    padding: 15px 16px;
    margin: 12px 0 0;
    animation: ph2PanelIn 0.18s ease;
}
/* Class-based hook: any .ph2-panel collapse gets the same grey treatment,
   so panels do not depend on being listed by ID above */
.ph2-page .ph2-panel.in,
.ph2-page .ph2-panel.collapsing {
    background: #f7f8fb;
    border-radius: 16px;
    padding: 15px 16px;
    margin: 12px 0 0;
    animation: ph2PanelIn 0.18s ease;
}
/* Owner fix 11: #xpand_gift itself (not .gs-profile, which is the unrelated
   magic-link-profile gift card) is killed site-wide by the T-190 parked-
   feature switch at admin.css ~18759 (#xpand_gift { display:none !important }).
   That rule has !important, so the background/padding rule above could never
   make the panel visible again on its own. Beat it here, scoped to this page
   only, when the collapse is actually open. */
.ph2-page #xpand_gift.in,
.ph2-page #xpand_gift.collapsing {
    display: block !important;
}
/* Owner fix 12: #xpand_media_consent is likewise killed site-wide (admin.css
   ~19421, feature not yet launched); unhide it here on this page only. */
.ph2-page #xpand_media_consent.in,
.ph2-page #xpand_media_consent.collapsing {
    display: block !important;
}
/* Payments overview panel is the one white/bordered exception (prototype 287) */
.ph2-page #xpand_more_payment_plan.in,
.ph2-page #xpand_more_payment_plan.collapsing {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 15px 16px;
    margin: 12px 0 0;
    animation: ph2PanelIn 0.18s ease;
}

/* T-197 item 5: Pay360/Media Consent open/close instantly, no height-
   transition flicker on their (sometimes tall) content; #xpand_pay360_activity
   is included since tmp_history_shell.php opens/closes it in lockstep with
   #xpand_pay360, so both used to animate at once. Still applies now that all
   three live in #ph2-panel-slot as regular tile panels (T-199). */
.ph2-page #xpand_pay360.collapsing,
.ph2-page #xpand_media_consent.collapsing,
.ph2-page #xpand_pay360_activity.collapsing {
    transition: none;
}
/* #ph2-pill-slot's one remaining member (#xpand_the_actual_plan) sits in its
   own .row with no vertical margin against the profile card row that
   follows, so give its open state a bottom gap. */
.ph2-page #ph2-pill-slot > .in,
.ph2-page #ph2-pill-slot > .collapsing {
    margin-bottom: 14px;
}

/* In-panel headings (prototype 15px/800) + pastel count pills (radius 99) */
.ph2-panel-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    margin: 0 0 8px;
}
.ph2-panel-h--sub { margin: 12px 0 8px; }
.ph2-count-pill {
    border-radius: 99px;
    font-size: 12px;
    padding: 2px 9px;
    line-height: 1.4;
}
.ph2-count-pill--blue { background: #e8eefc; color: #2f6bea; }
.ph2-count-pill--green { background: #e4f5e9; color: #17a34a; }
.ph2-count-pill--grey { background: #eceef4; color: #6b7280; }
/* Panel slot inside the tiles card: neutralize legacy Bootstrap wrappers */
.ph2-page #ph2-panel-slot > .collapse,
.ph2-page #ph2-panel-slot > .collapsing { float: none; }
.ph2-page #ph2-panel-slot .container {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Uniform horizontal inset for every panel: some panels are Bootstrap .rows
   (negative margins that overhang the shell padding), others plain divs
   (e.g. Finance, which reads as "correct"). Flatten rows and col gutters in
   both slots so all content aligns at the shell's own padding, like Finance. */
.ph2-page #ph2-panel-slot .row,
.ph2-page #ph2-pill-slot .row {
    margin-left: 0;
    margin-right: 0;
}
/* Only cols INSIDE a panel: the panel element itself can be a col-sm-12
   (e.g. #xpand_gift), and matching it here would strip the grey shell's own
   15px/16px padding. `> *` keeps direct slot children (the panels) exempt. */
.ph2-page #ph2-panel-slot > * [class*="col-sm-"],
.ph2-page #ph2-panel-slot > * [class*="col-xs-"],
.ph2-page #ph2-pill-slot > * [class*="col-sm-"],
.ph2-page #ph2-pill-slot > * [class*="col-xs-"] {
    padding-left: 0;
    padding-right: 0;
}
/* Consistent top spacing: the first heading in a panel sits directly on the
   shell's 15px padding (like the Notes panel's composer heading); only
   later section headings keep their 12px separation. */
.ph2-page #ph2-panel-slot .section_title:first-child h2,
.ph2-page #ph2-panel-slot .section_title:first-child h3,
.ph2-page #ph2-pill-slot .section_title:first-child h2,
.ph2-page #ph2-pill-slot .section_title:first-child h3 {
    margin-top: 0;
}
/* Calls tile opens two legacy collapses; fuse them into one visual panel */
.ph2-page #ph2-panel-slot #xpand_calls.in {
    border-radius: 16px 16px 0 0;
    padding-bottom: 0;
}
.ph2-page #ph2-panel-slot #xpand_calls.in + #xpand_missed_calls.in {
    border-radius: 0 0 16px 16px;
    margin-top: 0;
}
/* Consents panel: vertical column of full-width rows (prototype 372) */
.ph2-consent-frms {
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: flex-start;
}

/* --- Quick Note card + notes timeline --- */
.ph2-section-title {
    font-size: 17px;
    font-weight: 800;
    color: #2f6bea;
}
.ph2-note-card { margin-top: 2px; padding: 18px 20px; }
.ph2-page .form-add-note {
    background: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
}
.ph2-note-input {
    width: 100%;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 15px;
    color: #1c1f2e;
    background: #fbfbfd;
    margin-top: 11px;
}
textarea.ph2-note-input {
    min-height: 64px;
    resize: vertical;
}
.ph2-note-input:focus {
    outline: none;
    border-color: #2f6bea;
    box-shadow: 0 0 0 3px rgba(47, 107, 234, 0.13);
}
.ph2-note-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    flex-wrap: wrap;
}
/* Owner fix 3: Voice/Photo/Attachment ghost buttons removed from the view;
   .ph2-note-ghost rule deleted (no longer referenced anywhere). */
.ph2-note-toolbar .ph2-note-submit { margin-left: auto; }
.ph2-note-submit {
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(47, 107, 234, 0.35);
}
.ph2-note-submit:hover { background: #2558c4; }
/* Notes panel list: plain stacked white cards, text first with the pin button
   top-right, meta below (prototype 237-239). The .ph2-tl-* names stay as JS
   hooks for the Important Notes pin sync in tmp_history_shell. */
.ph2-notes-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ph2-note-item.ph2-tl-card {
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
}
.ph2-note-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ph2-tl-text {
    flex: 1;
    font-size: 14px;
    color: #1c1f2e;
    line-height: 1.45;
    word-break: break-word;
}
.ph2-tl-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
/* Appointment notes in the merged Notes list: not pinnable, so no
   .ph2-note-main pin-button row - just the text, then a muted "Appt" chip
   (service + appointment date) in place of the author/date meta line. */
.ph2-note-item--appt .ph2-tl-text { margin-bottom: 4px; }
.ph2-note-chip {
    display: inline-block;
    background: #eceef4;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
}

/* --- Section placement helpers --- */
.ph2-book-anchor { scroll-margin-top: 70px; }
.ph2-timeline-section { margin-top: 8px; }

@media all and (max-width: 760px) {
    /* Mockup: sections keep their headers; tiles collapse to single-column
       full-width compact pills, smaller icon + label than desktop. */
    /* Owner request: 3 tiles per row on mobile - pills become compact
       stacked tiles (icon above centered label, chevron hidden). */
    /* Owner 2026-08-12: the whole tiles card must fit ~half a phone screen.
       Stacked square tiles can't get there - switch to compact horizontal
       LIST rows, 2 per line: [icon] label, ~32px tall each. */
    .ph2-page .ph2-tiles .ph2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .ph2-page .ph2-tiles .ph2-tile {
        padding: 5px 7px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        text-align: left;
        border-radius: 8px;
        min-height: 32px;
    }
    .ph2-page .ph2-tiles .ph2-tile-icon { width: 18px; height: 18px; margin-right: 0; flex: 0 0 auto; }
    .ph2-page .ph2-tiles .ph2-tile-icon svg { width: 10px; height: 10px; }
    .ph2-page .ph2-tiles .ph2-tile-label {
        font-size: 10.5px;
        line-height: 1.15;
        font-weight: 600;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ph2-page .ph2-tiles .ph2-tile-chev { display: none; }
    .ph2-page .ph2-tiles .ph2-tile-badge { position: static; font-size: 9px; padding: 1px 5px; flex: 0 0 auto; }
    .ph2-page .ph2-tiles .ph2-tile-section-h { font-size: 9.5px; margin-bottom: 4px; }
    .ph2-page .ph2-tiles .ph2-tile-section + .ph2-tile-section { margin-top: 6px; }
    .ph2-page .ph2-card.ph2-tiles { padding: 8px 10px; margin-bottom: 10px; }
    /* Stats strip condensed (owner 2026-08-12): all five cells share the
       viewport width, no horizontal scrolling. High-specificity selectors
       so the .ph2-page-prefixed desktop rules can't override these. */
    .ph2-page .ph2-stats .ph2-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 4px;
        gap: 1px;
    }
    .ph2-page .ph2-stats .ph2-stat-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
    }
    .ph2-page .ph2-stats .ph2-stat-icon svg { width: 11px; height: 11px; }
    /* Reference-mock rhythm: bold one-line value, grey label under it, then
       a colored sub/action line - nothing truncated with ellipses, text
       wraps instead (owner 2026-08-12). */
    .ph2-page .ph2-stats .ph2-stat-value { font-size: 14px; white-space: nowrap; margin-top: 2px; }
    .ph2-page .ph2-stats .ph2-stat-label { font-size: 9.5px; line-height: 1.2; }
    .ph2-page .ph2-stats .ph2-stat-sub,
    .ph2-page .ph2-stats .ph2-stat-link {
        font-size: 9.5px;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        margin-top: 2px;
    }
    .ph2-avatar { width: 64px; height: 64px; font-size: 21px; }
    .ph2-profile-name { font-size: 19px; }
    /* Owner 2026-08-12: tier chip + Joined stay pinned TOP-RIGHT on mobile
       too, matching the reference mock (chip beside the identity block,
       Joined right-aligned under it) - compact sizes so they fit. The
       identity block must be shrinkable or the avatar wraps onto its own
       line (reference: avatar always left of the name). */
    .ph2-page .ph2-profile-head { flex-wrap: wrap; }
    .ph2-page .ph2-profile-id { flex: 1 1 0; min-width: 0; }
    .ph2-page .ph2-avatar { flex: 0 0 auto; }
    /* Tier block overlays the card's top-right corner (like the mock) so
       the identity column keeps its full width and contacts never wrap
       mid-word; the name row reserves space so a long name can't collide. */
    .ph2-page .ph2-profile { position: relative; }
    .ph2-page .ph2-tier-block {
        position: absolute;
        top: 14px;
        right: 14px;
        margin: 0;
        align-items: flex-end;
    }
    .ph2-page .ph2-profile-name { padding-right: 112px; }
    .ph2-page .ph2-tier-chip { font-size: 10.5px; padding: 3px 8px; }
    .ph2-page .ph2-joined { font-size: 10px; text-align: right; }
    /* Owner 2026-08-12: no More expander on mobile anymore - every tile is
       listed (condensed sizes above make them fit); the expander tile stays
       hidden via its base display:none rule. */
}

/* --- ph2 Phase 2: Important Notes (pinned) --- */
.ph2-pinned-card {
    background: #fff8e6;
    border: 1px solid #f0c26a;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
    margin-bottom: 14px;
}
.ph2-pinned-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #8a5a09;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ph2-pinned-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: #5a4633;
    line-height: 1.45;
}
.ph2-pinned-text {
    flex: 1;
    word-break: break-word;
}
.ph2-pinned-meta {
    font-size: 12px;
    color: #8a6d3b;
}
.ph2-pinned-card .ph2-pin-btn {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 11px;
    color: #b45309;
    flex: 0 0 auto;
}
.ph2-pinned-card .ph2-pin-btn:hover { background: none; }
/* Pin button (prototype x-dc 924-925): white idle, amber pinned state */
.ph2-pin-btn {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    flex: 0 0 auto;
}
.ph2-pin-btn:hover { color: #b45309; border-color: #f0c26a; background: #fff8e6; }
.ph2-pin-btn--pinned {
    background: #fff8e6;
    border-color: #f0c26a;
    color: #b45309;
}

/* --- ph2 Phase 3: onboarding gate --- */
.ph2-override-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fdf1dc;
    border: 1px solid #f0c26a;
    border-radius: 16px;
    padding: 12px 16px;
    font-size: 13px;
    color: #8a5a09;
    margin-bottom: 10px;
}
.ph2-override-banner-ico { font-size: 16px; }
.ph2-gate {
    border: 1.5px solid #f0c26a;
    padding: 18px 20px;
}
.ph2-gate-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ph2-gate-lock {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fdf1dc;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ph2-gate-headmain {
    flex: 1;
    min-width: 220px;
}
.ph2-gate-title {
    font-size: 16px;
    font-weight: 800;
    color: #1c1f2e;
}
.ph2-gate-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.5;
}
.ph2-gate-sub strong { color: #1c1f2e; }
.ph2-gate-plan {
    background: #fff8e6;
    border: 1px solid #f0c26a;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
}
.ph2-gate-plan-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #5a4633;
    margin-bottom: 7px;
}
.ph2-gate-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph2-gate-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
}
.ph2-gate-chip--todo { background: #fdecec; color: #c1015e; }
.ph2-gate-chip--done { background: #e4f5e9; color: #17a34a; }
.ph2-gate-help { font-size: 12.5px; color: #6b7280; line-height: 1.5; margin: 8px 0 10px; }
.ph2-gate-link {
    background: none;
    border: none;
    padding: 0;
    color: #2f6bea;
    font-size: 13px;
    font-weight: 600;
}
.ph2-gate-link:hover { color: #1d4fc4; }
.ph2-override {
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280;
}
.ph2-override-form {
    margin-top: 14px;
    border-top: 1px solid rgba(28, 31, 46, 0.07);
    padding-top: 12px;
}
.ph2-override-heading {
    font-size: 14px;
    font-weight: 700;
    color: #1c1f2e;
}
.ph2-override-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
}
.ph2-override .ph2-note-input {
    margin-top: 9px;
    padding: 11px 13px;
    font-size: 13px;
}
.ph2-override-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    flex-wrap: wrap;
}
.ph2-override-cancel {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}
.ph2-override-sent { font-size: 13px; color: #17a34a; font-weight: 600; margin-bottom: 6px; }
.ph2-override-code-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ph2-override-code {
    width: 140px;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;
}
.ph2-override-verify {
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
}
.ph2-override-error {
    margin-top: 7px;
    color: #e23c3c;
    font-size: 12px;
    font-weight: 600;
}
.ph2-btn--disabled {
    background: #c3c9d8;
    color: #fff;
    cursor: not-allowed;
}
.ph2-btn--disabled:hover { background: #c3c9d8; color: #fff; filter: none; }

/* Owner fix 14 (width audit): the booking section's own <div class="container">
   (tmp_history.php ~line 2540) and the Activity Timeline's <div class="container"
   id="xpand_activity_timeline"> (~line 4237) each nest a REAL Bootstrap
   .container, with its own clamp() padding, inside an ancestor that is
   already inside .ph2-page .container (line 102). That doubles the left/
   right inset, so both sections render narrower than the profile/tiles/
   quick-note cards above them. Same fix already applied to #ph2-panel-slot
   .container below: flatten the inner container back to the outer one's
   padding. (The location-switcher strip that used to sit here as a sibling
   .container-fluid moved into .ph2-cal-col in owner fix 18 above, so it no
   longer needs a rule in this block.) */
.ph2-page .ph2-zone-col > .container,
.ph2-page #xpand_activity_timeline {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Owner fix 19 (T-196): flattening this .container's OWN padding (owner fix
   14 above) left .row.book_ajax_form_calendar's negative margin unpaired.
   That margin was written to cancel against the responsive
   clamp(10px,3vw,24px) padding this container had BEFORE owner fix 14 (see
   the page-wide ".container > .row" rule ~line 19722), not the 0 it has
   now. With 0 container padding, the row's own -clamp() margin (up to
   -24px) overhangs past the now-zero-padding container while the row's
   col-xs-12/col-sm-12 children keep their normal Bootstrap 15px padding,
   netting up to ~9px of overhang past the profile/tiles card edges on
   typical desktop widths: the "wider than the other cards" symptom. Zero
   the row's margin AND its direct-child columns' padding here (like owner
   fix 7 for .the_actual_plan) so the row's own 16/18px card padding (below)
   is the only inset, flush with the other cards. */
.ph2-page .ph2-zone-col > .container > .row {
    margin-left: 0;
    margin-right: 0;
}
.ph2-page .book_ajax_form_calendar > [class*="col-xs-"],
.ph2-page .book_ajax_form_calendar > [class*="col-sm-"] {
    padding-left: 0;
    padding-right: 0;
}

/* --- ph2 Phase 4: booking section re-skin (existing markup, new coat) --- */
.ph2-page .book_ajax_form_calendar {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
    padding: 16px 18px;
    margin: 12px 0;
}
/* Section title uses the legacy title_b/title_plan classes (prototype 507) */
.ph2-page .book_ajax_form_calendar h3.title_b.title_plan { margin: 4px 0 10px; }
.ph2-page .ajax-calendar { margin-bottom: 10px; }
.ph2-page .ui-datepicker {
    width: 100%;
    border: none;
    background: #fff;
    padding: 0;
    font-family: inherit;
}
.ph2-page .ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    color: #1c1f2e;
    font-weight: 800;
}
.ph2-page .ui-datepicker .ui-datepicker-title { color: #1c1f2e; }
.ph2-page .ui-datepicker th { color: #9aa1b2; font-size: 11px; text-transform: uppercase; }
.ph2-page .ui-datepicker td { padding: 2px; }
.ph2-page .ui-datepicker td a,
.ph2-page .ui-datepicker td span {
    text-align: center;
    border: none;
    background: #f7f8fb;
    border-radius: 10px;
    padding: 8px 0;
    font-weight: 700;
    color: #1c1f2e;
}
.ph2-page .ui-datepicker td a.ui-state-active {
    background: #2f6bea;
    color: #fff;
}
.ph2-page .ui-datepicker td a.ui-state-highlight {
    background: #fff;
    border: 1.5px solid #2f6bea;
    color: #2f6bea;
}
.ph2-page .ui-datepicker td .ui-state-hover { background: #e8eefc; }

/* Timeline section sits directly on the page background (prototype 662);
   each entry supplies its own white card */
.ph2-page .ph2-timeline-section {
    margin-top: 14px;
    margin-bottom: 14px;
}

/* --- ph2: harmonize legacy internals rendered inside the new shell ---
   These panels keep their markup (functionality untouched) but inherit the
   design language: typography, rounded corners, calmer colors. */
.ph2-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
/* Owner fix 22 (T-196): legacy panel h2/h3 still rendered as a pink band.
   The rule below (as it stood) only stripped the H2 ITSELF (background/
   padding); the pink (#f6dafe, admin.css ~1136) is on the .section_title
   DIV wrapping it, which this never touched, so once the h2's own padding
   was zeroed the div's untouched background hugged the text as a tight
   pink strip instead of disappearing. It also only covered .ph2-panels-zone
   (Profile History/Lock Profile in #xpand_more_reason, Alternate Phone
   Numbers in #xpand_more_numbers, Finance Link + History in
   #xpand_finance_link, Follow Up in #xpand_follow_up, Create Custom Offer
   in #xpand_create_followup); the treatment-plan sub-panels (Payment
   History/Record New Payment in #xpand_more_payments_*, Commission
   Requests/Request Commission in #xpand_more_commissions_*, Record New
   Notes/Add New Note in #xpand_more_notes_*, Take New Photo/Photos in
   #xpand_more_photos_*/#xpand_more_exion_*, Edit Current Treatment Plan in
   #xpand_edit_the_actual_plan_*) live in .ph2-tp-container, outside
   .ph2-panels-zone, so they kept the full legacy pink band untouched.
   #ph2-pill-slot (Pay360/Media Consent/Create Treatment Plan) has no h2/h3
   today (h4 .p360-title/.mcx-title instead) but is covered for parity. */
.ph2-page .ph2-panels-zone .section_title,
.ph2-page #ph2-pill-slot .section_title,
.ph2-page #ph2-panel-slot .section_title,
.ph2-page .ph2-tp-container .section_title {
    background: none;
}
.ph2-page .ph2-panels-zone h2,
.ph2-page .ph2-panels-zone h3,
.ph2-page #ph2-pill-slot h2,
.ph2-page #ph2-pill-slot h3,
.ph2-page #ph2-panel-slot h2,
.ph2-page #ph2-panel-slot h3,
.ph2-page .ph2-tp-container h2,
.ph2-page .ph2-tp-container h3 {
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    background: none;
    padding: 0;
    margin: 12px 0 8px;
    text-align: left;
    line-height: normal;
}
.ph2-page .ph2-panels-zone .the_container_tabs {
    border-bottom: none;
    padding-bottom: 0;
}
/* Owner request: no white band behind the tabs anywhere on this page
   (base rule at ~1668 paints #fff). */
.ph2-page .the_container_tabs {
    background: transparent;
    padding: 5px;
    border-bottom: none;
}
.ph2-page .ph2-panels-zone .form-control,
.ph2-page .ph2-booking-split .form-control,
.ph2-page .ph2-profile .form-control {
    border-radius: 10px;
    border-color: rgba(28, 31, 46, 0.15);
    box-shadow: none;
    font-size: 13px;
}
/* Booking-form selects/inputs: prototype 557/560 metrics */
.ph2-page .ph2-booking-split .form-control {
    height: auto;
    padding: 10px 11px;
    border-radius: 9px;
    border-color: rgba(28, 31, 46, 0.1);
}
.ph2-page .ph2-panels-zone .btn-primary,
.ph2-page .ph2-booking-split .book_now .btn-primary {
    border-radius: 10px;
    font-weight: 700;
}
.ph2-page .ph2-panels-zone select.form-control { border-radius: 10px; }
.ph2-page .ph2-panels-zone .row-plan {
    background: #f7f8fb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 8px;
    padding: 6px 4px;
}
.ph2-page .ph2-panels-zone .row-plan-desc.ze_notes {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.08);
    border-radius: 10px;
    margin-top: 6px;
    padding: 8px 4px;
}
.ph2-page .ph2-panels-zone .gen_notes_plus_sign {
    background: #2f6bea;
    color: #fff;
    border-radius: 10px;
}
.ph2-page .ph2-panels-zone .no-records {
    background: #f7f8fb;
    border-radius: 12px;
    padding: 14px;
    color: #9aa1b2;
    font-weight: 600;
    text-align: center;
}
/* Legacy consent buttons inside the Consents panel */
.ph2-page .consnt.butz {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 12px;
    color: #1c1f2e;
    font-weight: 700;
}
.ph2-page .consent_frms { justify-content: flex-start; }
/* Create Treatment Plan panel shell */
.ph2-page .the_actual_plan {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
    padding: 16px;
    margin: 12px 0;
    overflow-x: hidden;
}
/* Owner fix 7: the legacy treatment-plan form nests raw Bootstrap
   .row/.col-xs-* inside this card without a .container ancestor to cancel
   the row's -15px margins against, so it bled past the card's own 16px
   padding on open. Flatten the nesting to the card's own padding instead
   (this form is always a single full-width column here, so dropping the
   gutter costs nothing). overflow-x above is a safety net in case any
   fixed-width element still pokes out. */
.ph2-page .the_actual_plan .row {
    margin-left: 0;
    margin-right: 0;
}
.ph2-page .the_actual_plan [class*="col-xs-"],
.ph2-page .the_actual_plan [class*="col-sm-"] {
    padding-left: 0;
    padding-right: 0;
}
/* Owner fix 8: service logo tiles, 5 equal-width columns per row (the base
   .services rule elsewhere on the site uses a 4-column, column-major grid;
   this scoped override only applies on the ph2 page). */
.ph2-page .services {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 8px;
}
/* The view's height="20" gives each logo a fixed width (a 10:1 wordmark is
   208px), which set the 1fr columns' minimum and pushed the fifth column out
   of the panel. A percentage cap lets every logo shrink inside an equal tile. */
.ph2-page .the_service label img {
    max-width: 100%;
    object-fit: contain;
}
/* Mobile: stack one per row, same as the base .services mobile rule that
   patient_history relies on (this scoped override would otherwise beat it).
   768px matches the base breakpoint so there's no 760-768 gap. */
@media (max-width: 768px) {
    .ph2-page .services {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
}

/* Owner fix 9/21: #xpand_pay360 / #xpand_media_consent get the standard
   grey .ph2-panel shell (class added in the view) once tmp_history_shell.php
   relocates them into #ph2-panel-slot along with every other tile panel
   (T-199: they're plain tiles now, not pills); owner fix 21 (T-196) also
   added them to the explicit ID list above (they used to rely solely on the .ph2-panel
   class-based fallback, the only two panels doing so — every other working
   panel is ID-listed, so this removes that one difference). Flatten the
   legacy col-sm-12 gutter, then give .p360-panel/.mcx-panel a WHITE rounded
   sub-card (was background:none/padding:0, i.e. no visual card at all,
   which combined with the grey shell being hard to tell apart from the page
   background is what read as "no panel card") so the create-link form sits
   on its own card inside the grey shell, matching the Card-payments-history
   sub-panel below (#xpand_pay360_activity .p360-row, already white rows). */
.ph2-page #xpand_pay360 .col-sm-12,
.ph2-page #xpand_media_consent .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
    float: none;
    width: auto;
}
/* These two are plain .collapse divs (not .row), so without unfloating the
   Bootstrap columns above, the grey shell would collapse to zero height and
   render "folded" above its own content. Same for the relocated activity
   panel, which is itself a floated col. */
.ph2-page #xpand_pay360_activity {
    float: none;
    width: auto;
}
.ph2-page #xpand_pay360 .p360-panel,
.ph2-page #xpand_media_consent .mcx-panel {
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0;
}

/* --- ph2: Book Appointment split layout + bookings section --- */
.ph2-h3 {
    font-size: 19px;
    font-weight: 800;
    color: #1c1f2e;
    margin: 4px 0 14px;
}
/* Calendar left, the whole booking form right (CSS grid over legacy markup).
   Prototype 508: equal auto-fit halves, gap 16px.
   BUG (T-197): auto-fit picks the column COUNT from the container's
   available width, but every child below is placed with a HARD-CODED
   grid-column: 1 / grid-column: 2, which assumes exactly two tracks always
   exist. Anywhere the container is narrower than ~2*270px+gap but still
   above the 860px breakpoint below (a real, reachable range - e.g. with
   devtools docked, a split-screen window, or a smaller laptop panel), the
   grid track for grid-column:2 gets stranded outside the fitted grid, so
   the ENTIRE booking form + Book Multiple Appointments wizard (including
   #bulk-results, the bulk preview target) renders off to the right, outside
   the visible container, with no visual sign anything happened. Fixed
   track count removes the mismatch; the @media rule below still fully
   abandons grid for real mobile widths. */
.ph2-page .ph2-booking-split {
    display: grid;
    /* Two EQUAL columns like the prototype's minmax(270px,1fr) halves, but
       with a FIXED track count: auto-fit could collapse to one track while
       children stay pinned to grid-column 2 (the off-screen preview bug). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.ph2-page .ph2-booking-split > .ph2-cal-col {
    grid-column: 1;
    grid-row: 1 / span 3;
}
.ph2-page .ph2-booking-split > *:not(.ph2-cal-col) { grid-column: 2; }
/* Hidden loader form must not occupy a grid row of its own */
.ph2-page .ph2-booking-split > #calendar-loader-form { display: none; }
@media all and (max-width: 860px) {
    .ph2-page .ph2-booking-split { display: block; }
}
/* Booking form internals: calm the legacy colors.
   Prototype 561: kill the legacy pink/italic/100px notes textarea. */
.ph2-page .ph2-booking-split textarea.form-control {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    color: #1c1f2e;
    height: auto !important;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 13px;
    font-style: normal;
    resize: vertical;
}
.ph2-page .ph2-booking-split .book_now .btn-primary {
    background: #2f6bea;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    padding: 12px;
}
/* Bookings history: its own white card below the booking form (prototype 617) */
.ph2-page .ph2-bookings-col {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
    padding: 16px 18px;
    margin-top: 12px;
}
/* Legacy section title inside the card (prototype 618) */
.ph2-page .ph2-bookings-col > .title_b.title_plan { margin-bottom: 8px; }

/* Email-link form as the 4th outline button in the profile action row */
.ph2-profile-actions { flex-wrap: wrap; }
.ph2-act-form {
    flex: 2;
    min-width: 200px;
    display: flex;
    margin: 0;
}
.ph2-act-form .ph2-act { width: 100%; }
/* Opened Payment Plan panel: neutralize the legacy teal/red look.
   Prototype 356-365: flex header w/ inline stats, white radius-11 rows,
   tp-foot-cta gradient CTA, dark heading, white dashed agreement button. */
.ph2-page #ph2_panel_paymentplan .scheduled-payments-list {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.ph2-page #ph2_panel_paymentplan h4 {
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    text-align: left;
}
/* Flex header: title left, Outstanding/Scheduled stats right (prototype 357) */
.ph2-page #ph2_panel_paymentplan .ph2-pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ph2-page #ph2_panel_paymentplan .ph2-pp-title { margin: 0; }
.ph2-page #ph2_panel_paymentplan .ph2-pp-stats {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}
.ph2-page #ph2_panel_paymentplan .ph2-pp-out { color: #e23c3c; }
.ph2-page #ph2_panel_paymentplan .ph2-pp-sched { color: #2f6bea; }
.ph2-page #ph2_panel_paymentplan .ph2-pp-empty { margin: 0 0 10px; font-size: 13px; color: #6b7280; }
/* Batch picture upload: per-file failure reasons under "Uploaded N of M. K failed." */
.upload-fail-reasons { margin-top: 4px; font-size: 12px; word-break: break-word; }
/* Scheduled payment + agreement rows: white cards, radius 11 (prototype 358-360) */
.ph2-page #ph2_panel_paymentplan .scheduled-payments-list ul li,
.ph2-page #ph2_panel_paymentplan .pa-agreements-list ul li {
    background: #fff;
    border: none;
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 7px;
    box-shadow: none;
}
.ph2-page #ph2_panel_paymentplan .plan-link-badge {
    background: #e8eefc;
    color: #2f6bea;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    border: none;
}
.ph2-page #ph2_panel_paymentplan .plan-link-badge:hover {
    background: #2f6bea;
    color: #fff;
}
.ph2-page #ph2_panel_paymentplan ul li .sp-pay-main {
    gap: 10px;
    margin-top: 6px;
}
.ph2-page #ph2_panel_paymentplan ul li .sp-pay-main > span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: #1c1f2e;
}
.ph2-page #ph2_panel_paymentplan ul li .sp-pay-main > span:nth-child(2) {
    font-size: 14px;
    font-weight: 800;
    color: #1c1f2e;
    background: none;
    padding: 0;
    border-radius: 0;
    min-width: 0;
}
/* Delete X: plain red text button (prototype 359) */
.ph2-page #ph2_panel_paymentplan .delete-payment-form button {
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    color: #e23c3c;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.ph2-page #ph2_panel_paymentplan .delete-payment-form button:hover {
    background: none;
    color: #c11b1b;
}
/* Status badges: soft chips, radius 6 in the scheduled list (prototype 360) */
.ph2-page #ph2_panel_paymentplan .alert-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    border: none;
}
.ph2-page #ph2_panel_paymentplan .alert-no-booking { background: #fdecec; color: #e23c3c; }
.ph2-page #ph2_panel_paymentplan .alert-one-off { background: #eceef4; color: #6b7280; }
.ph2-page #ph2_panel_paymentplan .alert-has-booking { background: #e4f5e9; color: #17a34a; }
/* ...but radius-99 status chips on agreements (prototype 364 'Signed') */
.ph2-page #ph2_panel_paymentplan .pa-agreements-list .alert-badge {
    border-radius: 99px;
    font-size: 12px;
    padding: 3px 10px;
}
/* Create Payment Plan keeps the tp-foot-cta gradient pill (prototype 362, README keep-value) */
.ph2-page #ph2_panel_paymentplan .sched-multi-p-but {
    width: 100%;
    background: linear-gradient(-23deg, #9e60ed 30%, #5ba1db 100%);
    border: none;
    border-radius: 999px;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(158, 96, 237, 0.25);
}
/* Create Agreement to Pay: white dashed button, NOT the gradient (prototype 365) */
.ph2-page #ph2_panel_paymentplan .pa-company-btn {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px dashed #c3c9d8;
    border-radius: 11px;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    box-shadow: none;
}
.ph2-page #ph2_panel_paymentplan .pa-company-btn:hover,
.ph2-page #ph2_panel_paymentplan .pa-company-btn:focus {
    background: #fff;
    border-color: #2f6bea;
    color: #2f6bea;
}
.ph2-page #ph2_panel_paymentplan .pa-new-btn-label {
    color: #1c1f2e;
    text-shadow: none;
    text-align: left;
    font-size: 14px;
    font-weight: 800;
}
/* 'Agreements to Pay' heading: dark 14px/800, left (prototype 363) */
.ph2-page #ph2_panel_paymentplan .pa-agreements-list h5 {
    color: #1c1f2e;
    font-size: 14px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    opacity: 1;
    margin: 12px 0 7px;
}

/* --- ph2 booking form detail pass --- */
.ph2-page .ajax-admin-fetch {
    background: transparent;
    margin-left: 0;
    padding-top: 0;
    border-radius: 0;
    overflow: visible;
}
.ph2-booking-for {
    background: #f7f8fb;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1c1f2e;
    margin-bottom: 12px;
}
.ph2-booking-for span { color: #2f6bea; }
/* Email-link button label wraps instead of clipping */
.ph2-act-form .ph2-act {
    white-space: normal;
    line-height: 1.25;
}
/* Owner fix 1/9: #xpand_pay360 and #xpand_media_consent used to render
   full-bleed (outside any .container), so this capped them at a fixed
   900px and centered them as a workaround. Owner fix 9 relocates both
   panels into #ph2-pill-slot (inside the normal container/row flow), so
   they now inherit the page's real (responsive) container width and this
   fixed cap would only fight it (see tmp_history_shell.php pill-slot move). */
.ph2-tp-container { margin-top: 12px; margin-bottom: 12px; }

/* ph2: kill the leftover fetch-box border artifact */
.ph2-page .ajax-admin-fetch {
    border: none;
    margin-right: 0;
    padding-bottom: 0;
}

/* ph2: month calendar polish to match the design mockup */
.ph2-page .ajax-calendar .ui-widget-content,
.ph2-page .ajax-calendar .ui-widget.ui-widget-content {
    /* Owner fix 5a: no outer border on the calendar box (prototype has none;
       explicit none, not just omitted, since jQuery UI's base theme border
       would otherwise show through). */
    border: none;
    border-radius: 16px;
    background: #fff;
}
.ph2-page .ui-datepicker { padding: 8px; }
/* Frozen geometry: with the default AUTO table layout, a selected day's
   bolder text (or today's 1.5px border) nudges column widths, which
   re-derives the square cells' heights and shifts everything below the
   calendar on every pick. table-layout:fixed pins all 7 columns to equal,
   content-independent widths, so the aspect-ratio squares stay stable. */
.ph2-page .ui-datepicker table {
    margin: 0;
    table-layout: fixed;
    width: 100%;
}
.ph2-page .ajax-calendar { min-height: 330px; }
/* Weekday header: 'Mo Tu We...' 11px/700 #9aa1b2, no uppercase transform (prototype 515) */
.ph2-page .ui-datepicker th {
    color: #9aa1b2;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    padding: 6px 0;
}
.ph2-page .ui-datepicker td { padding: 2px; }
/* Day cells: squares, radius 8, 14px/600 (prototype 516-519 + runtime 996).
   Owner fix 5b: bumped from 12.5px so day numbers are comfortably readable. */
.ph2-page .ui-datepicker td a,
.ph2-page .ui-datepicker td span {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.07);
    border-radius: 8px;
    box-sizing: border-box;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1c1f2e;
}
.ph2-page .ui-datepicker td .ui-state-hover {
    background: #e8eefc;
    color: #2f6bea;
}
/* Days with existing bookings (prototype runtime 996, README: #675d97) */
.ph2-page .ui-datepicker td.ph2-day-booked a:not(.ui-state-active) {
    background: #675d97;
    border-color: #675d97;
    color: #fff;
}
/* Selected day is pink (owner request 2026-08-15), matching the pink Book
   Appointment button + the legend's "selected" dot. */
.ph2-page .ui-datepicker td a.ui-state-active {
    background: #da2bed;
    border-color: #da2bed;
    color: #fff;
    font-weight: 800;
}
/* Today: 1.5px blue outline, text stays dark (prototype runtime 996) */
.ph2-page .ui-datepicker td a.ui-state-highlight {
    background: #fff;
    border: 1.5px solid #2f6bea;
    color: #1c1f2e;
}
.ph2-page .ui-datepicker td a.ui-state-highlight.ui-state-active {
    background: #da2bed;
    border-color: #da2bed;
    color: #fff;
}
.ph2-page .ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    font-weight: 800;
    color: #1c1f2e;
    padding: 4px 0 8px;
}
/* Prev/next: 30x30 squares, radius 8, text chevrons (prototype 511-513) */
.ph2-page .ui-datepicker .ui-datepicker-prev,
.ph2-page .ui-datepicker .ui-datepicker-next {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    top: 4px;
    cursor: pointer;
}
.ph2-page .ui-datepicker .ui-datepicker-prev .ui-icon,
.ph2-page .ui-datepicker .ui-datepicker-next .ui-icon {
    background-image: none;
    text-indent: -9999px;
    overflow: hidden;
}
.ph2-page .ui-datepicker .ui-datepicker-prev:after,
.ph2-page .ui-datepicker .ui-datepicker-next:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #6b7280;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}
.ph2-page .ui-datepicker .ui-datepicker-prev:after { content: '\2039'; }
.ph2-page .ui-datepicker .ui-datepicker-next:after { content: '\203A'; }
/* Calendar legend (prototype 521) */
.ph2-cal-legend {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
    flex-wrap: wrap;
}
.ph2-cal-legend--sel { color: #da2bed; font-weight: 700; }
.ph2-cal-legend--booked { color: #675d97; font-weight: 700; }

/* --- ph2 Invoices panel (prototype 222-227) --- */
.ph2-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ph2-inv-head .ph2-panel-h { margin: 0; }
.ph2-inv-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Functional currency controls (not in the prototype): small right-side pills */
.ph2-page #xpand_invoices .patient-currency-badge {
    background: #eceef4;
    color: #6b7280;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    margin-left: 0;
}
.ph2-page #xpand_invoices .patient-currency-form { margin-left: 0; }
.ph2-page #xpand_invoices .patient-currency-form select {
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
}
/* Generate Invoice: prototype blue button (outranks the view's #show-generate-ui style) */
.ph2-page #show-generate-ui {
    display: inline-block;
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.ph2-page #show-generate-ui:hover { background: #2558c4; color: #fff; }
.ph2-inv-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ph2-inv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    flex-wrap: wrap;
}
.ph2-inv-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
}
.ph2-inv-date { font-size: 13px; color: #6b7280; }
.ph2-inv-amount { font-weight: 800; flex: 1; }
.ph2-status-pill {
    background: #eceef4;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 10px;
}
.ph2-status-pill--draft { background: #fdf1dc; color: #b45309; }
.ph2-status-pill--sent { background: #e4f5e9; color: #17a34a; }
.ph2-inv-link {
    font-size: 12px;
    font-weight: 600;
    color: #2f6bea;
}
.ph2-inv-link:hover { color: #1d4fc4; text-decoration: none; }
.ph2-inv-linkbtn {
    background: none;
    border: none;
    padding: 0;
}
.ph2-inv-link--danger { color: #e23c3c; }
.ph2-inv-link--danger:hover { color: #c11b1b; }
.ph2-inv-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.ph2-inv-date-input {
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #6b7280;
    background: #fff;
}

/* --- ph2 Reviews panel (prototype 259-269) --- */
.ph2-page #xpand_more_reviews .the_container_tabs {
    background: transparent;
    padding: 0;
    margin: 0;
}
.ph2-review-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}
.ph2-review-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ph2-page #xpand_more_reviews .ph2-review-select {
    flex: 1;
    min-width: 170px;
    width: auto;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
}
.ph2-review-send {
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
}
.ph2-review-send:hover { background: #2558c4; }
/* Send feedback as inline lines, not Bootstrap alert panels (prototype 265) */
.ph2-page #xpand_more_reviews .alert {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
.ph2-page #xpand_more_reviews .alert-success { color: #17a34a; }
.ph2-page #xpand_more_reviews .alert-success:before { content: '\2713 '; }
.ph2-page #xpand_more_reviews .alert-danger { color: #e23c3c; }
.ph2-asked-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ph2-asked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
}
.ph2-asked-service { flex: 1; font-weight: 700; font-size: 14px; }
.ph2-asked-meta { font-size: 13px; color: #6b7280; }

/* --- ph2 Calls panel: Telepliant list re-skinned (prototype 276-279) --- */
.ph2-page .tpc-panel {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
.ph2-page .tpc-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    margin: 0 0 8px;
}
.ph2-page .tpc-badge {
    background: #e8eefc;
    color: #2f6bea;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 9px;
    margin-left: 0;
}
.ph2-page .tpc-row {
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    gap: 10px;
    border-bottom: none;
    margin-bottom: 7px;
}
.ph2-page .tpc-row:last-child { margin-bottom: 0; }
.ph2-page .tpc-dir { min-width: 0; font-size: 13px; }
/* Prototype 278-279: Out is green, In is blue (scoped: /admin/call_logs keeps base) */
.ph2-page .tpc-dir--out { color: #17a34a; }
.ph2-page .tpc-dir--in { color: #2f6bea; }
.ph2-call-main {
    flex: 1;
    min-width: 180px;
    font-size: 13px;
    color: #1c1f2e;
}
.ph2-page .tpc-when,
.ph2-page .tpc-num { min-width: 0; color: #1c1f2e; }
.ph2-page .tpc-when + .tpc-num:before { content: ' \00b7 '; color: #6b7280; }
.ph2-page .tpc-status {
    font-size: 12px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 10px;
    text-transform: none;
    letter-spacing: normal;
}
.ph2-page .tpc-status--answered { background: #e4f5e9; color: #17a34a; }
.ph2-page .tpc-dur { min-width: 0; font-size: 12px; color: #6b7280; }
.ph2-page .tpc-rec {
    font-size: 12px;
    font-weight: 600;
    color: #2f6bea;
    text-decoration: none;
}

/* --- ph2 Missed Calls: white card rows in the fused Calls panel (prototype 281-282) --- */
.ph2-missed-h { margin-bottom: 8px; }
.ph2-page #xpand_missed_calls .missed_calls_container {
    background: transparent;
    padding: 0;
}
.ph2-page #xpand_missed_calls .bbot {
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    border-bottom: none;
    margin-bottom: 7px;
}
.ph2-page #xpand_missed_calls .bbot:last-child { margin-bottom: 0; }
.ph2-page #xpand_missed_calls .missed_calls_container .row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1c1f2e;
}
.ph2-page #xpand_missed_calls .bbot .row > div {
    float: none;
    width: auto;
    padding: 0;
    font-size: 13px;
}
.ph2-page #xpand_missed_calls .bbot .row > div:first-child { flex: 1; }
.ph2-page #xpand_missed_calls .bbot .row > div:last-child { color: #6b7280; }

/* =========================================================================
   ph2 panels-b: Payments Overview / Payment Plan / Consents / Follow Up /
   Finance / Communication / Gift / Lock / Alt Phones / AI Sessions innards
   ========================================================================= */

/* Payments Overview: PDF export button per prototype 288 */
.ph2-page .po-heading-row .po-export-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.ph2-page .po-heading-row .po-export-btn:hover,
.ph2-page .po-heading-row .po-export-btn:focus {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}
/* 'Fully Paid Treatment Plans' summary: quiet 13px toggle (prototype 339) */
.ph2-page #xpand_more_payment_plan .completed-section { margin-top: 12px; }
.ph2-page #xpand_more_payment_plan .completed-title {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    background: none;
    border-radius: 0;
    padding: 8px 0;
}

/* Pay360 card-payments history: ph2 language instead of the legacy grey box */
.ph2-page #xpand_pay360_activity .p360-panel {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
.ph2-page #xpand_pay360_activity .p360-title {
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    margin: 0 0 8px;
}
.ph2-page #xpand_pay360_activity .p360-badge {
    background: #f0e9fc;
    color: #7c3aed;
    border-radius: 99px;
    padding: 3px 9px;
}
.ph2-page #xpand_pay360_activity .p360-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}
.ph2-page #xpand_pay360_activity .p360-row {
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    border-bottom: none;
    margin-bottom: 7px;
}
.ph2-page #xpand_pay360_activity .p360-row:last-child { margin-bottom: 0; }

/* --- Consents panel rows (prototype 370-388) --- */
.ph2-consent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    flex-wrap: wrap;
}
.ph2-consent-row--dashed { border: 1px dashed #c3c9d8; }
.ph2-consent-name {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
    min-width: 120px;
    color: #1c1f2e;
}
a.ph2-consent-name:hover,
a.ph2-consent-name:focus { color: #2f6bea; text-decoration: none; }
/* Status chips inside consent/lock rows only: the profile-card .ph2-chip
   (Active + currency) keeps its own 13px/600 spec (prototype 62-64). */
.ph2-consent-row .ph2-chip,
.ph2-lock-row .ph2-chip {
    font-size: 12px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 10px;
    flex: 0 0 auto;
}
.ph2-chip--todo { background: #fdecec; color: #e23c3c; }
.ph2-chip--done { background: #e4f5e9; color: #17a34a; }
.ph2-consent-open {
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
}
.ph2-consent-open:hover,
.ph2-consent-open:focus { background: #2558c4; color: #fff; text-decoration: none; }
/* Save as PDF next to a completed consent (2026-09-15): outlined twin of
   .ph2-consent-open; the link is a consent/pdf/... download. */
.ph2-consent-pdf {
    background: #fff;
    color: #2f6bea;
    border: 1px solid #bcd0f7;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.42857143;
    cursor: pointer;
}
.ph2-consent-pdf:hover,
.ph2-consent-pdf:focus { background: #eef3fe; color: #2558c4; text-decoration: none; }
.ph2-consent-genform,
.ph2-consent-moreform { margin: 0; }
.ph2-consent-gen {
    background: #fff;
    color: #2f6bea;
    border: 1px solid #bcd0f7;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
}
.ph2-consent-gen:hover { background: #f5f8ff; }
.ph2-consent-more { margin-top: 10px; }
.ph2-page .ph2-consent-more summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    padding: 6px 0;
    background: none;
}
.ph2-consent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 7px;
    margin-top: 6px;
}
.ph2-consent-moreform .ph2-consent-addbtn {
    width: 100%;
    background: #fff;
    border: 1px dashed #c3c9d8;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3d4254;
}
.ph2-consent-moreform .ph2-consent-addbtn:hover { border-color: #2f6bea; color: #2f6bea; }

/* --- Follow Up panel (prototype 393-402) --- */
.ph2-page #xpand_follow_up .ph2-fu-reason {
    background: #fff;
    color: #1c1f2e;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 14px;
    min-height: 56px;
    height: auto;
    box-shadow: none;
}
.ph2-page #xpand_follow_up .ph2-fu-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ph2-page #xpand_follow_up .ph2-fu-date {
    flex: 1;
    min-width: 160px;
    width: auto;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
    background: #fff;
}
.ph2-page #xpand_follow_up .ph2-fu-time {
    flex: 1;
    min-width: 130px;
    margin: 0; /* cancel legacy .book_now / .followuptime margins */
}
.ph2-page #xpand_follow_up .ph2-fu-time select.form-control {
    width: 100%;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
    background-color: #fff;
}
.ph2-page #xpand_follow_up .ph2-fu-submit {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
}
.ph2-page #xpand_follow_up .ph2-fu-submit:hover { background: #2558c4; }
/* Automated follow-ups: white card rows + green state (prototype 400-402) */
.ph2-page #xpand_follow_up .au-patientauto {
    border-top: none;
    margin-top: 12px;
    padding-top: 0;
}
.ph2-page #xpand_follow_up .au-patientauto__title {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 7px;
}
.ph2-page #xpand_follow_up .au-patientauto__list li {
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    border-bottom: none;
    margin-bottom: 7px;
    font-size: 13px;
}
.ph2-page #xpand_follow_up .au-pausestate {
    color: #17a34a;
    font-size: 13px;
    font-weight: 600;
}
.ph2-page #xpand_follow_up .au-pausestate--off { color: #b45309; }
.ph2-page #xpand_follow_up .au-pauseform {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ph2-page #xpand_follow_up .au-pauseform .btn {
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}
.ph2-page #xpand_follow_up .au-pauseform .btn-default {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    padding: 6px 11px;
    color: #1c1f2e;
}

/* --- Finance panel: plain select + blue button in one row (prototype 407-415) --- */
.ph2-page #xpand_finance_link .finance_link_card {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.ph2-page #xpand_finance_link .finance_link_intro {
    flex-basis: 100%;
    margin: 0 0 2px;
    font-size: 13px;
    color: #6b7280;
}
.ph2-page #xpand_finance_link .finance_link_field {
    flex: 1;
    min-width: 140px;
    margin: 0;
}
.ph2-page #xpand_finance_link .finance_link_label { display: none; }
.ph2-page #xpand_finance_link .finance_link_channel {
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 34px 11px 13px;
    font-size: 14px;
    color: #1c1f2e;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M6 8L0 0h12z'/></svg>");
}
.ph2-page #xpand_finance_link .finance_link_channel:focus {
    border-color: #2f6bea;
    box-shadow: 0 0 0 3px rgba(47, 107, 234, 0.13);
}
.ph2-page #xpand_finance_link .finance_link_send_btn {
    display: inline-block;
    width: auto;
    height: auto;
    background: #2f6bea;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}
.ph2-page #xpand_finance_link .finance_link_send_btn:hover,
.ph2-page #xpand_finance_link .finance_link_send_btn:focus {
    background: #2558c4;
    box-shadow: none;
}
.ph2-page #xpand_finance_link .finance_link_response { flex-basis: 100%; margin: 0; }
/* Finance history: chip rows instead of the column-header table (prototype 414-415) */
.ph2-page #xpand_finance_link .row-plan { display: none; }
.ph2-page #xpand_finance_link .finance_link_history_row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    margin: 0 0 7px;
    flex-wrap: wrap;
}
.ph2-page #xpand_finance_link .finance_link_history_row:nth-child(even) { background: #fff; }
.ph2-page #xpand_finance_link .finance_link_history_row > div {
    float: none;
    width: auto;
    padding: 0;
}
.ph2-page #xpand_finance_link .finance_link_history_row > div:first-child {
    flex: 1;
    font-size: 13px;
    color: #1c1f2e;
}
.ph2-page #xpand_finance_link .finance_link_history_row > div:nth-child(2) {
    background: #e8eefc;
    color: #2f6bea;
    font-size: 12px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 10px;
}
.ph2-page #xpand_finance_link .finance_link_history_row > div:last-child {
    font-size: 13px;
    color: #6b7280;
}

/* --- Communication panel: styled by the acm block (T-228, "All Communication on the patient page") --- */
/* WhatsApp composer: plain bar, green Send (prototype 445) */
.ph2-page #wa-input-bar {
    background: none;
    border-top: none;
    padding: 6px 0 0;
    gap: 6px;
}
.ph2-page #wa-msg {
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    min-height: 38px;
    height: auto;
    box-shadow: none;
    margin-right: 0;
    color: #1c1f2e;
}
.ph2-page #wa-attach {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    width: auto;
    height: 38px;
    padding: 0 12px;
    margin-right: 0;
}
.ph2-page #wa-attach:hover { background: #f7f8fb; }
.ph2-page #wa-send {
    background: #17a34a;
    border: none;
    border-radius: 10px;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.ph2-page #wa-send:hover { background: #128a3e; }

/* --- Gift Sessions: neutral + pink ph2 look (prototype 452-461) --- */
.ph2-page #xpand_gift .gs-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.ph2-page #xpand_gift .gs-panel__title {
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    margin: 0;
}
.ph2-page #xpand_gift .gs-badge {
    background: #fce7f3;
    color: #ec4899;
    border-radius: 99px;
    padding: 3px 9px;
}
.ph2-page #xpand_gift .gs-help {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0;
}
.ph2-page #xpand_gift .gs-create {
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}
.ph2-page #xpand_gift .gs-cfield { min-width: 0; flex: 1; }
.ph2-page #xpand_gift .gs-cfield--btn { flex: 0 0 auto; }
.ph2-page #xpand_gift .gs-cfield label { display: none; }
.ph2-page #xpand_gift .gs-service {
    min-width: 150px;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
    background-color: #fff;
    box-shadow: none;
}
.ph2-page #xpand_gift .gs-create-btn {
    background: #17a34a;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.ph2-page #xpand_gift .gs-create-btn:hover { background: #128a3e; }
.ph2-page #xpand_gift .gs-list {
    margin-top: 12px;
    border-top: none;
    padding-top: 0;
}
.ph2-page #xpand_gift .gs-list__title {
    font-size: 14px;
    margin: 0 0 7px;
}
.ph2-page #xpand_gift .gs-row {
    background: #fff;
    border: none;
    border-radius: 11px;
    padding: 11px 13px;
    margin: 0 0 7px;
}
.ph2-page #xpand_gift .gs-row__svc {
    color: #1c1f2e;
    font-weight: 700;
    font-size: 14px;
}
.ph2-page #xpand_gift .gs-row__meta { color: #6b7280; }
.ph2-page #xpand_gift .gs-row__earned {
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
}
.ph2-page #xpand_gift .gs-row__actions .btn-default {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #1c1f2e;
}
.ph2-page #xpand_gift .gs-row__actions .gs-row-cancel {
    background: #fdecec;
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #e23c3c;
}
.ph2-page #xpand_gift .gs-row__actions .gs-row-cancel:hover {
    background: #fbdada;
    color: #e23c3c;
}
.ph2-page #xpand_gift .gs-chip { border-radius: 99px; padding: 2px 9px; }
.ph2-page #xpand_gift .gs-chip--paid { background: #e4f5e9; color: #17a34a; }

/* --- Lock Profile panel: chip rows + inline lock form (prototype 467-473) --- */
.ph2-lock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.ph2-lock-reason {
    flex: 1;
    font-size: 13px;
    min-width: 140px;
    color: #1c1f2e;
}
.ph2-lock-meta {
    font-size: 12px;
    color: #6b7280;
}
/* Shared inline form row: input/select flex + action button (prototype 470, 481) */
.ph2-inline-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
.ph2-page #xpand_more_reason .ph2-lock-select {
    flex: 1;
    min-width: 200px;
    width: auto;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
    background-color: #fff;
    box-shadow: none;
}
.ph2-page .ph2-lock-btn {
    width: auto;
    background: #e54d4d;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.ph2-page .ph2-lock-btn:hover,
.ph2-page .ph2-lock-btn:focus { background: #d13c3c; color: #fff; }

/* --- Alt Phones panel: white rows + soft Delete + inline add form (prototype 479-481) --- */
.ph2-phone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 7px;
}
.ph2-phone-num {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1c1f2e;
}
.ph2-page .ph2-phone-del.btn-danger {
    background: #fdecec;
    border: none;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
    color: #e23c3c;
}
.ph2-page .ph2-phone-del.btn-danger:hover,
.ph2-page .ph2-phone-del.btn-danger:focus {
    background: #fbdada;
    color: #e23c3c;
}
.ph2-page #xpand_more_numbers .ph2-inline-input {
    flex: 1;
    min-width: 170px;
    width: auto;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
    background: #fff;
    box-shadow: none;
}
.ph2-page .ph2-inline-btn {
    width: auto;
    background: #2f6bea;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.ph2-page .ph2-inline-btn:hover,
.ph2-page .ph2-inline-btn:focus { background: #2558c4; color: #fff; }

/* --- AI Sessions panel: emoji title, helper line, pill date filters,
   blended bulk bar (prototype 487-490; bulk controls kept on purpose) --- */
.ph2-page #manage-ai-sessions .ph2-ai-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
}
.ph2-page #manage-ai-sessions .ph2-ai-help {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px;
}
.ph2-page #manage-ai-sessions #ai-sessions-dates { margin-bottom: 8px; }
.ph2-page #manage-ai-sessions #ai-sessions-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ph2-page #manage-ai-sessions #ai-sessions-actions[style*="display: none"] { display: none; }
.ph2-page #manage-ai-sessions #ai-selected-count {
    font-size: 13px;
    color: #6b7280;
}
.ph2-page #manage-ai-sessions .btn-default {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1c1f2e;
}
.ph2-page #manage-ai-sessions .btn-danger {
    background: #fdecec;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #e23c3c;
}
.ph2-page #manage-ai-sessions .btn-danger[disabled] { opacity: 0.55; }
/* Date filter buttons (JS-rendered): radius-99 pills, active solid blue */
.ph2-page #manage-ai-sessions .ai-date-btn {
    border-radius: 99px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    color: #1c1f2e;
    margin: 0 4px 4px 0;
}
.ph2-page #manage-ai-sessions .ai-date-btn.btn-primary {
    background: #2f6bea;
    border-color: #2f6bea;
    color: #fff;
    font-weight: 700;
}

/* --- ph2 booking right column: quicknote-booking fidelity pass --- */
/* Owner fix 8: '+ Add Service' logo tiles as an equal-width 5-per-row grid
   (base rule elsewhere on the site forces a 3-column grid). */
.ph2-page #unselectedServicesRow {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 760px) {
    .ph2-page #unselectedServicesRow { grid-template-columns: repeat(3, 1fr); }
}
/* '+ Add Service' + '+ Book Treatment (outside plan)' paired flex row (prototype 545-548) */
.ph2-page .ph2-addsvc-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 2px 0 8px;
}
.ph2-page #show-unselected-services,
.ph2-page #toggleOutsidePlan {
    flex: 1;
    display: block;
    width: auto;
    background: #fff;
    border: 1px solid #bcd0f7;
    color: #2f6bea !important;
    fill: #2f6bea !important;
    border-radius: 9px;
    padding: 9px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
}
.ph2-page #show-unselected-services:hover,
.ph2-page #toggleOutsidePlan:hover {
    background: #f4f7fe;
    color: #2f6bea;
}
.ph2-page #show-unselected-services span,
.ph2-page #toggleOutsidePlan span {
    background: none;
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 4px;
    font-size: inherit;
    color: inherit;
}
/* The outside-plan wrapper holds only the reveal panels now; the toggle lives in
   the flex row above, so the wrapper stays visible and its panels self-hide. */
.ph2-page #book_outside_plan { display: block !important; }

/* Selected plan-service block: grey box, logo tile + sessions left,
   visible Time/Duration selects (prototype 525-534). Owner fix 4 removed
   the redundant service-name text (.ph2-svc-name, deleted from the view
   and this rule) since the logo already identifies the service. */
.ph2-svc-left { display: none; }
.ph2-page #selectedServicesRow:has(.tp-service-wrapper) {
    background: #f7f8fb;
    border-radius: 12px;
    gap: 10px;
    justify-items: stretch;
    margin-bottom: 8px;
}
.ph2-page #selectedServicesRow .tp-service-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Owner fix: per-service white bordered card so it's obvious which
       Time/Duration selects below belong to which logo tile once more than
       one service is selected (the shared #selectedServicesRow grey box
       above already spaces cards 10px apart via its own gap). */
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.08);
    border-radius: 12px;
    padding: 12px;
}
.ph2-page #selectedServicesRow .ph2-svc-left {
    display: inline;
    margin-left: auto;
    font-size: 11px;
    color: #17a34a;
    font-weight: 700;
}
/* Owner fix: selected-service remove X (prototype has none; adds a second
   way to deselect besides clicking the logo tile again). Hidden in the
   #unselectedServicesRow picker grid (same shared markup, see view), shown
   only once the wrapper is moved into #selectedServicesRow. Sits after the
   sessions-left text on the same line; when that text is absent the X
   follows the tile directly and the adjacent-sibling rule below pushes it
   to the right edge itself. Click is forwarded by tmp_history_shell.php to
   the tile's own click handler, so this never duplicates removal logic. */
.ph2-svc-remove { display: none; }
.ph2-page #selectedServicesRow .ph2-svc-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: #fdecec;
    color: #e23c3c;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.ph2-page #selectedServicesRow .tp-logo-tile + .ph2-svc-remove { margin-left: auto; }
.ph2-page #selectedServicesRow .ph2-svc-remove:hover { background: #fbdada; }
.ph2-page #selectedServicesRow .tp-logo-tile {
    /* Owner request 2026-08-12: every selected-service pill the same width,
       slightly bigger (was width:auto hugging each brand's logo). */
    width: 210px !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #2f6f9f;
    border: none;
    border-radius: 8px;
    padding: 9px 13px !important;
    justify-content: center;
}
/* Same-width logo box inside the uniform pill: percentage width (never a
   px width - that becomes the img's min-content and fights the layout),
   logo max-height bumped 13px -> 17px, aspect ratio preserved. */
.ph2-page #selectedServicesRow .tp-logo-tile img {
    width: 100%;
    height: 17px;
    max-height: 17px;
    object-fit: contain;
}
.ph2-page #selectedServicesRow .tp-logo-tile:hover { background: #275d85; }
.ph2-page #selectedServicesRow .tp-controls {
    grid-column: auto;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}
.ph2-page #selectedServicesRow .tp-controls select.form-control {
    flex: 1;
    width: auto;
    min-width: 110px;
    height: auto;
    text-align: left;
    font-size: 13px;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 9px;
    padding: 9px 11px;
    background: #fff;
}

/* Owner fix: card-wraps #typeSelector/#times_show/#durations_show (view
   ~2830-2894) so the outside-plan config reads as ONE block, same intent as
   the .tp-service-wrapper cards above. The grey box that used to live on
   #typeSelector alone moves to the card; the nested col-xs-12 children have
   no .row ancestor here to cancel their 15px Bootstrap gutter, so it's
   zeroed below. */
/* Hidden until the outside-plan (Book New Consultation) mode reveals any of
   its children (the legacy JS toggles their .d-none-2): otherwise the empty
   wrapper renders as a stray grey bar. */
.ph2-page .ph2-outside-config-card {
    display: none;
    background: #f7f8fb;
    border-radius: 12px;
    padding: 11px 13px;
    margin: 0 0 8px;
}
.ph2-page .ph2-outside-config-card:has(> :not(.d-none-2)) {
    display: block;
}
.ph2-page .ph2-outside-config-card #typeSelector,
.ph2-page .ph2-outside-config-card #times_show,
.ph2-page .ph2-outside-config-card #durations_show {
    padding-left: 0;
    padding-right: 0;
}
.ph2-page .ph2-outside-config-card #typeSelector {
    background: none;
    padding-top: 0;
    padding-bottom: 0;
}
.ph2-page .ph2-outside-config-card #durations_show { margin-bottom: 0; }

/* Outside-plan reveal: grey box with pink type pills + full-service select
   (prototype 550-557) */
.ph2-page #typeSelector {
    background: #f7f8fb;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 8px;
}
.ph2-page .type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
}
.ph2-page .type-btn {
    background: #fbcfff;
    color: #1c1f2e;
    border: none;
    border-radius: 99px;
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 700;
}
.ph2-page .type-btn.active {
    background: #ec5ffa;
    color: #fff;
}
.ph2-page .ph2-outside-svc { margin-top: 8px; }
/* Owner fix 8: outside-plan logo tiles as an equal-width 5-per-row grid
   (matches the Create Treatment Plan panel + '+ Add Service' picker below).
   Supersedes the earlier compact-chip treatment (prototype 538-542), which
   used variable-width flex chips instead. */
.ph2-page #outsideServiceGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
@media (max-width: 760px) {
    .ph2-page #outsideServiceGrid { grid-template-columns: repeat(3, 1fr); }
}
.ph2-page #outsideServiceGrid .logo-tile {
    width: 100%;
    border-radius: 8px;
    padding: 8px 11px;
    background: #2f6f9f;
    border: 2px solid transparent;
}

/* T-198: .ips-selected-plan / .psw-plan-card__* / .plan-card__* restyle
   removed here (owner request) so the legacy .ips-selected-plan purple-card
   design (admin.css ~8855) renders unchanged, same as patient_history.php.
   .inline-payment-selector container styling removed too: legacy has no
   container box (base rule ~8833 is margin-bottom only), so the card sits
   directly on the page like it does on patient_history.php. .ips-amount
   below (kept ph2-styled, not part of this component) is unaffected. */
.ph2-page .ph2-booking-split .ips-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}
.ph2-page .ph2-booking-split .ips-amount label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 400;
    color: #3d4254;
    margin-bottom: 0;
    text-align: left;
}
.ph2-page .ph2-booking-split .ips-amount .input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: none;
}
.ph2-page .ph2-booking-split .ips-amount .input-group-addon {
    display: inline-block;
    width: auto;
    background: none;
    border: none;
    padding: 0;
    font-weight: 700;
    color: #6b7280;
    font-size: 14px;
}
.ph2-page .ph2-booking-split .ips-amount input.form-control {
    width: 90px;
    flex: none;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13px;
    height: auto;
}

/* Gated Book Now alert (prototype 570) */
.ph2-page .book_now .alert-danger {
    background: #fdecec;
    color: #c1015e;
    border: none;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}
.ph2-page .book_now .alert-danger .ph2-gate-jump {
    color: #c1015e;
    font-weight: 700;
    text-decoration: underline;
}

/* Book Now: outranks the legacy #book_now_outside .book-now-btn rule (prototype 567) */
.ph2-page #book_now_outside .book-now-btn {
    width: 100% !important;
    height: auto;
    background: #2f6bea;
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(47, 107, 234, 0.35);
    margin-top: 0;
}
.ph2-page #book_now_outside .book-now-btn:hover { background: #2558c4; }

/* T-198: #show-bulk-ui restyle removed (owner request) so the legacy pink
   full-width button (base rule ~5532) renders unchanged, same as
   patient_history.php. The chevron span injected by tmp_history_shell.php's
   ph2SyncBulkChev is also gone (see that file) so the legacy label-swap
   behavior (book_multiple_appts.php) is the only thing touching this
   button's text again. */

/* ===== ph2: booking area mobile pass (<=760px) =====
   The calendar/form columns already stack (calendar first, DOM order) via
   the .ph2-booking-split { display:block } rule at <=860px above, and the
   whole page already carries 110px of bottom clearance (.ph2-page
   padding-bottom, ~19700) well past the ~70-80px fixed bottom nav, so
   neither needs repeating here. Service cards are already full width at
   every breakpoint (#tpServiceLogos .tp-service-wrapper width:100% !important,
   ~5348) and Book Now is already 48px tall (#book_now_outside .book-now-btn
   height:48px !important, ~5330) and the notes textarea is already
   min-height:46px (~21030), so only the gaps below are new. */
@media (max-width: 760px) {
    /* Day-cell tap targets: same 38px convention as the site's other
       jQuery UI datepicker skins (v0-step2/v0-reschedule/rpe-dp, ~15461). */
    .ph2-page .ui-datepicker td a,
    .ph2-page .ui-datepicker td span {
        min-width: 38px;
        min-height: 38px;
        line-height: 38px;
    }
    /* >=44px touch height for every select/input in the booking form
       (location, outside-plan type-select/time/duration, TP time/duration,
       payment amount) — all share .form-control under .ph2-booking-split. */
    .ph2-page .ph2-booking-split .form-control {
        min-height: 44px;
    }
    /* TP per-service card: Time/Duration stay side by side at 50/50 instead
       of wrapping once the card's own padding (owner fix above) narrows the
       space below min-width:110px each. */
    .ph2-page #selectedServicesRow .tp-controls select.form-control {
        flex: 1 1 0;
        min-width: 0;
    }
    /* Outside-plan config card: type pills full width on their own row,
       Time/Duration paired 50/50 below (each is its own full-width .row
       sibling above 760px; here they wrap onto one flex row together). */
    .ph2-page .ph2-outside-config-card:has(> :not(.d-none-2)) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ph2-page .ph2-outside-config-card #typeSelector {
        flex: 1 1 100%;
    }
    .ph2-page .ph2-outside-config-card #times_show,
    .ph2-page .ph2-outside-config-card #durations_show {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
    }
    .ph2-page .type-selector { gap: 8px; }
    /* Remove-X: bigger hit area (width/height grow together, simpler and
       more predictable here than a padding-only invisible hit box). */
    .ph2-page #selectedServicesRow .ph2-svc-remove {
        width: 32px;
        height: 32px;
    }
}

/* ===== ph2: Activity Timeline (prototype 662-679) ===== */
/* Header row: heading left, filter select right */
.ph2-page .ptl-filters {
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.ph2-page .ph2-tl-heading {
    font-size: 18px;
    font-weight: 800;
    color: #1c1f2e;
}
.ph2-page .ptl-filters .form-control {
    width: auto;
    height: auto;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    box-shadow: none;
}
/* Entries: colored dot + vertical line beside a white card, restyled over the
   AJAX-rendered .ptl-entry markup (prototype 668-677) */
.ph2-page .ptl-panel { padding: 0; }
.ph2-page .ptl-entry {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 2px;
    padding: 0;
    border-bottom: none;
}
.ph2-page .ptl-icon {
    width: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ph2-page .ptl-icon .glyphicon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 18px;
    font-size: 0;
}
.ph2-page .ptl-icon .glyphicon:before { content: none; }
.ph2-page .ptl-icon::after {
    content: '';
    flex: 1;
    width: 2px;
    background: #d7dbe6;
}
.ph2-page .ptl-body {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 12px 16px;
    margin-bottom: 10px;
}
/* Meta line: entry text left, (relative) time right */
.ph2-page .ptl-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ph2-page .ptl-time {
    color: #6b7280;
    font-size: 12px;
    min-width: 0;
    text-align: right;
}
.ph2-page .ptl-summary {
    font-size: 14px;
    color: #1c1f2e;
}
.ph2-page .ptl-success .ptl-summary,
.ph2-page .ptl-danger .ptl-summary { color: #1c1f2e; }
.ph2-page .ptl-toggle {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #2f6bea;
    margin-top: 6px;
}
/* Outcome colors nudged to the prototype dot palette (913-918). The endpoint
   colors by outcome, not kind; this is the closest CSS-only mapping. */
.ph2-page .ptl-success .ptl-icon { color: #17a34a; }
.ph2-page .ptl-danger .ptl-icon { color: #e54d4d; }
.ph2-page .ptl-warning .ptl-icon { color: #f59e0b; }
.ph2-page .ptl-info .ptl-icon { color: #2f6bea; }
.ph2-page .ptl-default .ptl-icon { color: #6b7280; }
/* Load More (prototype 678). #ptl-load-more/#ptl-load-more-btn (patient_timeline.php's
   own control) is kept functional but visually hidden via Bootstrap's
   sr-only (view ~4242) so only the ph2 button below is seen; these rules
   still apply in case it's ever visible (e.g. no-JS fallback). */
.ph2-page .ptl-load-more { margin-top: 2px; }
.ph2-page #ptl-load-more-btn {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1f2e;
}
/* Owner fix: collapsed-to-3 Activity Timeline entries + ph2 Load More button
   (tmp_history_shell.php). Entries beyond the reveal count get this class
   added client-side; the button itself reveals +5 more per click, then
   forwards to the native #ptl-load-more-btn above once every fetched entry
   is already shown, so real server pagination keeps working unchanged. */
.ph2-page .ptl-entry.ph2-ptl-hidden { display: none; }
.ph2-page .ph2-ptl-loadmore-row { margin-top: 2px; text-align: center; }
.ph2-page .ph2-ptl-loadmore-btn {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1f2e;
    cursor: pointer;
}
.ph2-page .ph2-ptl-loadmore-btn:hover { background: #f7f8fb; }

/* ===== ph2: session-record '+' locked while the onboarding gate is active
   (prototype 711/718 + locked circle 941; server-side enforcement exists) ===== */
.ph2-page .record_new_sessz.ph2-record-locked {
    background: #c3c9d8;
    cursor: not-allowed;
}

/* ===== ph2: Treatment Plans wrapper is transparent (Owner fix 17, T-196).
   It used to be the single white card around ALL plans (prototype 682),
   which read as one big block with no separation between plans; now each
   plan gets its own card (.ph2-tp-card below), so this outer wrapper just
   sits on the page background. ===== */
.ph2-page .ph2-tp-container .bg_all {
    background: none;
    /* Owner fix (2026-08-12): the plans container now lives inside
       .ph2-zone-col (moved between Quick Note and Booking by
       tmp_history_shell), where owner fixes 14/19 already flatten its
       .container padding and row margin. This col's Bootstrap 15px was
       the one remaining inset, rendering the plan cards 15px narrower
       than the profile/stats/quick-note cards; zero it like the booking
       row's columns so the plan cards sit flush with the other cards. */
    padding-left: 0;
    padding-right: 0;
}
/* Same pairing as owner fix 19 for the booking row: with the col padding
   zeroed above, the "Treatment Plans" title row's own Bootstrap -15px
   margin would overhang the flattened edges; zero the pair so the title
   sits flush with the plan cards. */
.ph2-page .ph2-tp-container .row-plan {
    margin-left: 0;
    margin-right: 0;
}
.ph2-page .ph2-tp-container .row-plan > .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
}
/* Owner fix 17: one white rounded card per treatment plan. Wraps the
   plan-desc row + that plan's collapse sub-panels (payments/commissions/
   notes/photos/edit/signature); wrapper div added around the loop body in
   the view (tmp_history.php, .ph2-tp-card open ~4501 / close ~5459); plan
   internals are untouched legacy markup. */
.ph2-page .ph2-tp-container .ph2-tp-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
    margin-top: 14px;
    /* Contain the sub-panel shells' bottom margins: without a BFC the last
       child's margin collapses out of the card, so the grey shell visually
       touched the card's bottom edge with no white gap. */
    display: flow-root;
}
/* Owner request: rounded plan-desc rows. */
.ph2-page .row-plan-desc[class*="identifier_"] {
    border-radius: 25px;
}
/* Owner request 2026-08-11: the plan-card sub-panels (+Notes / +pay /
   +photos / +S / E-edit) get the SAME grey rounded shell as the redesigned
   tile panels. Targeted by id prefix so the plan's own areas collapse
   (#xpand_tp{identifier}) and signature collapse stay untouched. */
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"].in,
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"].collapsing,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"].in,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"].collapsing,
.ph2-page .ph2-tp-card [id^="xpand_more_notes_"].in,
.ph2-page .ph2-tp-card [id^="xpand_more_notes_"].collapsing,
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"].in,
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"].collapsing,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"].in,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"].collapsing,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"].in,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"].collapsing {
    background: #f7f8fb;
    border-radius: 16px;
    padding: 15px 16px;
    /* Unlike the tiles card, .ph2-tp-card has NO padding of its own (owner
       removed it), so the grey shell needs its own side/bottom margins to
       reproduce the tile panels' white breathing room around the grey. */
    margin: 12px 16px 16px;
    animation: ph2PanelIn 0.18s ease;
}
/* Two-column sub-panels (Payment History | Record New Payment, Commission
   Requests | Request Commission): drop the floated Bootstrap col behavior
   entirely in favor of a clean flex row with a real gap - no gutter-padding
   quirks, columns equal width. Stacks on mobile. */
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .the_container_tabs,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .the_container_tabs {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
/* Bootstrap's .row clearfix pseudo-elements become zero-width flex items,
   and the 20px gap around them adds phantom edge spacing - drop them. */
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .the_container_tabs::before,
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .the_container_tabs::after,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .the_container_tabs::before,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .the_container_tabs::after {
    display: none;
    content: none;
}
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .left_pay,
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .right_pay,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .left_pay,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .right_pay {
    float: none;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
/* Column headings sit flush at the panel top (the page-wide .section_title
   h2 rule adds a 12px top margin meant for mid-panel headings). */
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .the_container_tabs .section_title h2,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .the_container_tabs .section_title h2 {
    margin-top: 0;
}
/* Same flush-top treatment for the stacked panels' FIRST heading (Notes:
   direct child; Photos/Exion: nested one wrapper deep). Later mid-panel
   headings keep their 12px separation. */
.ph2-page .ph2-tp-card [id^="xpand_more_notes_"] .the_container_tabs > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"] .the_container_tabs > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"] .the_container_tabs > :first-child > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"] .the_container_tabs > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"] .the_container_tabs > :first-child > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .the_container_tabs > .section_title:first-child h2,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .the_container_tabs > :first-child > .section_title:first-child h2 {
    margin-top: 0;
}
@media (max-width: 760px) {
    .ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .the_container_tabs,
    .ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .the_container_tabs {
        flex-direction: column;
        gap: 14px;
    }
    /* Mobile: tighter horizontal padding inside the grey shells (the
       desktop 16px inset eats too much of a 390px viewport). */
    .ph2-page .ph2-tp-card [id^="xpand_more_payments_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_more_payments_"].collapsing,
    .ph2-page .ph2-tp-card [id^="xpand_more_commissions_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_more_commissions_"].collapsing,
    .ph2-page .ph2-tp-card [id^="xpand_more_notes_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_more_notes_"].collapsing,
    .ph2-page .ph2-tp-card [id^="xpand_more_photos_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_more_photos_"].collapsing,
    .ph2-page .ph2-tp-card [id^="xpand_more_exion_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_more_exion_"].collapsing,
    .ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"].in,
    .ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"].collapsing {
        padding: 12px 8px;
        margin: 10px 10px 14px;
    }
    /* In column direction the desktop flex:1 1 0 makes the columns' HEIGHT
       basis zero - they collapse to ~1px and content overlaps everything
       below. Size them by content on mobile. */
    .ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .left_pay,
    .ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .right_pay,
    .ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .left_pay,
    .ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .right_pay {
        flex: 0 0 auto;
        width: 100%;
    }
}
/* Request Commission: breathing room inside the white card around the
   lock/request controls. */
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .right_pay .row-plan-desc {
    padding: 12px;
}
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .ce-lock-toggle-btn {
    width: 100%;
    margin: 0;
}

/* Flatten Bootstrap gutters inside the shelled sub-panels so rows do not
   overhang the new padding (same treatment as the tile panel slots). */
.ph2-page .ph2-tp-card [id^="xpand_more_"] .row,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .row {
    margin-left: 0;
    margin-right: 0;
}
.ph2-page .ph2-tp-card [id^="xpand_more_"] [class*="col-sm-"],
.ph2-page .ph2-tp-card [id^="xpand_more_"] [class*="col-xs-"],
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] [class*="col-sm-"],
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] [class*="col-xs-"] {
    padding-left: 0;
    padding-right: 0;
}
/* Locked-profile banner as a ph2 card (was a full-bleed inline-styled
   .container with an h1). Same width rhythm as the other cards. */
.ph2-page .ph2-locked-banner {
    background: #fb8f5d;
    color: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    margin: 14px 0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
}
.ph2-page .ph2-locked-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
.ph2-page .ph2-locked-reason {
    background: #ea6261;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    margin: 0 0 12px;
}
.ph2-page .ph2-locked-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.ph2-page .ph2-locked-form .form-control {
    border-radius: 10px;
    flex: 1 1 220px;
    max-width: 340px;
}
.ph2-page .ph2-locked-unlock {
    background: #26b79c;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    font-weight: 700;
}
/* Mobile: main plan-card action circles at 45x45 ("+ Notes" wraps to
   "+" over "Notes"); E/i in .right_d keep their own small size. */
@media (max-width: 768px) {
    .ph2-page .ph2-tp-card .flex-col .left_d .notes_button,
    .ph2-page .ph2-tp-card .flex-col .left_d .pay_button {
        width: 45px;
        height: 45px;
        min-width: 45px;
        padding: 0 7px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex: 0 0 auto;
        box-sizing: border-box;
    }
}
/* T-197 item 3: "Treatment Plans" title bar. .row-plan here (view ~4390) is
   nested two levels inside .ph2-tp-container (container > row > col-sm-12 >
   row.row-plan), so it never picked up the .ph2-page .container > .row
   margin cap (~19722) the way the outer #myGroup row does; zero its own
   bleed + the col-sm-12 padding that was cancelling it, same technique as
   Owner fix 2/10 elsewhere on this page, so the title box lands at exactly
   .bg_all's content width, matching .ph2-tp-card below pixel-for-pixel. */
.ph2-page .ph2-tp-container .row-plan:not(.m0) {
    margin-left: 0;
    margin-right: 0;
}
.ph2-page .ph2-tp-container .row-plan:not(.m0) > .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
}
.ph2-page .ph2-tp-container .title_b.title_plan {
    background: #2f6bea;
    color: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0;
    font-size: 17px;
}

/* T-197 item 2: Treatment Plan sub-panels (Payment History/Record New
   Payment, Commission Requests, Record New Notes/Add New Note, Take New
   Photo/Photos, Edit Current Treatment Plan) restyled to match the redesign
   language. These live in .ph2-tp-card, not .ph2-panels-zone, so they never
   picked up the .row-plan/.no-records/.form-control rules already applied
   to the tile panels above (~20884-20913); same idea, applied here.
   .row-plan-desc.m0 (not the bare .row-plan-desc used for the plan-header
   row at the top of the card) is the table/list data-row variant. Pink
   circular +Notes/+£/+photo/+S toggles (.notes_button/.pay_button/
   .editz_button), the photo-upload pill buttons (.open_camera_btn/
   .manual_upload_btn/.upload_btn/.load_photos*) and the round purple delete
   X (.delete_btn) are untouched legacy/custom identity, not bare Bootstrap;
   the selectors below only catch the bare .btn-primary submits. */
/* The legacy pink .section_title band (#f6dafe, admin.css ~1135) has been
   chased scope-by-scope (panels zone, both slots, tp container) and keeps
   surfacing in unscoped corners (booking area, bulk wizard, ...). Kill it
   PAGE-WIDE: no context on the redesign wants it. */
.ph2-page .section_title { background: none; }
.ph2-page .section_title h2,
.ph2-page .section_title h3 {
    font-size: 15px;
    font-weight: 800;
    color: #1c1f2e;
    background: none;
    padding: 0;
    margin: 12px 0 8px;
    text-align: left;
    line-height: normal;
}

/* Legacy .row-plan carries background:#aac5e6 (admin.css ~1139); kill it
   page-wide here. The .ph2-tp-card header rule below re-applies its own
   grey — same specificity, later in source, so it still wins inside cards. */
.ph2-page .ph2-tp-container .row-plan {
    background: transparent;
}
.ph2-page .ph2-tp-card .row-plan {
    background: #f1f3f8;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 6px;
}
.ph2-page .ph2-tp-card .row-plan-desc.m0 {
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.08);
    border-radius: 10px;
    margin-top: 6px;
    padding: 8px 6px;
}
.ph2-page .ph2-tp-card .no-records {
    background: #f7f8fb;
    color: #6b7280;
    border-radius: 10px;
    padding: 14px;
    margin: 6px 0 0;
    font-weight: 600;
    text-align: center;
}
.ph2-page .ph2-tp-card input[type="submit"][name="send"],
.ph2-page .ph2-tp-card .btn-primary.btn-block {
    background: #2f6bea;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    color: #fff;
}
.ph2-page .ph2-tp-card input[type="submit"][name="send"]:hover,
.ph2-page .ph2-tp-card .btn-primary.btn-block:hover {
    background: #2558c4;
}
.ph2-page .ph2-tp-card .form-control {
    border-radius: 10px;
    border-color: rgba(28, 31, 46, 0.15);
    box-shadow: none;
}

/* Owner request 2026-08-11 (parity round 2): a real side-by-side diff
   against the approved reference panels (#xpand_add_note, #xpand_finance_link)
   found the grey shell itself already matched (bg/radius/padding fixed above),
   but several LEGACY blocks rendered inside these six sub-panels never got
   the "white rounded sub-card, inset from the shell" treatment the reference
   panels use everywhere (Finance's .finance_link_card/.finance_link_history_row,
   Notes' .ph2-note-item.ph2-tl-card): they kept their pre-redesign flush,
   square-cornered white fills instead, which is what read as "paddings and
   white background missing" next to the tile panels. Fixed below, one legacy
   class at a time. */

/* Record New Payment's amount/type/date sit in a plain .row.m0 (float-based
   Bootstrap columns, not a bespoke flex row like Finance's), and the column
   flattening rule above (23085-23091, needed so nothing overhangs the shell)
   zeroed ALL column gutters - so the three fields touched with no gap at all.
   Re-add a small right-hand gutter on every column but the last (mirrors how
   Bootstrap's own gutter works, just narrower) so fields read as separate
   pills again. Also covers Edit Current Treatment Plan's price/date/status
   row and any multi-select row in Commissions. */
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .row.m0 > [class*="col-xs-"],
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .row.m0 > [class*="col-xs-"],
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .row.m0 > [class*="col-xs-"] {
    padding-right: 10px;
}
.ph2-page .ph2-tp-card [id^="xpand_more_payments_"] .row.m0 > [class*="col-xs-"]:last-child,
.ph2-page .ph2-tp-card [id^="xpand_more_commissions_"] .row.m0 > [class*="col-xs-"]:last-child,
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .row.m0 > [class*="col-xs-"]:last-child {
    padding-right: 0;
}
/* Edit Current Treatment Plan's top row (Change Price/Date/Active Status/
   Price per Session) is legacy .area_total (admin.css ~1832): white bg but
   0 border-radius and a hard 5px grey border-bottom, flush against this
   panel's rounded 16px shell - read as a squared-off strip glued to the
   shell's edges rather than an inset card like the row-plan-desc rows
   above. Round it, swap the heavy divider for the same subtle border every
   other white sub-card on this page uses, and give it breathing room off
   the shell's top/bottom edges. */
.ph2-page .ph2-tp-card [id^="xpand_edit_the_actual_plan_"] .area_total {
    border: 1px solid rgba(28, 31, 46, 0.08);
    border-radius: 12px;
    margin: 4px 0 14px;
}
/* Photos/Exion "Take New Photo" upload form (.upload_form_camera) and the
   "Photos" loader strip below it (.photos_container) are legacy full-bleed
   white fills (admin.css ~2404-2407: background only, no radius/padding/
   margin), so - same defect as .area_total above - they touched the shell's
   rounded edges with square corners and no inset. Exion's loader strip uses
   a DIFFERENT class (.photos_container_exion) that never had the white
   background rule at all, so its Load Photos button sat directly on the
   grey shell with no card underneath it; give it the same white card here
   rather than editing the shared .photos_container rule site-wide. */
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"] .upload_form_camera,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"] .upload_form_camera {
    border-radius: 12px;
    padding: 14px 16px 18px;
    margin: 8px 0 12px;
}
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"] .photos_container,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"] .photos_container_exion {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 8px 0 0;
}
/* .diff_bor (admin.css ~2799) is a leftover pink divider between the upload
   form and the Photos list - the only pink accent anywhere on this page.
   Recolor to the same neutral hairline every other divider on this page
   uses instead of removing it outright (it still marks two visually
   distinct white cards apart). */
.ph2-page .ph2-tp-card [id^="xpand_more_photos_"] .diff_bor,
.ph2-page .ph2-tp-card [id^="xpand_more_exion_"] .diff_bor {
    border-top-color: rgba(28, 31, 46, 0.08);
}

/* ===== ph2: expanded booking panel, neutral restyle (prototype 631-644) ===== */
.ph2-page .bg_follow_up_cancel {
    background: #f7f8fb;
    border-radius: 0 0 10px 10px;
    padding: 12px 14px;
}
/* White inner card around the callback form */
.ph2-page .bg_follow_up_cancel > .row {
    background: #fff;
    border-radius: 10px;
    padding: 11px 13px;
    margin: 0;
}
.ph2-page .bg_follow_up_cancel .form-control {
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 9px;
    box-shadow: none;
    font-size: 13px;
}
.ph2-page .bg_follow_up_cancel textarea[name="note"] {
    height: auto;
    margin-bottom: 10px;
    background: #fff;
    color: #1c1f2e;
}
.ph2-page .bg_follow_up_cancel input[name="cancel_appt"] {
    background: #e54d4d;
    border: none;
    color: #fff;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 7px;
}
.ph2-page .bg_follow_up_cancel input[name="cancel_appt"]:hover { background: #d43c3c; }
/* No-show pair side by side (prototype 632-635) */
.ph2-page .ph2-noshow-col {
    float: left;
    width: 50%;
}
/* The panel that follows the floated pair must drop below it */
.ph2-page .ph2-noshow-col + .ph2-noshow-col + div { clear: both; }
@media all and (max-width: 480px) {
    .ph2-page .ph2-noshow-col { width: 100%; }
}
.ph2-page .ph2-noshow-btn {
    background: #2f6bea;
    border: none;
    color: #fff;
    border-radius: 9px;
    padding: 10px;
    height: auto;
    font-size: 12.5px;
    font-weight: 700;
    margin: 10px 0;
}
.ph2-page .ph2-noshow-btn:hover,
.ph2-page .ph2-noshow-btn:focus {
    background: #2558c4;
    color: #fff;
}

/* ===== ph2: Approve Booking in green (prototype 622) ===== */
.ph2-page .book-now-btn.approve_booking {
    background: #47ce78;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}
.ph2-page .book-now-btn.approve_booking:hover { background: #3bb968; }

/* ===== ph2: location switcher blends with the shell (kept: functional) =====
   Owner fix 18: relocated (view) above the month calendar in .ph2-cal-col,
   so its bottom margin now provides the gap before the calendar instead of
   a top margin after the Bookings section. It's nested inside a plain
   .ph2-cal-col div (no .container padding to cancel Bootstrap's row -15px
   pull like Owner fix 14's targets), so the container-fluid/row are
   flattened here to sit flush with the calendar's own left/right edge. */
.ph2-page .bookings-today { margin: 0 0 14px; }
.ph2-page .ph2-cal-col .container-fluid,
.ph2-page .ph2-cal-col .container-fluid .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.ph2-page .the_locations .change_to_location {
    background: #fff;
    color: #3d4254;
    border: 1px solid rgba(28, 31, 46, 0.12);
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}
.ph2-page .the_locations .change_to_location.active {
    background: #2f6bea;
    color: #fff;
    border-color: #2f6bea;
    box-shadow: none;
}
.ph2-page .the_locations .change_to_location:hover:not(.active) { background: #f7f8fb; }

/* T-198 (owner request): the bulk wizard's ph2 restyle (container, STEP
   headers, STEP 1 plan card, STEP 2 service blocks, add-service buttons,
   STEP 3 payment distribution, Preview button, rendered preview list) is
   removed below so the legacy .bulk-blocks design (base rules ~3152,
   ~7997, ~9632-10024) renders unchanged, same as patient_history.php.
   #bulk-results clear:both is kept - it's a float/BFC layout fix, not
   cosmetic (T-197; see comment). */
.ph2-page #bulk-results {
    clear: both;
}
/* Owner-specified wizard container look (refresh of the legacy grey box:
   lighter grey, pink border, rounder corners). Scoped to this page. */
.ph2-page .bulk-blocks {
    display: inline-block;
    background: #fafafa;
    padding-top: 10px;
    border: 1px solid #da2bed;
    width: 100%;
    border-radius: 15px;
}
/* Preview Appointments button: patient_history.php hardcodes this exact
   look as an inline style="width:100%; background:#da2bed;" on the <button>
   (legacy markup, left as-is there); reproduced here as CSS per this
   project's no-inline-styles rule so tmp_history.php's button (no inline
   style) renders identically - same #btn-primary shape/padding/font from
   Bootstrap, same pink fill. No :hover override: an inline style always
   outranks a :hover class rule, so the legacy button never changes color on
   hover either. */
/* Owner-specified button treatments for the wizard trigger + Preview. */
.ph2-page #preview-bulk {
    background: #da2bed;
    width: 100% !important;
    height: auto;
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(47, 107, 234, 0.35);
    margin-top: 0;
}
.ph2-page #show-bulk-ui {
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-top: 20px;
    background: #da2bed;
    width: 100% !important;
    height: auto;
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(47, 107, 234, 0.35);
}

/* ===== ph2: post-verification straggler fixes ===== */
/* In-panel Add New Note composer: panel metrics (prototype 233-234), not the
   Quick Note card metrics the shared classes carry. */
#xpand_add_note .ph2-note-input {
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 14px;
    background: #fff;
    min-height: 56px;
}
#xpand_add_note .ph2-note-submit {
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    box-shadow: none;
}
/* Amber lock banner injected per gated plan card (prototype 722-724). */
.ph2-page .ph2-record-banner {
    text-align: left;
    background: #fdf1dc;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    color: #8a5a09;
    margin-top: 8px;
}
/* EMsculpt consent, gallbladder questions: yes/no/unsure radios on one right-aligned row. */
.gallbladder-radio-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
/* ---------- ph2 quick actions (owner request 2026-08-12) ----------
   Shortcut buttons above the stats strip for the four most-used Menu tiles.
   Accent colors come from the shared .ph2-i-* custom properties; icons are
   copied in from the matching tile by tmp_history_shell.php. */
.ph2-page .ph2-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Cards space themselves with margin-bottom: 14px only; matching that
       (top 0 collapses into the card above's 14px) gives the row the same
       gap above and below. */
    margin: 0 0 14px;
}
.ph2-page .ph2-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e9ee;
    background: #fff;
    border-radius: 12px;
    padding: 7px 14px 7px 7px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.ph2-page .ph2-quick-btn:hover { background: #f6f8fa; }
.ph2-page .ph2-quick-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ph2-tint);
    color: var(--ph2-solid);
}
.ph2-page .ph2-quick-ico:empty { display: none; }

/* ---------- ph2 Signed Consent Forms strip (owner request 2026-08-12) ---------- */
.ph2-page .ph2-signed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ph2-page .ph2-signed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e4f5e9;
    color: #14532d;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.ph2-page .ph2-signed-chip:hover,
.ph2-page .ph2-signed-chip:focus {
    background: #d4eedd;
    color: #14532d;
    text-decoration: none;
}
.ph2-page .ph2-signed-tick { color: #17a34a; font-weight: 700; }
.ph2-page .ph2-signed-date { color: #4d7c5f; font-weight: 500; }
/* Signed chip + its PDF pill stay together on wrap (2026-09-15). */
.ph2-page .ph2-signed-item { display: inline-flex; align-items: stretch; gap: 3px; }
.ph2-page .ph2-signed-pdf {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #14532d;
    border: 1px solid #b7e3c5;
    border-radius: 999px;
    padding: 6px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.42857143;
    text-decoration: none;
    cursor: pointer;
}
.ph2-page .ph2-signed-pdf:hover,
.ph2-page .ph2-signed-pdf:focus { background: #e4f5e9; color: #14532d; text-decoration: none; }

/* ---------- Book Appointment service pills: uniform logo box, slightly
   larger (owner request 2026-08-12). ONLY the outside-plan booking picker -
   the Create Treatment Plan grid and the service radio strip keep their
   original rendering. The percentage width is deliberate: a definite px
   width becomes the img's min-content size and blows the grid's equal 1fr
   tracks apart (unequal pill widths); a percentage contributes 0 to track
   sizing, so every pill stays the same width and every logo gets the same
   box, with object-fit keeping each brand's aspect ratio. ---------- */
.ph2-page #outsideServiceGrid .logo-tile img {
    width: 100%;
    height: 17px;
    max-height: 17px;
    object-fit: contain;
}
/* Mobile bookings: tighter appointment date/time text in the Bookings cells
   (owner request 2026-08-12). */
@media all and (max-width: 760px) {
    .ph2-page .appt_cell .sessionDateTime {
        font-size: 12px;
        line-height: 2;
    }
}
/* Profile page: the body's grey (#979797) showed behind the restored admin
   menu above .ph2-page; match the redesign's ground instead (owner request
   2026-08-12). Two separate rules on purpose: a combined selector list
   would be dropped entirely by browsers without :has() support - the
   .ph2-body class (added by tmp_history_shell.php) is the fallback there. */
body:has(.ph2-page) { background: #eef0f6; }
body.ph2-body { background: #eef0f6; }
/* Today's already-passed rows in the Today & Upcoming table: amber left
   edge only (owner request 2026-08-12; the "earlier today" pill stays
   removed). The class is also used by ordering_create_tp.php's
   getLastAppointmentCell() to find today's appointments there. */
.ph2-page .appt_cell.ph2-today-earlier {
    box-shadow: inset 4px 0 0 #f0a52c;
}
/* Booking rows: the appointment-type pill (.serviceNames, e.g. "NEW / SD")
   is fixed 80x30 globally, so longer labels wrap and overflow the outline;
   let it hug its text instead (owner report 2026-08-13). */
.ph2-page .flex_date_duration .serviceNames {
    width: auto;
    min-width: 80px;
    height: auto;
    min-height: 30px;
    padding: 5px 12px;
    white-space: nowrap;
}
/* Mini availability map under the booking datepicker (owner request
   2026-08-13): one bar per room, colored segments = taken slots, rebuilt by
   tmp_history_shell from every .return-calendar load. */
.ph2-page .ph2-mini-avail { margin-top: 10px; }
.ph2-page .ph2-mini-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.ph2-page .ph2-mini-name {
    flex: 0 0 84px;
    font-size: 11px;
    font-weight: 600;
    color: #5a6072;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph2-page .ph2-mini-bar {
    position: relative;
    flex: 1;
    height: 16px;
    background: #e8ebf1;
    border-radius: 8px;
    overflow: hidden;
}
.ph2-page .ph2-mini-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 3px;
}
.ph2-page .ph2-mini-seg-t {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    line-height: 16px;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
/* Hour gridlines through each bar; segments paint above them (later in DOM). */
.ph2-page .ph2-mini-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(28, 31, 46, 0.14);
}
/* Hour numbers, aligned with the bars via the shared row flex layout. */
.ph2-page .ph2-mini-scale-row { margin-bottom: 0; }
.ph2-page .ph2-mini-scalebar {
    position: relative;
    flex: 1;
    height: 14px;
}
.ph2-page .ph2-mini-scale-h {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 9.5px;
    color: #9aa1b2;
}

/* ============================================================
   T-197 Patient callback: profile #callback section (cbk-*)
   (the admin/urgency Patient Callbacks rows moved to the admin/urgency block, T-227)
   ============================================================ */
.cbk-card {
    background: #fff;
    border: 1px solid #e8e6ee;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}
.cbk-title {
    font-size: 20px;
    font-weight: 700;
    color: #1c1a33;
}
.cbk-sub {
    font-size: 14px;
    color: #6b6980;
    margin-top: 4px;
}
.cbk-pending {
    margin-top: 14px;
    padding: 10px 14px;
    background: #fdf6ec;
    border: 1px solid #ecd9b8;
    border-radius: 8px;
    font-size: 14px;
    color: #6b5b3a;
}
.cbk-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.cbk-opt {
    border: 1px solid #d8d5e2;
    background: #fff;
    color: #1c1a33;
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 44px;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}
.cbk-options .cbk-opt:last-child {
    grid-column: 1 / -1;
}
.cbk-opt:hover {
    border-color: #b9955c;
}
.cbk-opt-active {
    background: #b9955c;
    border-color: #b9955c;
    color: #fff;
}
.cbk-specific {
    margin-top: 14px;
}
/* Calendar skin comes from the page's existing .v0-reschedule datepicker
   styling (the booking wizard look); this only sizes the wrapper. The
   .v0-reschedule rules include display styling only for datepicker/time-slot
   descendants, so the class is a safe pure-style hook here. */
.cbk-datepicker {
    max-width: 400px;
}
.cbk-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.cbk-time-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a8899;
}
.cbk-time {
    border: 1px solid #d8d5e2;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 16px;
    color: #1c1a33;
    background: #fff;
    min-width: 130px;
}
.cbk-submit {
    margin-top: 16px;
}
.cbk-msg {
    margin-top: 12px;
    font-size: 14px;
    color: #a94442;
}
.cbk-msg-ok {
    color: #2e7d4f;
}
@media (max-width: 640px) {
    .cbk-card {
        padding: 18px 16px;
        margin: 16px 0;
    }
    .cbk-title {
        font-size: 18px;
    }
    .cbk-options {
        grid-template-columns: 1fr;
    }
    .cbk-datepicker {
        max-width: 100%;
    }
    .cbk-time-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .cbk-time {
        width: 100%;
    }
    .cbk-submit {
        display: block;
        width: 100%;
        padding: 13px 16px;
        font-size: 16px;
    }
}
/* Quick Note: pin-on-create checkbox in the composer toolbar (owner
   request 2026-08-15). */
.ph2-page .ph2-note-pin-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #8a5a09;
    cursor: pointer;
    white-space: nowrap;
}
.ph2-page .ph2-note-pin-opt input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ============================================================
   T-198 /admin/missed_calls: dealt-with chips + after-call emails
   ============================================================ */
.mcx-sub {
    padding-top: 6px;
    padding-bottom: 4px;
}
.mcx-chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    color: #fff;
    margin: 2px 6px 2px 0;
}
.mcx-chip--ok {
    background: #2e7d4f;
    border-color: #2e7d4f;
    font-weight: 700;
    letter-spacing: 1px;
}
.mcx-chip--none {
    opacity: 0.75;
}
.mcx-expand {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
}
.mcx-expand:hover {
    background: rgba(255, 255, 255, 0.15);
}
.mcx-details {
    margin: 6px 0 2px;
}
.mcx-detail-row {
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 6px 6px 0;
    padding: 4px 10px;
    margin: 3px 0;
    font-size: 12.5px;
    color: #fff;
}
.mcx-detail-ago {
    font-weight: 700;
    opacity: 0.85;
}
.mcx-email-status {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    opacity: 0.75;
    margin: 2px 0 2px 4px;
}
.mcx-emails {
    margin-top: 6px;
}
.mcx-email-note {
    font-size: 12px;
    color: #fff;
    opacity: 0.85;
}
.mcx-email-item {
    background: #fff;
    color: #1c1a33;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    font-size: 13px;
}
.mcx-email-subject {
    font-weight: 700;
}
.mcx-email-date {
    color: #6b6980;
    font-size: 12px;
    margin-left: 8px;
}
.mcx-email-snippet {
    color: #4c4a5e;
    margin-top: 3px;
}
.mcx-email-open {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    text-decoration: underline;
}

/* ===== T-200 v2 Service Performance (svp-) — mobile-first ===== */

/* Palette custom properties: single source of truth, read by JS via
   getComputedStyle() so every chart/CSS color comes from the same hex.
   Validated: node validate_palette.js "#2a78d6,#eb6834,#1baf7a,#eda100"
   --mode light --surface "#ffffff" -> all adjacent-pair/CVD checks PASS;
   the aqua/yellow slots WARN on contrast vs white, covered by the table
   twins + direct bar labels every chart already carries. */
.svp-page {
    --svp-slot1: #2a78d6;
    --svp-slot2: #eb6834;
    --svp-slot3: #1baf7a;
    --svp-slot4: #eda100;
    --svp-grid: #e1e0d9;
    --svp-tick: #898781;
    --svp-ink-secondary: #52514e;
    --svp-ink-primary: #0b0b0b;
    --svp-ink-good: #006300;
    --svp-ink-bad: #d03b3b;
    --svp-surface: #ffffff;
    --svp-accent: var(--svp-slot1);

    background: #f1f5f9;
    min-height: 100vh;
    padding: 16px 12px 48px;
}
@media (min-width: 768px) {
    .svp-page { padding: 24px 16px 60px; }
}
.svp-container { max-width: 1400px; margin: 0 auto; }

/* ---- Section A: header ---- */
.svp-header-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.svp-title { margin: 0 0 4px; font-size: 21px; color: var(--svp-ink-primary); }
.svp-subtitle { margin: 0; color: var(--svp-ink-secondary); font-size: 13px; }
.svp-actions { text-align: right; }
.svp-refresh-link { display: inline-block; font-size: 13px; color: var(--svp-accent); text-decoration: none; font-weight: 600; }
.svp-refresh-link:hover { text-decoration: underline; }
.svp-cache-line { margin: 4px 0 0; font-size: 12px; color: var(--svp-tick); }
.svp-spend-note { margin: 2px 0 0; font-size: 12px; color: #b45309; font-weight: 600; }

@media (min-width: 768px) {
    .svp-header-row { margin-bottom: 24px; }
    .svp-title { font-size: 26px; }
    .svp-subtitle { font-size: 14px; }
}

.svp-empty-state { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 30px; text-align: center; color: var(--svp-ink-secondary); }

.svp-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 14px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
}
.svp-section-title { margin: 0 0 12px; font-size: 15.5px; color: var(--svp-ink-primary); }
.svp-detail-name { color: var(--svp-ink-secondary); font-weight: 500; font-size: 13px; }

@media (min-width: 768px) {
    .svp-section { padding: 20px 22px 26px; margin-bottom: 26px; }
    .svp-section-title { font-size: 17px; }
    .svp-detail-name { font-size: 14px; }
}

/* ---- Section B: controls card (services / metric / trend range) ---- */
.svp-controls {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 14px 6px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
}
.svp-controls-group { margin-bottom: 12px; }
.svp-controls-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--svp-tick);
    margin-bottom: 6px;
}

.svp-chip-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}
.svp-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--svp-ink-secondary);
    cursor: pointer;
}
.svp-chip:hover { background: #e2e8f0; }
.svp-chip:focus-visible { outline: 2px solid var(--svp-accent); outline-offset: 1px; }
.svp-chip--active { background: var(--svp-accent); border-color: var(--svp-accent); color: #fff; }

@media (min-width: 768px) {
    .svp-controls { padding: 18px 20px 10px; margin-bottom: 24px; }
    .svp-chip { padding: 7px 16px; font-size: 13px; }
}

/* ---- Section C: KPI tiles ---- */
.svp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.svp-kpi-tile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 12px 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    min-width: 0;
}
.svp-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--svp-tick); margin-bottom: 6px; }
.svp-kpi-value { font-size: 22px; font-weight: 700; color: var(--svp-ink-primary); line-height: 1.15; word-break: break-word; }
.svp-kpi-sub { margin-top: 4px; font-size: 12px; color: var(--svp-ink-secondary); }
.svp-kpi-delta { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--svp-tick); }
.svp-kpi-delta--up { color: var(--svp-ink-good); }
.svp-kpi-delta--down { color: var(--svp-ink-bad); }
.svp-kpi-delta--flat { color: var(--svp-tick); }

@media (min-width: 768px) {
    .svp-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
    .svp-kpi-tile { padding: 16px 16px 18px; }
    .svp-kpi-value { font-size: 26px; }
}

/* ---- Sections D/E/F: chart cards ---- */
.svp-chart-card { position: relative; }
.svp-chart-wrap { position: relative; width: 100%; height: 260px; }
.svp-chart-note { margin: 10px 0 0; font-size: 12px; color: var(--svp-tick); font-style: italic; }

@media (min-width: 768px) {
    .svp-chart-wrap { height: 340px; }
}

/* ---- Section G: metric basis caption ---- */
.svp-metric-basis { margin: 0 0 18px; font-size: 12.5px; color: var(--svp-tick); }
@media (min-width: 768px) {
    .svp-metric-basis { margin-bottom: 24px; }
}

/* ---- Section H: collapsible detail sections ---- */
.svp-collapse {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    overflow: hidden;
}
.svp-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 14px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--svp-ink-primary);
    text-align: left;
    cursor: pointer;
}
.svp-collapse-header:hover { background: #f8fafc; }
.svp-collapse-header:focus-visible { outline: 2px solid var(--svp-accent); outline-offset: -2px; }
.svp-collapse-title { flex: 1 1 auto; }
.svp-collapse-chevron { flex: 0 0 auto; color: var(--svp-tick); font-size: 12px; transition: transform .18s ease; margin-left: 10px; }
.svp-collapse-header[aria-expanded="true"] .svp-collapse-chevron { transform: rotate(180deg); }
.svp-collapse-panel { padding: 0 14px 14px; }
.svp-collapse-panel[hidden] { display: none !important; }
.svp-collapse-panel .svp-section,
.svp-collapse-panel .svp-table-wrap:first-child { margin-top: 2px; }
.svp-collapse-panel > .svp-table-wrap,
.svp-collapse-panel > .svp-section:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .svp-collapse-header { padding: 16px 20px; font-size: 15.5px; }
    .svp-collapse-panel { padding: 0 20px 20px; }
}

/* ---- shared table styles (content-identical to v1) ---- */
.svp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.svp-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--svp-ink-secondary);
    padding: 8px 10px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.svp-table td { padding: 10px; border-bottom: 1px solid #eef2f7; font-size: 13.5px; color: var(--svp-ink-primary); white-space: nowrap; }
.svp-table tr:last-child td { border-bottom: 0; }
.svp-table tr:hover td { background: #f8fafc; }
.svp-right { text-align: right; }
.svp-svc-name { font-weight: 600; }
.svp-pct { color: var(--svp-ink-secondary); font-size: 12px; }
.svp-na { color: #cbd5e1; font-style: italic; }

.svp-svc-row { cursor: pointer; }
.svp-svc-row:focus { outline: 2px solid var(--svp-accent); outline-offset: -2px; }

.svp-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    white-space: nowrap;
}
.svp-badge--maturing { background: #fef3c7; color: #92400e; }
.svp-badge--partial { background: #dbeafe; color: #1d4ed8; }

.svp-caveat { margin: 14px 0 0; font-size: 12.5px; color: var(--svp-tick); font-style: italic; }
.svp-note { margin: 14px 0 0; font-size: 12.5px; color: var(--svp-tick); }

.svp-detail[hidden] { display: none !important; }

/* Card-table layout: base (mobile) is stacked key/value rows; the real
   table only appears once there is room for it, at >=768px. */
.svp-cardtable-wrap { overflow-x: visible; }
.svp-cardtable { min-width: 0; }
.svp-cardtable > thead { display: none; }
.svp-cardtable,
.svp-cardtable > tbody,
.svp-cardtable > tbody > tr,
.svp-cardtable > tbody > tr > td { display: block; width: 100%; }
.svp-cardtable > tbody > tr {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: #fff;
}
.svp-cardtable > tbody > tr > td {
    border: 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
    white-space: normal;
}
.svp-cardtable > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--svp-ink-secondary);
    text-align: left;
}

@media (min-width: 768px) {
    .svp-cardtable-wrap { overflow-x: auto; }
    .svp-cardtable { min-width: 640px; }
    .svp-cardtable > thead { display: table-header-group; }
    /* Explicit values instead of `display: revert` (Chrome 84+/Safari 15.4+/
       Firefox 67+ only) so older embedded browsers/WebViews still get a real
       table at desktop width instead of falling back to inline. */
    .svp-cardtable { display: table; width: auto; }
    .svp-cardtable > tbody { display: table-row-group; width: auto; }
    .svp-cardtable > tbody > tr { display: table-row; width: auto; }
    .svp-cardtable > tbody > tr > td { display: table-cell; width: auto; }
    .svp-cardtable > tbody > tr {
        border: 0;
        border-bottom: 1px solid #eef2f7;
        margin-bottom: 0;
        padding: 0;
        background: transparent;
    }
    .svp-cardtable > tbody > tr > td {
        padding: 10px;
        display: table-cell;
        text-align: right;
        white-space: nowrap;
    }
    .svp-cardtable > tbody > tr > td[data-label]::before { content: none; }
}

/* ===== Lead response scorecard (rsc-) ===== */
/* Mobile-first (base = 375px); min-width overrides below. Card sits above
   the Lead Tracker on /admin/new (admin-only, own kill switch). */

.rsc {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 16px;
}

/* ---- Bucket colors: single source of truth for both the bar segments
   (fill) and the legend swatches (background). Ordinal blue ramp, darkest =
   fastest; waiting = neutral; never = status red. ---- */
.rsc-seg--lt1h    { fill: #1c5cab; background: #1c5cab; }
.rsc-seg--h1_5    { fill: #2a78d6; background: #2a78d6; }
.rsc-seg--h5_24   { fill: #5598e7; background: #5598e7; }
.rsc-seg--gt24    { fill: #86b6ef; background: #86b6ef; }
.rsc-seg--waiting { fill: #c3c2b7; background: #c3c2b7; }
.rsc-seg--never   { fill: #d03b3b; background: #d03b3b; }

/* ---- Cash-group colors: single source of truth for the cash bar segments
   (fill) and the cash legend swatches (background). ---- */
.rsc-cseg--this_called    { fill: #1c5cab; background: #1c5cab; }
.rsc-cseg--earlier_called { fill: #5598e7; background: #5598e7; }
.rsc-cseg--this_not_called    { fill: #d03b3b; background: #d03b3b; }
.rsc-cseg--earlier_not_called { fill: #ec835a; background: #ec835a; }
.rsc-cseg--no_lead        { fill: #c3c2b7; background: #c3c2b7; }

/* ---- Header ---- */
.rsc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.rsc-header__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}
.rsc-tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #888;
    background: #f4f4f6;
    padding: 3px 8px;
    border-radius: 10px;
}

/* ---- Headline: big lt1h % + two money facts ---- */
.rsc-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    margin: 12px 0 16px;
}
.rsc-headline__stat { flex: 0 0 auto; }
.rsc-headline__pct {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
}
.rsc-headline__caption {
    font-size: 11.5px;
    color: #888;
    margin-top: 4px;
    white-space: nowrap;
}
.rsc-money {
    flex: 1 1 170px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
.rsc-money__item {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}
.rsc-money__eur {
    font-size: 11.5px;
    color: #888;
}

/* ---- Speed bar (inline SVG, one <rect> per non-empty bucket) ---- */
.rsc-bar {
    display: block;
    width: 100%;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f1ee;
    margin: 0 0 10px;
}

/* ---- Cash line: one-sentence "where the money came from" summary,
   used both under the headline bar and inside each month's cash block ---- */
.rsc-cash-line {
    font-size: 13px;
    color: #52514e;
    margin: 10px 0 0;
}

/* ---- Cash sub-block: heading + sentence + cash bar + four rows, one per
   month inside the Details panel ---- */
.rsc-cash {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #d5d3cc;
}
.rsc-cash__title,
.rsc-sub__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #898781;
    margin: 0 0 4px;
}
.rsc-sub__caption {
    font-size: 11.5px;
    color: #898781;
    margin: 0 0 8px;
}
/* ---- Legend rows: 2 lines on mobile, 6-column grid at >=768px ---- */
.rsc-rows { display: flex; flex-direction: column; }
.rsc-row {
    padding: 9px 0;
    border-bottom: 1px solid #eee;
}
.rsc-month .rsc-row { border-bottom-color: #dedcd6; }
.rsc-month .rsc-row:last-child { border-bottom: 0; }
.rsc-row:last-child { border-bottom: 0; }
.rsc-row__line1 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rsc-row__line2 {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    padding-left: 18px;
}
.rsc-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.rsc-row__label {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}
.rsc-row__leads {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}
.rsc-row__stat {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

/* ---- Previous-months toggle + panel ---- */
.rsc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
}
.rsc-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid #1a1a1a;
    flex-shrink: 0;
}
.rsc-toggle__icon svg { display: block; }
.rsc-toggle__icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
.rsc-toggle[aria-expanded="true"] .rsc-toggle__v { display: none; }

.rsc-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.rsc-details[hidden] { display: none; }

.rsc-month {
    background: #f4f4f1;
    border: 1px solid #dedcd6;
    border-radius: 10px;
    padding: 12px 12px 14px;
    margin-bottom: 14px;
}
.rsc-month:last-child { margin-bottom: 0; }
.rsc-month__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid #d5d3cc;
}
.rsc-month__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.rsc-best-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: #13b981;
    padding: 2px 8px;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .rsc { padding: 20px 22px 22px; margin-bottom: 22px; }
    .rsc-header__title { font-size: 20px; }
    .rsc-month { padding: 16px 18px 18px; }
    .rsc-headline__pct { font-size: 52px; }
    .rsc-headline__caption { font-size: 12.5px; }
    .rsc-money__item { font-size: 14px; }

    .rsc-row {
        display: grid;
        grid-template-columns: 20px 1.6fr 1fr 1fr;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
    }
    .rsc-row__line1,
    .rsc-row__line2 { display: contents; }
    .rsc-row__leads,
    .rsc-row__stat { text-align: right; }
}

/* T-207 A2: inline notice when a staff member books a patient away from their home clinic */
.ph2-clinic-notice { margin-top: 10px; padding: 12px 14px; border: 1px solid #f0c36d; border-radius: 8px; background: #fff8e6; color: #6b4e00; font-size: 13px; text-align: left; }
.ph2-clinic-notice[hidden] { display: none; }
.ph2-clinic-notice-text { margin-bottom: 10px; }
.ph2-clinic-notice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph2-clinic-notice-actions .btn { border-radius: 6px; }
.ph2-clinic-notice-switch[hidden] { display: none; }
/* T-207: "Booked at the wrong clinic?" line on the appointment update forms (same notice box) */
.ph2-wrong-clinic { margin-top: 8px; }
.ph2-wrong-clinic-label { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: normal; cursor: pointer; }
.ph2-wrong-clinic-check { margin: 3px 0 0; flex: 0 0 auto; }
.ph2-wrong-clinic--booking { margin: 0 0 10px; }
.ph2-wrong-clinic[hidden] { display: none; }

/* T-207 C: clinic label on plans and bookings, shown only when a patient's plans span more
   than one clinic. Same flag badge as the appointment requests (.loc-badge + .loc-flag,
   owner 2026-09-13); on a booking row it sits on the logo line, centred, never stretched. */
.clinic-chip { white-space: nowrap; line-height: 1.4; }
.flex_date_duration .clinic-chip { align-self: center; margin-left: auto; }
/* With a clinic badge on the logo line, the appointment-type pill (NEW, NEW / SD, ...) drops to
   its own line under the logo (owner 2026-09-13). Only rows that carry a badge change, so a
   one-clinic patient's rows keep today's single-line layout. */
.flex_date_duration:has(.clinic-chip) { flex-wrap: wrap; }
.flex_date_duration:has(.clinic-chip)::before { content: ''; order: 1; flex-basis: 100%; height: 0; }
.flex_date_duration:has(.clinic-chip) .serviceNames { order: 2; margin-top: 6px; }
/* Appointment Requests panel on the staff page (owner 2026-09-13): the PENDING + flag badge sits on
   the logo line and the NEW pill drops under the logo, like the booking rows above. */
#xpand_appointment_requests .approve_booking_cell .flex_date_duration:has(.appt-pending-badge) { flex-wrap: wrap; }
#xpand_appointment_requests .approve_booking_cell .flex_date_duration:has(.appt-pending-badge)::before { content: ''; order: 1; flex-basis: 100%; height: 0; }
#xpand_appointment_requests .approve_booking_cell .flex_date_duration:has(.appt-pending-badge) .serviceNames { order: 2; margin-top: 6px; }
#xpand_appointment_requests .approve_booking_cell .flex_date_duration:has(.appt-pending-badge) .appt-pending-badge { order: 0; margin-left: auto; align-self: center; }
/* Plan cards keep the small plain chip beside the date caption (no flag, no logo-line rules). */
.clinic-chip--plain { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: #eef2f7; color: #3b4a5c; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; line-height: 16px; vertical-align: middle; }
.clinic-chip--plain-25527 { background: #e6f4ea; color: #1f6b3a; }
.clinic-chip--plain-25528 { background: #fdeee6; color: #8a3b0f; }
.clinic-chip--plain-25529 { background: #ede9fb; color: #4b3a8a; }

/* T-207 E: profile self-booking clinic chooser (only when the patient's plans span more than one clinic) */
.profile-clinic-chooser { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; margin: 0 15px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.profile-clinic-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.profile-clinic-btn { flex: 1 1 calc(50% - 10px); min-width: 140px; padding: 16px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #1e293b; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.profile-clinic-btn:hover { border-color: #94a3b8; }
.profile-clinic-btn.selected { border-color: #2f6bea; background: #eef3fd; color: #1d4ed8; }
.profile-clinic-chosen { margin-top: 12px; font-size: 13px; color: #475569; }
.profile-clinic-chosen[hidden] { display: none; }
.profile-clinic-chosen .profile-clinic-change { padding: 0 6px; font-size: 13px; vertical-align: baseline; }
.profile-clinic-chooser.is-chosen .profile-clinic-buttons { display: none; }
.profile-clinic-chooser:not(.is-chosen) ~ .profile-step-tabs, .profile-clinic-chooser:not(.is-chosen) ~ .profile-step { display: none; }

/* T-211 + T-228 (2026-10-16): admin/mails, phone first. Rows, reading view, Done,
   Undo and Dealt with come from the shared uep kit (see the Patient Emails block). */
.mails-page {
    padding-top: 16px;
    padding-bottom: 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #111827;
}
.mails-page [hidden] { display: none !important; }
.mails-head { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 12px; }
.mails-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; color: #111827; }
.mails-refresh {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.mails-refresh:hover { border-color: #9ca3af; color: #111827; }
.mails-note { margin: 0 0 12px; color: #6b7280; font-size: 14px; }
.mails-note--empty { color: #b45309; }
.mails-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.mails-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mails-chip {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.mails-chip:hover,
.mails-chip:focus { color: #111827; border-color: #9ca3af; text-decoration: none; }
.mails-chip.is-active { padding: 0 18px; background: #2563eb; border-color: #2563eb; color: #fff; }
.mails-chip--off { background: transparent; color: #6b7280; border-style: dashed; cursor: default; white-space: normal; height: auto; min-height: 44px; }
.mails-chip--off:hover { color: #6b7280; border-color: #d1d5db; }
.mails-chip-connect { align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: #2563eb; text-decoration: underline; }
.mails-tabs { display: flex; gap: 4px; padding: 4px; background: #e5e7eb; border-radius: 12px; }
.mails-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 9px;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.mails-tab:hover,
.mails-tab:focus { color: #111827; text-decoration: none; }
.mails-tab.is-active { background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.14); color: #111827; font-weight: 700; }
.mails-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.mails-status { margin-bottom: 10px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; overflow: hidden; }
.mails-stale-notice {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #b45309;
    text-align: left;
    cursor: pointer;
}
.mails-stale-notice:hover { color: #92400e; text-decoration: underline; }
.mails-more__note { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: #4b5563; }
.mails-list .uep-more-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.mails-list .uep-more-slot:empty { display: none; }
.loc-badge--0 { background: #64748b; }
@media (min-width: 768px) {
    .mails-page { padding-top: 28px; }
    .mails-title { font-size: 28px; line-height: 36px; }
    .mails-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .mails-tabs { width: 400px; }
    .mails-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 8px; }
    .mails-list .uep-group-label { padding: 6px 12px 0; }
    .mails-list .uep-more-slot .uep-load-more { max-width: 320px; }
}

/* T-228 (2026-10-16): All Communication on the patient page (acm). Pill tabs,
   rows "subject / from -> to / date", unread = bold + blue dot, the e-mail as a
   sandboxed auto-height document, Compose per the approved artboard. The reply
   box, buttons and attachments reuse the uep classes above. */
#xpand_communication .acm,
#xpand_communication .acm * { box-sizing: border-box; }
.acm [hidden] { display: none !important; }
.acm {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #111827;
}
.acm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.acm-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: #374151;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.acm-tab:hover { border-color: #9ca3af; color: #111827; }
.acm-tab.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.acm-tab:focus-visible,
.acm-item__head:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.acm-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.acm-tab.is-active .acm-tab__count { background: #fff; color: #1d4ed8; }
.acm-note { margin: 0; padding: 16px 4px; font-size: 15px; color: #6b7280; }
.acm-note--error { color: #b91c1c; }
.acm-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.acm-item { background: #fff; }
.acm-item + .acm-item { border-top: 1px solid #e5e7eb; }
.acm-item__head {
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 12px 14px 12px 12px;
    background: #fff;
    border: 0;
    margin: 0;
    font: inherit;
    color: #111827;
    text-align: left;
    cursor: pointer;
}
.acm-item__head:hover,
.acm-item.is-open .acm-item__head { background: #f9fafb; }
.acm-item__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: #2563eb; }
.acm-item__dot--off { background: transparent; }
.acm-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acm-item__subject {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
    color: #374151;
    overflow-wrap: anywhere;
}
.acm-item.is-unread .acm-item__subject { font-weight: 700; color: #111827; }
/* A message the clinic sent, shown inside the Inbox list: grey Sent tag after the subject */
.acm-item__top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.acm-item__top .acm-item__subject { flex: 1; min-width: 0; }
.acm-tag {
    flex-shrink: 0;
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
}
.acm-item__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
.acm-item__who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4b5563; }
.acm-item__date { flex-shrink: 0; color: #4b5563; }
.acm-item.is-unread .acm-item__who { font-weight: 600; color: #374151; }
.acm-item.is-unread .acm-item__date { font-weight: 700; color: #1d4ed8; }
.acm-item__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 16px;
    border-top: 1px solid #e5e7eb;
}
.acm-item__body .acm-reply { padding: 14px 0 4px; border-top: 0; }
.acm-item__body .uep-doc { margin-top: 2px; }
.acm-item__body > .acm-doc:first-child { margin-top: 14px; } /* no reply box above (sent rows, Sent tab) */
.acm-item__body .uep-quoted-btn { align-self: flex-start; margin-top: 0; }
.acm-item__body .uep-atts { margin-top: 0; }
.acm-more { padding-top: 12px; }
.acm .attachment-list:empty { display: none; }
.acm .attachment-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    height: 36px;
    margin: 0 6px 6px 0;
    padding: 0 2px 0 12px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 0;
    font-size: 14px;
    color: #111827;
}
.acm .attachment-tag__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acm .attachment-tag__remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b5563;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.acm-pane--whatsapp { position: relative; }

/* Compose */
.acm-compose { display: flex; flex-direction: column; gap: 16px; }
.acm-field { display: flex; flex-direction: column; gap: 6px; }
.acm-label { display: block; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #374151; }
.acm-to {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 8px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 10px;
}
.acm-to__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111827;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.acm-to__chip svg { flex-shrink: 0; }
.acm-to__name { overflow: hidden; text-overflow: ellipsis; }
.acm-select { position: relative; }
.acm-select > svg { position: absolute; right: 14px; top: 15px; pointer-events: none; color: #374151; }
.acm-select__control,
.acm-input,
.acm-textarea {
    display: block;
    width: 100%;
    margin: 0;
    font: inherit;
    font-size: 16px;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
}
.acm-select__control {
    -webkit-appearance: none;
    appearance: none;
    height: 48px;
    padding: 0 44px 0 14px;
    cursor: pointer;
    text-overflow: ellipsis;
}
.acm-input { height: 48px; padding: 0 14px; }
.acm-textarea { min-height: 218px; padding: 12px 14px; line-height: 24px; resize: vertical; }
.acm-select__control:focus,
.acm-input:focus,
.acm-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.acm-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #111827;
    cursor: pointer;
}
.acm-check input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: #2563eb; cursor: pointer; }
.acm .acm-compose__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 4px 0 0; }
.acm .acm-compose__actions .uep-btn,
.acm .acm-compose__send { width: 100%; }
.acm .acm-compose__actions .compose-panel__attach-tp-btn {
    flex: none;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.acm .acm-compose__actions .compose-panel__attach-tp-btn.active { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.acm-compose__status { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.acm-compose__status.is-error { color: #b91c1c; }
.acm-compose__status.is-ok { color: #15803d; }
@media (min-width: 768px) {
    .acm .acm-compose__actions { flex-direction: row; flex-wrap: wrap; }
    .acm .acm-compose__actions .uep-btn,
    .acm .acm-compose__actions .compose-panel__attach-tp-btn { width: auto; }
    .acm .acm-compose__send { width: auto; align-self: flex-start; min-width: 200px; }
}

/* -------------------------------------------------------------------------
 * T-212: lead e-mail reply band — a loud full-width band under the
 * phone/WhatsApp/SMS row on a lead card (admin/new/row-lead.php), shown
 * only when the lead has replied by e-mail. Deliberately high-contrast
 * ("a line crossing over the row" — owner 2026-09-15), 44px+ tap target.
 * ------------------------------------------------------------------------- */
.lead-reply-band {
    display: block;
    width: 100%;
    margin: 10px 0;
    background: #fff7e0;
    border: 1px solid #e0a721;
    border-left: 6px solid #e0a721;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.lead-reply-band--unread {
    background: #fff0d6;
    border-color: #d97706;
    border-left-color: #d97706;
    animation: leadReplyPulse 1.8s ease-in-out infinite;
}
@keyframes leadReplyPulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(217,119,6,.15); }
    50%      { box-shadow: 0 0 0 4px rgba(217,119,6,.18); }
}
.lead-reply-band__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
}
.lead-reply-band__icon { font-size: 18px; color: #b45309; }
.lead-reply-band__label { font-weight: 700; color: #92400e; font-size: 13px; white-space: nowrap; }
.lead-reply-band__date { color: #7c5a1a; font-size: 12px; white-space: nowrap; }
.lead-reply-band__clinic {
    background: #e0a721;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.lead-reply-band__count {
    background: #92400e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.lead-reply-band__snippet {
    flex: 1 1 220px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #57330a;
    font-size: 13px;
}
.lead-reply-band__toggle {
    min-height: 32px;
    padding: 4px 14px;
    border: none;
    border-radius: 16px;
    background: #92400e;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.lead-reply-band__toggle:hover { background: #7c3a0d; }
.lead-reply-body { display: none; padding: 0 12px 12px; }
.lead-reply-body--active { display: block; }
.lead-reply-body-loading, .lead-reply-body-error { padding: 10px 2px; color: #7c5a1a; font-size: 13px; }
.lead-reply-body-error { color: #b91c1c; }
.lead-reply-body-item { border-top: 1px solid #f0d9a8; padding-top: 8px; margin-top: 8px; }
.lead-reply-body-item:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.lead-reply-body-meta { font-size: 12px; color: #7c5a1a; margin-bottom: 4px; }
.lead-reply-body-frame { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; min-height: 60px; }
/* T-228: quoted part behind "Show quoted text" (button look shared with .uep-quoted-btn) */
.lead-reply-doc[hidden] { display: none; }
.lead-reply-doc .lead-reply-body-frame { display: block; }
.lead-reply-quoted-btn { margin-top: 10px; }
.lead-reply-doc--quoted { margin-top: 10px; }

@media all and (max-width: 767px) {
    .lead-reply-band__row { padding: 10px 10px; }
    .lead-reply-band__snippet { flex-basis: 100%; white-space: normal; }
}

/* ===== Quote follow-up (/admin/quote_followup, owner 2026-09-28) ===== */
.qf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.qf-month-form {
  margin: 0;
}
.qf-month.form-control {
  width: auto;
  display: inline-block;
}
.qf-bar__stat {
  font-size: 14px;
}
.qf-template {
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: #155e91;
}
.qf-template__toggle {
  cursor: pointer;
  font-weight: 600;
}
.qf-template__help {
  font-size: 12px;
  margin: 8px 0;
}
.qf-template__text {
  margin-bottom: 8px;
}
.qf-template__status {
  margin-left: 10px;
  font-size: 13px;
}
.qf-row .alert {
  padding: 12px 15px;
}
.qf-treatments {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  font-size: 15px;
}
.qf-treatments__price {
  font-weight: 700;
  margin-left: 6px;
}
.qf-offer {
  font-size: 14px;
  margin-bottom: 4px;
}
.qf-status {
  font-size: 13px;
}
.qf-status__todo {
  color: #dc2626;
  font-weight: 700;
}
.qf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.qf-tap.is-busy {
  opacity: 0.6;
}
.qf-nophone {
  color: #dc2626;
  font-weight: 600;
  align-self: center;
}
.qf-counts {
  text-align: right;
  font-size: 13px;
  margin-top: 8px;
}
.qf-counts__n {
  font-weight: 700;
}
.qf-preview,
.qf-history {
  margin-top: 6px;
  font-size: 13px;
}
.qf-preview summary,
.qf-history summary {
  cursor: pointer;
  text-align: right;
}
.qf-preview__text {
  background: #f3f4f6;
  color: #111827;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0 0;
}
.qf-history__list {
  padding-left: 18px;
  margin: 6px 0 0;
}
@media (max-width: 767px) {
  .qf-actions {
    justify-content: flex-start;
    margin-top: 8px;
  }
  .qf-counts,
  .qf-preview summary,
  .qf-history summary {
    text-align: left;
  }
}
.qf-discount {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
  font-size: 14px;
}
.qf-discount__label {
  margin: 0;
  font-weight: 600;
}
.qf-discount__input.form-control {
  width: 80px;
  height: 30px;
  padding: 4px 8px;
}
.qf-discount__save.btn {
  padding: 4px 10px;
}
.qf-discount__note {
  font-size: 12px;
}

/* ==========================================================================
   Patient photos: before/after comparison (owner 2026-09-28)
   Inline panel (replaces the old comparison modal) with Before on the left
   and After on the right, both columns kept side by side on phones too.
   Chips reuse the booking chip lavender/violet (#cdbdff / #4c1d95 / #8b5cf6).
   Markup: footer_scripts/photo_compare.php
   ========================================================================== */
.ph-photo-day-meta {
  font-size: 9px;
  text-align: left;
}
.phc-compare {
  display: none;
  background: #f6f3ff;
  border: 1px solid rgba(28, 31, 46, 0.08);
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0 14px;
}
.phc-compare.is-open {
  display: block;
}
.phc-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.phc-compare-title {
  font-weight: 600;
  font-size: 15px;
  color: #1c1f2e;
}
.phc-swap {
  border: 1px solid #cdbdff;
  background: #fff;
  color: #4c1d95;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
}
.phc-swap:disabled {
  opacity: 0.4;
}
.phc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.phc-slot {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.phc-slot-label {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #6b7280;
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 6px;
}
.phc-slot--after .phc-slot-label {
  background: #8b5cf6;
}
.phc-slot-link {
  display: block;
  background: #1c1f2e;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.phc-slot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.phc-slot-empty {
  display: none;
  aspect-ratio: 3 / 4;
  border: 2px dashed #cdbdff;
  border-radius: 10px;
  color: #4c1d95;
  font-size: 13px;
  text-align: center;
  padding: 12px;
  align-items: center;
  justify-content: center;
}
.phc-slot.is-empty .phc-slot-link {
  display: none;
}
.phc-slot.is-empty .phc-slot-empty {
  display: flex;
}
.phc-slot-caption {
  font-size: 12px;
  color: #4b5063;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.phc-day {
  margin-bottom: 14px;
}
.phc-day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(28, 31, 46, 0.08);
  margin-bottom: 8px;
}
.phc-day-date {
  font-weight: 600;
  color: #1c1f2e;
}
.phc-day-count {
  font-size: 12px;
  color: #6b7280;
}
.phc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.photo-item.phc-item {
  width: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(28, 31, 46, 0.08);
  border-radius: 10px;
  background: #fff;
}
.phc-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}
.phc-meta {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 6px;
}
.phc-chips {
  display: flex;
  gap: 4px;
}
.phc-chip {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-radius: 20px;
  padding: 5px 0;
  font-size: 12px;
  background: #cdbdff;
  color: #4c1d95;
}
.phc-chip--before[aria-pressed="true"] {
  background: #6b7280;
  color: #fff;
}
.phc-chip--after[aria-pressed="true"] {
  background: #8b5cf6;
  color: #fff;
}
.photo-item.phc-is-before {
  border-color: #6b7280;
  box-shadow: 0 0 0 2px #6b7280;
}
.photo-item.phc-is-after {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px #8b5cf6;
}
/* Owner-only Remove under a photo (2026-10-10): quiet text link, inline
   "Remove this photo? Yes / No", tap targets at least 36px high. */
.phc-remove {
  margin-top: 4px;
  text-align: center;
}
.phc-remove-btn,
.phc-remove-yes,
.phc-remove-no {
  min-height: 36px;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.phc-remove-btn {
  width: 100%;
  padding: 0 4px;
  color: #6b7280;
  text-decoration: underline;
}
.phc-remove-btn:hover,
.phc-remove-btn:focus {
  color: #b91c1c;
}
.phc-remove-ask {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.phc-remove.is-asking .phc-remove-btn {
  display: none;
}
.phc-remove.is-asking .phc-remove-ask {
  display: flex;
}
.phc-remove-q {
  flex: 1 1 100%;
  font-size: 12px;
  color: #b91c1c;
}
.phc-remove-yes,
.phc-remove-no {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  padding: 0 8px;
}
.phc-remove-yes {
  background: #b91c1c;
  color: #fff;
}
.phc-remove-no {
  background: #f3f4f6;
  color: #374151;
}
.phc-remove-yes:disabled,
.phc-remove-no:disabled {
  opacity: 0.6;
}
.phc-remove-msg {
  font-size: 11px;
  color: #b91c1c;
}
.phc-remove-msg:empty {
  display: none;
}

/* Clinic Schedule: holiday year box */
.clinic-schedule__holiday-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
}
.clinic-schedule__holiday-panel h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: #495057;
}
.clinic-schedule__holiday-note {
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 10px 0;
}
.clinic-schedule__holiday-table {
    margin-bottom: 8px;
    background: #fff;
}
.clinic-schedule__holiday-table td,
.clinic-schedule__holiday-table th {
    vertical-align: middle !important;
    white-space: nowrap;
}
.clinic-schedule__holiday-input {
    display: inline-block;
    width: 64px;
}
.clinic-schedule__holiday-left {
    font-weight: 700;
    font-size: 15px;
    color: #2e7d32;
}
.clinic-schedule__holiday-left--over {
    color: #c62828;
}

/* Sites page (/admin/sites): websites grouped by clinic */
.sites-group {
    margin-bottom: 24px;
}
.sites-group__title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
}
.sites-group__count {
    color: #888;
    font-size: 13px;
    font-weight: normal;
}
.sites-group__list {
    list-style: none;
    padding-left: 0;
    columns: 2;
}
.sites-group__list li {
    padding: 4px 0;
}
@media (max-width: 767px) {
    .sites-group__list {
        columns: 1;
    }
}
.ph-brand-name {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
}

/* Cron health board (/admin/cron_health, batch 3 T-216) */
.ch-page {
    padding-top: 20px;
    padding-bottom: 40px;
}
.ch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.ch-table th,
.ch-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
}
.ch-table th {
    background: #f5f5f5;
}
.ch-ok {
    color: #2e7d32;
    font-weight: 700;
}
.ch-warn {
    color: #e65100;
    font-weight: 700;
}
.ch-bad {
    color: #c62828;
    font-weight: 700;
}
.ch-muted {
    color: #888;
}

/* Control room (/admin/control_room, phase 1, 2026-10-01) */
.cr-page {
    padding-top: 20px;
    padding-bottom: 60px;
}
.cr-muted {
    color: #888;
}
.cr-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-bottom: 16px;
}
.cr-nav a {
    margin-right: 18px;
    font-weight: 600;
}
.cr-section {
    margin-bottom: 36px;
    padding-top: 8px;
    scroll-margin-top: 70px; /* anchors land below the sticky section nav */
}
.cr-table-compact th,
.cr-table-compact td {
    font-size: 13px;
    vertical-align: middle;
}

/* Control room, business pulse (phase 2, 2026-10-01) */
.cr-up {
    color: #2e7d32;
    font-weight: 700;
}
.cr-down {
    color: #c62828;
    font-weight: 700;
}

/* Control room, settings (phase 3a, 2026-10-01) */
.cr-set-toggle {
    cursor: pointer;
}
.cr-set-subpanel {
    margin-left: 10px;
}
.cr-set-location {
    margin: 14px 0 22px 10px;
    padding-left: 12px;
    border-left: 3px solid #e0e0e0;
}
.cr-set-dl dt {
    width: 340px;              /* long plain-language labels must not be cut with an ellipsis */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
    font-weight: 600;
}
.cr-set-dl dd {
    margin-left: 360px;
}
.cr-set-note {
    color: #999;
    font-size: 12px;
}
.cr-set-flag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 3px;
    background: #fdecea;
    color: #c62828;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.cr-set-change {
    float: right;
    font-weight: 600;
}
.cr-set-mismatch {
    color: #c62828;
    font-size: 12px;
    font-weight: 600;
}
.cr-set-inactive-row {
    color: #999;
}

/* Control room, machine limits per clinic (phase 5, 2026-10-02) */
.cr-mlimit-table {
    margin-bottom: 4px;
}
.cr-mlimit-table td {
    text-align: center;
    vertical-align: middle;
}
.cr-mlimit-table .cr-set-input {
    width: 70px;
    margin: 0 auto;
}
.cr-mlimit-note {
    display: block;
}

/* Control room, settings editing in place (phase 3b, 2026-10-02) */
.cr-hidden {
    display: none;
}
.cr-set-editable {
    display: block;
}
.cr-set-edit-btn,
.cr-set-save-btn,
.cr-set-cancel-btn {
    margin-right: 6px;
}
.cr-set-save-msg {
    font-size: 12px;
    margin-left: 4px;
}
.cr-set-save-msg--ok {
    color: #2e7d32;
    font-weight: 600;
}
.cr-set-save-msg--error {
    color: #c62828;
    font-weight: 600;
}
.cr-set-input {
    display: inline-block;
    width: auto;
    min-width: 120px;
    max-width: 260px;
}
input.cr-set-input-flag {
    width: auto;
    min-width: 0;
    vertical-align: middle;
}

/* Control room, switches move to settings (phase 4a, 2026-10-02) */
.cr-set-switches-table td {
    vertical-align: middle;
}
.cr-set-input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-width: 420px;
}
.cr-set-checklist-item {
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 0;
}
.cr-set-checklist-item input {
    margin-right: 4px;
}
.cr-set-source {
    margin-right: 8px;
}
.cr-set-reset-btn {
    font-size: 12px;
}

/* Control room: the Recompute now message (T-218, 2026-10-03). */
.cr-mk-message {
    margin-left: 8px;
    font-size: 13px;
}

/* Dropbox token page (/dropboxController/callback, batch 3 T-216) */
.dbx-token {
    max-width: 640px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.dbx-token__value {
    display: block;
    word-break: break-all;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 12px 0;
    font-family: monospace;
    font-size: 13px;
}
.dbx-token__warning {
    color: #c62828;
    font-weight: 700;
}

/* Keyword research (T-217; rebuilt 2026-10-15 to the owner's approved phone-first
   dark mockup: New research, Find a place, Terms, Results, History).
   Dark page under the light admin header, the same pattern as the Calling Queue:
   body.kwr-body comes through the header block's body_class hook. One centred
   column, max 720px. Colours are the mockup's exact values (tokens below).
   Bootstrap 3 defaults (headings, labels, links, buttons) are overridden inside
   .kwr-screen so nothing stock shows through. Views carry no inline styles:
   bar widths and chart heights are set by footer_scripts/keyword_research.php
   from data-pct. */
body.kwr-body { background: #0F1115; }
.kwr-screen {
    --kwr-bg: #0F1115;
    --kwr-card: #181B21;
    --kwr-raised: #20242C;
    --kwr-border: #2A2F38;
    --kwr-border-hover: #3A404B;
    --kwr-text: #F3F4F6;
    --kwr-muted: #A1A8B3;
    --kwr-chip-text: #D7DBE1;
    --kwr-accent: #60A5FA;
    --kwr-accent-hover: #93C5FD;
    --kwr-on-accent: #0B1220;
    --kwr-success: #34D399;
    --kwr-warning: #FBBF24;
    --kwr-danger: #F87171;
    --kwr-grey: #6B7280;
    --kwr-seg-on: #F3F4F6;
    --kwr-seg-on-text: #0F1115;
    background: var(--kwr-bg);
    color: var(--kwr-text);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Bootstrap overrides inside the page ---- */
.kwr-screen [hidden] { display: none !important; }
.kwr-screen h1,
.kwr-screen h2,
.kwr-screen p,
.kwr-screen ul { margin: 0; padding: 0; }
.kwr-screen ul { list-style: none; }
.kwr-screen h1,
.kwr-screen h2 { font-family: inherit; }
.kwr-screen a:focus,
.kwr-screen button:focus { outline: 2px solid var(--kwr-accent); outline-offset: 2px; }
.kwr-screen a:focus:not(:focus-visible),
.kwr-screen button:focus:not(:focus-visible) { outline: none; }
.kwr-ico,
.kwr-kw__chev,
.kwr-chip__x { display: block; flex-shrink: 0; }
.kwr-hidden-field { display: none !important; }
/* holds the one chevron <symbol> the results rows reference with <use> */
.kwr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* every tappable kwr element starts from a blank button (declared before the components) */
.kwr-seg__opt,
.kwr-chip,
.kwr-iconbtn,
.kwr-textbtn,
.kwr-pillbtn,
.kwr-btn,
.kwr-row,
.kwr-kw__head,
.kwr-placecard__main,
.kwr-search--fake {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* visually hidden, still focusable and read out (checkboxes, radios, input labels) */
.kwr-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* ---- layout: one centred column; room at the bottom for the fixed bar ---- */
.kwr-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kwr-wrap--results { padding: 8px 16px 140px; gap: 16px; }
.kwr-main { display: flex; flex-direction: column; gap: 24px; padding-bottom: 108px; }
.kwr-head { display: flex; flex-direction: column; gap: 16px; }
.kwr-tab,
.kwr-form { display: flex; flex-direction: column; gap: 24px; }
.kwr-form { margin: 0; }
.kwr-section { display: flex; flex-direction: column; gap: 8px; }
.kwr-section__head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.kwr-section__count { flex: 1; font-size: 13px; font-weight: 500; color: var(--kwr-muted); }

/* ---- type ---- */
.kwr-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--kwr-text); }
.kwr-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.3;
    color: var(--kwr-muted);
}
.kwr-label--warn { color: var(--kwr-warning); }
.kwr-meta { font-size: 13px; color: var(--kwr-muted); }
.kwr-meta--warn { color: var(--kwr-warning); }
.kwr-will { font-size: 14px; color: var(--kwr-muted); overflow-wrap: anywhere; }
.kwr-nowrap { white-space: nowrap; }

/* ---- segmented control (tabs, language, mode, sort): 44px segments in a raised track ---- */
.kwr-seg { display: flex; background: var(--kwr-raised); border-radius: 12px; padding: 4px; }
.kwr-seg__opt {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--kwr-muted);
    text-align: center;
    white-space: nowrap;
}
.kwr-seg__opt[aria-selected="true"],
.kwr-seg__opt[aria-pressed="true"] { background: var(--kwr-seg-on); color: var(--kwr-seg-on-text); }
.kwr-seg__face {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.kwr-sr:checked + .kwr-seg__face { background: var(--kwr-seg-on); color: var(--kwr-seg-on-text); }
.kwr-sr:focus + .kwr-seg__face { box-shadow: 0 0 0 2px var(--kwr-accent); }
.kwr-sr:focus:not(:focus-visible) + .kwr-seg__face { box-shadow: none; }

/* ---- buttons ---- */
.kwr-btn,
.kwr-btn:hover,
.kwr-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.kwr-btn--primary,
.kwr-btn--primary:hover,
.kwr-btn--primary:focus { background: var(--kwr-accent); color: var(--kwr-on-accent); border: 0; }
.kwr-btn--primary:hover { background: var(--kwr-accent-hover); }
.kwr-btn--primary:disabled,
.kwr-btn--primary:disabled:hover { background: var(--kwr-accent); opacity: .4; cursor: not-allowed; }
.kwr-btn--secondary,
.kwr-btn--secondary:hover,
.kwr-btn--secondary:focus {
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    border-radius: 14px;
    color: var(--kwr-text);
    font-size: 16px;
    font-weight: 600;
}
.kwr-btn--secondary:hover { border-color: var(--kwr-border-hover); }
.kwr-btn--secondary:disabled { opacity: .6; cursor: default; }
.kwr-btn--sm,
.kwr-btn--sm:hover,
.kwr-btn--sm:focus { height: 48px; }
.kwr-btn.is-active { border-color: var(--kwr-accent); }
.kwr-textbtn,
.kwr-textbtn:hover,
.kwr-textbtn:focus {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kwr-accent);
    text-decoration: none;
    white-space: nowrap;
}
.kwr-textbtn:hover { color: var(--kwr-accent-hover); }
.kwr-pillbtn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    color: var(--kwr-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.kwr-pillbtn:hover { border-color: var(--kwr-border-hover); }
.kwr-iconbtn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kwr-muted);
}
.kwr-iconbtn:hover { color: var(--kwr-text); }

/* ---- tags and status dots ---- */
.kwr-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--kwr-raised);
    color: var(--kwr-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.kwr-tag--on-raised { background: var(--kwr-border); }
.kwr-tag--fresh { background: rgba(52, 211, 153, .14); color: var(--kwr-success); }
.kwr-tag--seed {
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 2px;
}
.kwr-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--kwr-grey); }
.kwr-dot--low { background: var(--kwr-success); }
.kwr-dot--medium { background: var(--kwr-warning); }
.kwr-dot--high { background: var(--kwr-danger); }

/* ---- cards and card lists (rows of 56px with 1px dividers) ---- */
.kwr-card { background: var(--kwr-card); border: 1px solid var(--kwr-border); border-radius: 16px; padding: 16px; }
.kwr-card--danger {
    background: rgba(248, 113, 113, .08);
    border-color: rgba(248, 113, 113, .45);
    color: var(--kwr-danger);
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.kwr-card--warn { border-color: rgba(251, 191, 36, .45); }
.kwr-card--empty { color: var(--kwr-muted); font-size: 15px; overflow-wrap: anywhere; }
.kwr-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--kwr-warning); }
.kwr-list { background: var(--kwr-card); border: 1px solid var(--kwr-border); border-radius: 16px; overflow: hidden; }
.kwr-list > li + li { border-top: 1px solid var(--kwr-border); }
.kwr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    color: var(--kwr-text);
    text-align: left;
}
.kwr-row:hover,
.kwr-row.is-active { background: rgba(255, 255, 255, .03); }
.kwr-row.is-active { box-shadow: inset 2px 0 0 var(--kwr-accent); }
.kwr-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kwr-row__title { font-size: 16px; font-weight: 500; color: var(--kwr-text); overflow-wrap: anywhere; }
.kwr-row__sub { font-size: 13px; color: var(--kwr-muted); overflow-wrap: anywhere; }

/* ---- "Split into groups of 20" (Discover ideas over 20 seeds) ---- */
.kwr-split { display: flex; flex-direction: column; gap: 16px; }
.kwr-split__group { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kwr-split__label { font-size: 13px; font-weight: 600; color: var(--kwr-text); }
.kwr-split__words { font-size: 14px; color: var(--kwr-muted); overflow-wrap: anywhere; }

/* ---- place: selected card, search box, quick picks ---- */
.kwr-placecard {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    padding: 0 10px 0 14px;
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    border-radius: 14px;
}
.kwr-placecard__main {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--kwr-text);
    text-align: left;
}
.kwr-ico--pin { color: var(--kwr-accent); }
.kwr-placecard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kwr-placecard__name,
.kwr-placecard__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwr-placecard__name { font-size: 16px; font-weight: 600; color: var(--kwr-text); }
.kwr-placecard__sub { font-size: 13px; color: var(--kwr-muted); }
.kwr-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 0 4px 0 14px;
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    border-radius: 14px;
}
.kwr-search:focus-within { border-color: var(--kwr-accent); box-shadow: inset 0 0 0 1px var(--kwr-accent); }
.kwr-search--fake { padding-right: 14px; text-align: left; cursor: text; }
.kwr-ico--search { color: var(--kwr-muted); }
.kwr-search__input,
.kwr-search__input:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--kwr-text);
    font-size: 16px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}
.kwr-search__input::placeholder,
.kwr-search__placeholder { color: var(--kwr-muted); font-weight: 400; opacity: 1; }
.kwr-search__placeholder { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tall enough that the screen can scroll its title to the top under the admin header */
.kwr-place { display: flex; flex-direction: column; gap: 24px; min-height: 100vh; }
.kwr-place__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kwr-place__results { display: flex; flex-direction: column; gap: 24px; }
.kwr-place__results:empty { display: none; }

/* ---- chips: 44px pills; a ticked chip is accent with a check (quick picks, terms, own terms) ---- */
.kwr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kwr-chips--quick { margin-top: 4px; }
.kwr-addrow + .kwr-chips { margin-top: 4px; }
.kwr-chip { position: relative; display: inline-flex; max-width: 100%; }
.kwr-chip__face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    color: var(--kwr-chip-text);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.kwr-chip:hover .kwr-chip__face { border-color: var(--kwr-border-hover); }
.kwr-chip__check { display: none; flex-shrink: 0; }
.kwr-chip.is-on .kwr-chip__face,
.kwr-sr:checked + .kwr-chip__face {
    background: var(--kwr-accent);
    border-color: var(--kwr-accent);
    color: var(--kwr-on-accent);
    font-weight: 600;
}
.kwr-chip.is-on .kwr-chip__check,
.kwr-sr:checked + .kwr-chip__face .kwr-chip__check { display: block; }
.kwr-sr:focus + .kwr-chip__face { box-shadow: 0 0 0 2px var(--kwr-bg), 0 0 0 4px var(--kwr-accent); }
.kwr-sr:focus:not(:focus-visible) + .kwr-chip__face { box-shadow: none; }
.kwr-own-chip .kwr-chip__face { padding: 0 12px 0 14px; }
.kwr-chip__x { margin-left: 2px; }

/* ---- own terms ---- */
.kwr-addrow { display: flex; gap: 8px; }
.kwr-input,
.kwr-input:focus {
    flex: 1;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    background: var(--kwr-raised);
    border: 1px solid var(--kwr-border);
    border-radius: 14px;
    box-shadow: none;
    outline: none;
    color: var(--kwr-text);
    font-size: 16px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}
.kwr-input:focus { border-color: var(--kwr-accent); }
.kwr-input::placeholder { color: var(--kwr-muted); font-weight: 400; opacity: 1; }
.kwr-addrow__btn,
.kwr-addrow__btn:hover,
.kwr-addrow__btn:focus { flex: 0 0 auto; width: auto; padding: 0 20px; }

/* ---- sticky bottom bar: page background, summary line + primary button (or two buttons) ---- */
.kwr-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--kwr-bg);
    border-top: 1px solid var(--kwr-border);
    padding: 12px 16px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.kwr-bar__inner { max-width: 688px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.kwr-bar--two .kwr-bar__inner { flex-direction: row; gap: 12px; }
.kwr-bar--two .kwr-bar__inner > * { flex: 1 1 0; min-width: 0; }
.kwr-bar--two .kwr-btn--secondary { height: 56px; }
.kwr-bar__form { display: flex; margin: 0; }
.kwr-bar__summary { font-size: 13px; font-weight: 500; color: var(--kwr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- history ---- */
.kwr-hist { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; }
.kwr-hist__link,
.kwr-hist__link:hover,
.kwr-hist__link:focus {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    color: var(--kwr-text);
    text-decoration: none;
}
.kwr-hist__link:hover .kwr-hist__place { color: var(--kwr-accent-hover); }
.kwr-hist__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kwr-hist__place { min-width: 0; font-size: 16px; font-weight: 600; color: var(--kwr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwr-hist__time { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--kwr-muted); font-variant-numeric: tabular-nums; }
.kwr-hist__sub { font-size: 13px; color: var(--kwr-muted); overflow-wrap: anywhere; }
.kwr-hist__form { flex-shrink: 0; margin: 0; }
.kwr-show-older { align-self: flex-start; }

/* ---- results: header, summary card ---- */
.kwr-res-head { display: flex; flex-direction: column; gap: 2px; }
.kwr-back,
.kwr-back:hover,
.kwr-back:focus {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    margin-left: -6px;
    padding-right: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kwr-accent);
    text-decoration: none;
}
.kwr-back:hover { color: var(--kwr-accent-hover); }
.kwr-res-head__sub { font-size: 13px; font-weight: 500; color: var(--kwr-muted); }
.kwr-summary { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 6px; }
.kwr-summary .kwr-meta { font-weight: 500; }
.kwr-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kwr-headline__num { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--kwr-text); }
.kwr-summary__terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kwr-summary__count { font-size: 15px; font-weight: 500; color: var(--kwr-text); }
.kwr-summary__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.kwr-summary__actions .kwr-textbtn { padding: 0; }
.kwr-legend { font-size: 12px; color: var(--kwr-muted); }

/* ---- results: keyword rows (tap to open in place, one at a time) ---- */
.kwr-kw__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    color: var(--kwr-text);
    text-align: left;
}
.kwr-kw__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kwr-kw__name { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.kwr-kw__track { display: block; height: 6px; border-radius: 3px; background: var(--kwr-border); overflow: hidden; }
.kwr-kw__bar { display: block; width: 0; height: 6px; border-radius: 3px; background: var(--kwr-accent); }
.kwr-kw__side { flex-shrink: 0; min-width: 76px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kwr-kw__vol { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kwr-kw__comp { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--kwr-muted); white-space: nowrap; }
.kwr-kw__chev { color: var(--kwr-muted); }
.kwr-kw.is-open > .kwr-kw__head .kwr-kw__chev,
.kwr-zero__toggle[aria-expanded="true"] .kwr-kw__chev { transform: rotate(180deg); }
.kwr-kw__detail { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.kwr-chart { display: flex; flex-direction: column; gap: 4px; }
.kwr-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.kwr-chart__bar { flex: 1 1 0; height: 0; min-height: 2px; border-radius: 2px; background: var(--kwr-accent); }
.kwr-chart__months { display: flex; gap: 3px; font-size: 11px; font-weight: 500; color: var(--kwr-muted); }
.kwr-chart__months > span { flex: 1 1 0; text-align: center; }
.kwr-kw__stats { display: flex; flex-direction: column; gap: 4px; }
.kwr-kw__stats > p { font-size: 15px; font-weight: 500; color: var(--kwr-muted); }
.kwr-trend,
.kwr-kw__bid { font-weight: 700; color: var(--kwr-text); font-variant-numeric: tabular-nums; }
.kwr-trend--up { color: var(--kwr-success); }
.kwr-trend--down { color: var(--kwr-danger); }
.kwr-trend--na { color: var(--kwr-muted); }
.kwr-kw__actions { display: flex; gap: 12px; }
.kwr-kw__actions > .kwr-btn { flex: 1 1 0; min-width: 0; }
.kwr-zero__toggle .kwr-row__title { font-size: 15px; color: var(--kwr-muted); }
.kwr-zero__list { border-top: 1px solid var(--kwr-border); }
.kwr-zero__more { padding: 12px 16px 16px; border-top: 1px solid var(--kwr-border); }
.kwr-zero__list > li + li { border-top: 1px solid var(--kwr-border); }
/* Copy keyword fallback for older Safari: an off-screen textarea for execCommand('copy') */
.kwr-copy-buffer {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    pointer-events: none;
}


/* T-218 phase 4 (2026-10-03): Marketing Decisions definitions, cohort columns, 90-day decision numbers, spend source notes */
.mktg-crosslinks { margin: 0 0 15px; font-size: 13px; color: #888; }
.mktg-crosslinks a { color: #60a5fa; }
.mktg-source-note { margin: 0 0 12px; font-size: 12px; color: #888; }
.mktg-reconcile-note { color: #a3a3a3; border-top: 1px solid #333; padding-top: 10px; }
.mktg-decide-note { margin: 0 0 10px; font-size: 13px; color: #ccc; }
.mktg-th-decide { color: #22c55e; }
.mktg-th-cohort { color: #a78bfa; }
.mktg-cohort-cell .mktg-metric-value { color: #a78bfa; }
.mktg-cohort-empty { color: #555; }
.mktg-band { font-weight: 700; }
.mktg-band-scale { color: #22c55e; }
.mktg-band-maintain { color: #3b82f6; }
.mktg-band-optimize { color: #f59e0b; }
.mktg-band-reduce { color: #ef4444; }
.mktg-trends-sourcenote { margin: 0 0 12px; font-size: 12px; color: #888; }
.svp-spend-source { margin: 2px 0 0; font-size: 12px; color: #6b7280; }

/* Marketing Decisions: the Organic / SEO divider row (was an inline style) */
.mktg-organic-divider {
  padding: 6px 15px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  border-top: 2px solid #333;
  background: rgba(139, 92, 246, 0.05);
}

/* ==========================================================================
   Control room reading layer (redesign, 2026-10-03): /admin/control_room
   Design plan
   - Palette: ink #0b0b0b (text), ink-2 #52514e (secondary text, captions),
     muted #898781 (axis marks only), surface #ffffff, plane #f6f5f2 (tiles),
     hairline #e1e0d9, baseline grey #c3c2b7 / ghost #d3d2cb (comparison).
   - One accent: blue #2a78d6 = this period. Money bands are one hue in three
     steps: new #104281, existing patients' new plans #2a78d6, instalments
     #86b6ef. Deltas: good #2e7d32, bad #c62828. Status colours (critical
     #d03b3b, warning #fab219, good #0ca30c) only with an icon and a word.
   - Type: Inter, then the system sans. Hero 48px/600, tile value 28px/600,
     body 15px, captions 13px, labels 12px uppercase +0.06em. Proportional
     figures except table columns (tabular).
   - Spacing unit 8px (8/16/24/32/48). Radius 10px cards, 16px chips, 4px bar ends.
   - Hierarchy by size and space: one bordered card level (attention cards),
     tiles on a plane fill, sections separated by space and a hairline.
   - Light theme only. Motion: only the reduced-opacity hold while reloading.
   ========================================================================== */
.cr-rl {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: #0b0b0b;
    background: #ffffff;
}
.cr-rl p { margin: 0; }
:where(.cr-rl) details summary { font-weight: inherit; color: inherit; } /* undo the site-wide bold blue summary */
.cr-rl svg { overflow: visible; } /* Bootstrap's normalize clips every inline SVG (svg:not(:root)) */
.cr-rl #settings {
    /* The Settings section keeps the look it had before the redesign (Bootstrap defaults). */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
.cr-rl #settings p { margin: 0 0 10px; }

/* Header strip and period control */
.cr-head { padding: 8px 0 16px; }
.cr-head__top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cr-head__title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: #0b0b0b; }
.cr-head__place {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: #52514e; border: 1px solid #e1e0d9; border-radius: 16px; padding: 2px 10px;
}
.cr-head__meta { margin-top: 6px; font-size: 13px; color: #52514e; }
.cr-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px;
    border: 1px solid #c3c2b7; border-radius: 16px; background: #ffffff; color: #0b0b0b;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cr-btn:hover, .cr-btn:focus { border-color: #52514e; color: #0b0b0b; text-decoration: none; }
.cr-btn[disabled] { opacity: 0.45; cursor: default; }
.cr-btn--small { min-height: 26px; padding: 0 10px; font-size: 12px; margin-left: 6px; }
.cr-btn--primary { background: #0b0b0b; border-color: #0b0b0b; color: #ffffff; }
.cr-btn--primary:hover, .cr-btn--primary:focus { background: #2b2b2a; color: #ffffff; }
.cr-btn--link { border-color: transparent; color: #1c5cab; padding: 0 6px; }

.cr-period { margin-top: 16px; }
.cr-period__rows { display: flex; flex-direction: column; gap: 10px; }
.cr-chiprow { display: flex; align-items: center; gap: 12px; }
.cr-chiprow__label {
    flex: 0 0 128px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #52514e;
}
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 16px;
    border: 1px solid #e1e0d9; background: #ffffff; color: #0b0b0b; font: inherit; font-size: 14px;
    white-space: nowrap; cursor: pointer; text-decoration: none;
}
.cr-chip:hover, .cr-chip:focus { border-color: #898781; color: #0b0b0b; text-decoration: none; }
.cr-chip.is-on { background: #0b0b0b; border-color: #0b0b0b; color: #ffffff; font-weight: 600; }
.cr-chip--toggle.is-on { background: #e8f1fc; border-color: #2a78d6; color: #0b0b0b; }
.cr-chip--toggle.is-on::before { content: "\2713"; margin-right: 6px; font-weight: 700; color: #1c5cab; }
.cr-chip:focus-visible, .cr-seg__btn:focus-visible, .cr-mchip:focus-visible, .cr-btn:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-seg { display: inline-flex; border: 1px solid #e1e0d9; border-radius: 16px; overflow: hidden; }
.cr-seg__btn { padding: 5px 14px; font-size: 13px; color: #52514e; text-decoration: none; background: #ffffff; }
.cr-seg__btn + .cr-seg__btn { border-left: 1px solid #e1e0d9; }
.cr-seg__btn:hover, .cr-seg__btn:focus { color: #0b0b0b; text-decoration: none; }
.cr-seg__btn.is-on { background: #0b0b0b; color: #ffffff; font-weight: 600; }
.cr-period__caption { font-size: 13px; color: #52514e; }
.cr-period__msg { font-size: 13px; color: #c62828; margin-top: 6px; }
.cr-period__msg:empty { display: none; }

.cr-pick { margin: 4px 0 0 140px; padding: 16px; border: 1px solid #e1e0d9; border-radius: 10px; background: #fbfbf9; max-width: 560px; }
.cr-pick[hidden] { display: none; }
.cr-pick__help { font-size: 13px; color: #52514e; margin-bottom: 10px; }
.cr-pick__years { margin-bottom: 10px; }
.cr-chip--year.is-on { background: #0b0b0b; border-color: #0b0b0b; color: #ffffff; }
.cr-pick__months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cr-pick__months[hidden] { display: none; }
.cr-mchip {
    min-height: 36px; border: 1px solid #e1e0d9; border-radius: 8px; background: #ffffff; color: #0b0b0b;
    font: inherit; font-size: 14px; cursor: pointer;
}
.cr-mchip:hover { border-color: #898781; }
.cr-mchip[disabled] { color: #c3c2b7; background: #f6f5f2; cursor: not-allowed; }
.cr-mchip.is-in { background: #e8f1fc; border-color: #86b6ef; }
.cr-mchip.is-end { background: #0b0b0b; border-color: #0b0b0b; color: #ffffff; font-weight: 600; }
.cr-pick__chosen { margin-top: 10px; font-size: 14px; font-weight: 600; min-height: 20px; }
.cr-pick__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* In-page navigation */
.cr-rl .cr-nav {
    display: flex; gap: 20px; position: sticky; top: 0; z-index: 100; background: #ffffff;
    border-top: 1px solid #e1e0d9; border-bottom: 1px solid #e1e0d9; padding: 10px 0; margin: 0 0 8px;
}
.cr-rl .cr-nav a { margin: 0; font-size: 14px; font-weight: 600; color: #52514e; text-decoration: none; white-space: nowrap; }
.cr-rl .cr-nav a:hover, .cr-rl .cr-nav a:focus { color: #0b0b0b; }

/* Sections */
.cr-sec { padding-top: 32px; scroll-margin-top: 56px; }
.cr-sec + .cr-sec, .cr-scope > .cr-sec:first-child { border-top: 1px solid #e1e0d9; margin-top: 8px; }
.cr-sec__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-sec__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0b0b0b; }
.cr-sec__count { font-size: 14px; color: #52514e; }
.cr-sub { margin: 28px 0 4px; font-size: 17px; font-weight: 600; color: #0b0b0b; }
.cr-cap { font-size: 13px; color: #52514e; margin-bottom: 10px; }
.cr-note { font-size: 13px; color: #52514e; margin-top: 8px; }
.cr-empty { font-size: 14px; color: #52514e; padding: 12px 0; }
.cr-swap { transition: opacity 0.15s linear; }
.cr-rl.is-loading .cr-swap { opacity: 0.45; pointer-events: none; }

/* Icons and status */
.cr-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.cr-sev, .cr-status {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #0b0b0b;
    border-radius: 12px; padding: 2px 9px 2px 7px; white-space: nowrap;
}
.cr-sev--red { background: #fbeaea; }
.cr-sev--red .cr-icon { color: #d03b3b; }
.cr-sev--amber { background: #fdf3dc; }
.cr-sev--amber .cr-icon { color: #b07b00; }
.cr-status { background: #f6f5f2; font-weight: 500; white-space: normal; }
.cr-status--good .cr-icon { color: #0ca30c; }
.cr-status--warn { background: #fdf3dc; }
.cr-status--warn .cr-icon { color: #b07b00; }
.cr-status--bad { background: #fbeaea; }
.cr-status--bad .cr-icon { color: #d03b3b; }
.cr-status--info .cr-icon { color: #2a78d6; }
.cr-status--muted { color: #52514e; }
.cr-status--muted .cr-icon { color: #898781; }
.cr-who {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid #c3c2b7; border-radius: 10px; padding: 1px 8px; margin-right: 6px; color: #0b0b0b; vertical-align: 1px;
}

/* Deltas: the number takes the direction colour, the words stay in text colour */
.cr-delta { font-weight: 600; white-space: nowrap; cursor: default; }
.cr-delta--good { color: #2e7d32; }
.cr-delta--bad { color: #c62828; }
.cr-delta--flat, .cr-delta--neutral, .cr-delta--none { color: #52514e; }
.cr-delta[tabindex]:focus { outline: 2px solid #2a78d6; outline-offset: 2px; border-radius: 3px; }

/* Needs attention: cards */
.cr-allclear { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #0b0b0b; }
.cr-allclear .cr-icon { color: #0ca30c; }
.cr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.cr-js .cr-cards:not(.is-all) .cr-card--more { display: none; }
.cr-card {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; background: #ffffff;
    border: 1px solid #e1e0d9; border-left: 3px solid #fab219; border-radius: 10px;
}
.cr-card--red { border-left-color: #d03b3b; }
.cr-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-card__subject { font-size: 12px; color: #52514e; overflow-wrap: anywhere; }
.cr-card__headline { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: #0b0b0b; overflow-wrap: anywhere; }
.cr-card__numbers { font-size: 14px; color: #52514e; overflow-wrap: anywhere; }
.cr-card__todo { font-size: 14px; color: #0b0b0b; margin-top: auto; padding-top: 4px; overflow-wrap: anywhere; }
.cr-card__details { font-size: 13px; color: #52514e; }
.cr-card__lines { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #52514e; overflow-wrap: anywhere; }
.cr-card__lines li { margin-bottom: 4px; }
.cr-more { display: none; margin-top: 16px; }
.cr-js .cr-more { display: inline-flex; }

/* Card pictures */
.cr-vis { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.cr-vis__meter, .cr-vis__bar { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.cr-vis--hbars .cr-vis__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 48px; }
.cr-vis__label { color: #52514e; overflow-wrap: anywhere; line-height: 1.25; }
.cr-vis__value { text-align: right; font-weight: 600; color: #0b0b0b; white-space: nowrap; }
.cr-vis__svg { display: block; width: 100%; height: 10px; overflow: visible; }
.cr-vis__change { font-size: 13px; }
.cr-vis--count { flex-direction: row; align-items: center; gap: 8px; color: #52514e; }
.cr-vis--count .cr-icon { width: 22px; height: 22px; flex-basis: 22px; color: #52514e; }
.cr-vis__count { font-size: 24px; font-weight: 600; color: #0b0b0b; line-height: 1; }
.cr-vis__unit { font-size: 13px; }
.cr-vis--spark .cr-spark { height: 36px; }
.cr-vis__axis { display: flex; justify-content: space-between; font-size: 12px; color: #52514e; }
.cr-vis__base { font-size: 12px; color: #52514e; display: flex; align-items: center; gap: 6px; }

/* Shared SVG marks */
.cr-fill-accent rect { fill: #2a78d6; }
.cr-fill-grey rect { fill: #c3c2b7; }
.cr-fill-new rect { fill: #104281; }
.cr-fill-existing rect { fill: #2a78d6; }
.cr-fill-instal rect { fill: #86b6ef; }
svg rect.cr-gap { fill: #ffffff; }
.cr-meter { display: block; width: 100%; height: 8px; }
.cr-meter__track { fill: #cde2fb; }
.cr-meter__fill { fill: #2a78d6; }
.cr-spark { display: block; width: 100%; height: 32px; overflow: visible; margin-top: 6px; }
.cr-spark--empty { display: block; font-size: 12px; color: #898781; margin-top: 6px; height: auto; }
.cr-spark__line { fill: none; stroke: #a3a29c; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cr-spark__hl { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cr-spark__end { stroke: #2a78d6; stroke-width: 7; stroke-linecap: round; }
.cr-spark__dot { stroke: #a3a29c; stroke-width: 5; stroke-linecap: round; }
.cr-spark__base { stroke: #c3c2b7; stroke-width: 1.5; }

/* Legends */
.cr-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #52514e; }
.cr-legend--block { display: flex; margin: 4px 0 12px; }
.cr-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cr-legend__note { color: #52514e; }
.cr-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.cr-key--new { background: #104281; }
.cr-key--existing, .cr-key--accent { background: #2a78d6; }
.cr-key--instal { background: #86b6ef; }
.cr-key--ghost { background: #d3d2cb; }
.cr-key--thin { height: 4px; width: 16px; border-radius: 2px; background: #52514e; }
.cr-key--tick { width: 2px; height: 14px; border-radius: 0; background: #0b0b0b; }
.cr-key--tickgrey { width: 2px; height: 14px; border-radius: 0; background: #898781; }
.cr-key--line { width: 16px; height: 3px; border-radius: 2px; background: #2a78d6; }
.cr-key--line-base { width: 16px; height: 3px; border-radius: 2px; background: #a3a29c; }
.cr-key--dot { width: 10px; height: 10px; border-radius: 50%; background: #2a78d6; }

/* Money: hero, tiles, chart */
.cr-hero { margin-bottom: 24px; }
.cr-hero__label { font-size: 14px; color: #52514e; }
.cr-hero__value { font-size: 48px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; color: #0b0b0b; margin: 4px 0 8px; }
.cr-hero__deltas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.cr-hero__vs, .cr-hero__note { color: #52514e; }
.cr-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cr-tile { background: #f6f5f2; border-radius: 10px; padding: 14px 14px 10px; min-width: 0; }
.cr-tile__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #52514e; line-height: 1.3; min-height: 31px; }
.cr-tile__value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin-top: 6px; color: #0b0b0b; white-space: nowrap; }
.cr-tile__deltas { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.cr-tile__vs { color: #52514e; }
.cr-chart { margin: 28px 0 0; }
.cr-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.cr-chart__title { font-size: 17px; font-weight: 600; color: #0b0b0b; }
.cr-chart__box { position: relative; height: 290px; width: 100%; }
.cr-chart__box canvas { display: block; }
.cr-chart__sentence { margin-top: 14px; font-size: 15px; color: #0b0b0b; max-width: 860px; }

/* Table views: a table from 768px, one line per row with a tap below */
.cr-tv { margin-top: 12px; }
.cr-tv__toggle, .cr-disclose > summary, .cr-card__details > summary, .cr-facts__d > summary, .cr-ads__wd > summary {
    display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #1c5cab;
}
.cr-tv__toggle::-webkit-details-marker, .cr-disclose > summary::-webkit-details-marker, .cr-card__details > summary::-webkit-details-marker,
.cr-facts__d > summary::-webkit-details-marker, .cr-ads__wd > summary::-webkit-details-marker, .cr-fold__sum::-webkit-details-marker,
.cr-tv__list summary::-webkit-details-marker, .cr-ads--narrow summary::-webkit-details-marker { display: none; }
.cr-tv__toggle::before, .cr-disclose > summary::before, .cr-card__details > summary::before, .cr-facts__d > summary::before, .cr-ads__wd > summary::before {
    content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 2px;
}
details[open] > .cr-tv__toggle::before, .cr-disclose[open] > summary::before, .cr-card__details[open] > summary::before,
.cr-facts__d[open] > summary::before, .cr-ads__wd[open] > summary::before { transform: rotate(45deg); }
.cr-tv__wide { margin-top: 10px; }
.cr-tv__table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cr-tv__table th, .cr-tv__table td { padding: 7px 10px; border-bottom: 1px solid #e1e0d9; text-align: right; vertical-align: top; }
.cr-tv__table th:first-child, .cr-tv__table td:first-child { text-align: left; }
.cr-tv__table thead th { font-size: 12px; font-weight: 600; color: #52514e; border-bottom-color: #c3c2b7; }
.cr-tv__table tbody th { font-weight: 500; color: #0b0b0b; }
.cr-tv__tr--total th, .cr-tv__tr--total td { font-weight: 700; border-top: 2px solid #c3c2b7; }
.cr-tv__tr--base th, .cr-tv__tr--base td, .cr-tv__tr--match th, .cr-tv__tr--match td { color: #52514e; }
.cr-scope-note { margin-top: 8px; font-size: 13px; color: #0b0b0b; padding-left: 10px; border-left: 2px solid #c3c2b7; max-width: 860px; }
.cr-tv__table tr.cr-tv__tr--more td { text-align: left; font-size: 12px; color: #52514e; padding-top: 0; font-variant-numeric: normal; }
.cr-tv__table tr:has(+ .cr-tv__tr--more) th, .cr-tv__table tr:has(+ .cr-tv__tr--more) td { border-bottom: 0; }
.cr-tv__list { display: none; list-style: none; margin: 10px 0 0; padding: 0; }
.cr-tv--open > .cr-tv__wide { margin-top: 4px; }

/* Funnel */
.cr-funnel { list-style: none; margin: 0; padding: 0; }
.cr-fstep {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; align-items: center; gap: 16px;
    padding: 8px 0; border-bottom: 1px solid #f0efea;
}
.cr-fstep:focus { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-fstep__label { font-size: 15px; font-weight: 600; color: #0b0b0b; }
.cr-fstep__sub { display: block; font-size: 12px; font-weight: 400; color: #52514e; }
.cr-fbar { display: block; width: 100%; height: 22px; }
.cr-fstep--head { padding: 0 0 4px; border-bottom-color: #c3c2b7; font-size: 12px; font-weight: 600; color: #52514e; }
.cr-fstep--head .cr-fstep__nums { font-size: 12px; }
.cr-fstep--head .cr-fstep__value, .cr-fstep--head .cr-fstep__pct { font-weight: 600; color: #52514e; }
.cr-fstep__pct.is-over { color: #898781; }
.cr-fbar__base { fill: #52514e; }
.cr-fstep__nums { display: grid; grid-template-columns: 60px 44px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 15px; }
.cr-fstep__value { font-weight: 600; text-align: right; }
.cr-fstep__pct { color: #0b0b0b; text-align: right; }
.cr-fstep__base { color: #52514e; font-size: 13px; }
.cr-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cr-mini { background: #f6f5f2; border-radius: 10px; padding: 16px; min-width: 0; }
.cr-mini__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #0b0b0b; }
.cr-mini__text { font-size: 15px; color: #0b0b0b; }
.cr-mini__foot { margin-top: 8px; font-size: 13px; color: #52514e; }
.cr-costs { list-style: none; margin: 0; padding: 0; }
.cr-costs__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 10px; padding: 4px 0; font-size: 14px; align-items: baseline; }
.cr-costs__label { color: #52514e; }
.cr-costs__value { font-weight: 600; text-align: right; }
.cr-costs__row .cr-delta { text-align: right; }

/* Horizontal bar lists (campaigns, treatments) */
.cr-hbars { list-style: none; margin: 0; padding: 0; }
.cr-hbar {
    display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; align-items: center; gap: 16px;
    padding: 7px 0; border-bottom: 1px solid #f0efea;
}
.cr-hbar:focus { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-hbar__label { font-size: 14px; font-weight: 600; color: #0b0b0b; overflow-wrap: anywhere; line-height: 1.3; }
.cr-hbar__sub { display: block; font-size: 12px; font-weight: 400; color: #52514e; }
.cr-hbar__svg { display: block; width: 100%; height: 20px; }
.cr-hbar__svg--pair { height: 22px; }
.cr-tick { fill: #0b0b0b; }
.cr-hbar__text { font-size: 14px; color: #0b0b0b; }
.cr-hbar__vs { color: #52514e; }

/* Consultation room: dot on a 0-100% scale */
.cr-dots { list-style: none; margin: 0; padding: 0; }
.cr-dotrow, .cr-dots__scale {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 120px 240px; align-items: center; gap: 16px;
    padding: 7px 0; border-bottom: 1px solid #f0efea;
}
.cr-dots__scale { padding: 0 0 2px; border-bottom: 0; font-size: 12px; color: #52514e; }
.cr-dots__axis { display: flex; justify-content: space-between; }
.cr-dotrow:focus { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-dotrow__name { font-size: 14px; font-weight: 600; }
.cr-dotrow__n { display: block; font-size: 12px; font-weight: 400; color: #52514e; }
.cr-dotscale { display: block; width: 100%; height: 22px; overflow: visible; }
.cr-dotscale__track { stroke: #e1e0d9; stroke-width: 2; }
.cr-dotscale__own { stroke: #898781; stroke-width: 2; }
.cr-dotscale__dot { fill: #2a78d6; stroke: #ffffff; stroke-width: 2; }
.cr-dotrow__pct { font-size: 15px; font-weight: 600; }
.cr-dotrow__own { font-size: 13px; font-weight: 400; color: #52514e; }
.cr-dotrow__extra { font-size: 13px; color: #52514e; }
.cr-room__link { margin-top: 16px; font-size: 14px; }

/* Google Ads board */
.cr-ads { margin: 8px 0 0; }
.cr-ads--narrow { display: none; list-style: none; padding: 0; }
.cr-ads__row {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 1.3fr) 70px minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0efea; font-size: 14px;
}
.cr-ads__row--head { font-size: 12px; font-weight: 600; color: #52514e; border-bottom-color: #c3c2b7; padding-top: 0; }
.cr-ads__row.is-paused { color: #52514e; }
.cr-ads__name { font-weight: 600; overflow-wrap: anywhere; }
.cr-ads__sub { display: block; font-size: 12px; font-weight: 400; color: #52514e; }
.cr-ads__meter { display: flex; flex-direction: column; gap: 4px; }
.cr-ads__mtext { font-size: 12px; color: #52514e; }
.cr-ads__num { font-weight: 600; }
.cr-ads__cpa { display: flex; flex-direction: column; gap: 3px; }
.cr-ads__cparow { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 12px; }
.cr-ads__cpabar { display: block; width: 100%; height: 8px; overflow: visible; }
.cr-ads__waste { font-size: 14px; }
.cr-ads__wd .cr-card__lines { min-width: 220px; }
.cr-facts { margin: 16px 0 0; padding-left: 18px; font-size: 14px; color: #0b0b0b; }
.cr-facts li { margin-bottom: 6px; }
.cr-facts__d { margin-top: 2px; }

/* Business pulse */
.cr-pclinic { margin-bottom: 20px; }
.cr-pclinic__name { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.cr-ptiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cr-ptile { background: #f6f5f2; border-radius: 10px; padding: 12px; min-width: 0; }
.cr-ptile__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #52514e; }
.cr-ptile__label a { color: #52514e; text-decoration: underline; text-decoration-color: #c3c2b7; }
.cr-ptile__value { font-size: 24px; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.cr-ptile__delta { font-size: 12px; color: #52514e; margin-top: 2px; }
.cr-ptile__delta--good { color: #2e7d32; }
.cr-ptile__delta--bad { color: #c62828; }
.cr-ptile__full { font-size: 12px; color: #52514e; }
.cr-pquiet { font-size: 14px; color: #52514e; padding: 4px 0; }
.cr-disclose { margin-top: 16px; }
.cr-disclose__body { padding-top: 4px; }
.cr-defs { margin-top: 32px; }
.cr-defs__list { margin: 10px 0 0; max-width: 860px; }
.cr-defs__list dt { margin-top: 10px; font-size: 14px; font-weight: 600; }
.cr-defs__list dd { margin: 0; font-size: 14px; color: #52514e; }

/* Folded blocks: System health and Settings */
.cr-fold { border-top: 1px solid #e1e0d9; margin-top: 32px; padding-top: 4px; }
.cr-fold__sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 0; cursor: pointer; list-style: none; }
.cr-fold__sum::before {
    content: ""; width: 8px; height: 8px; border-right: 2px solid #52514e; border-bottom: 2px solid #52514e; transform: rotate(-45deg); margin-right: 2px;
}
.cr-fold[open] > .cr-fold__sum::before { transform: rotate(45deg); }
.cr-fold__title { font-size: 20px; font-weight: 600; color: #0b0b0b; }
.cr-fold__hint { font-size: 14px; font-weight: 400; color: #52514e; }
.cr-fold__body { padding-bottom: 16px; }
.cr-fold--settings > #settings > h2 { display: none; }
.cr-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cr-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 6px 0 0; font-size: 14px; }
.cr-kv dt { font-weight: 400; color: #52514e; }
.cr-kv dd { margin: 0; font-weight: 600; text-align: right; }

/* The hover/tap tip (one element, placed by the footer script) */
.cr-tipbox {
    position: fixed; z-index: 2000; max-width: 300px; padding: 8px 10px; background: #ffffff; color: #0b0b0b;
    border: 1px solid #e1e0d9; border-radius: 8px; box-shadow: 0 4px 16px rgba(11, 11, 11, 0.12);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; line-height: 1.4;
    pointer-events: none;
}
.cr-tipbox[hidden] { display: none; }
[data-tip] { cursor: default; }

@media (max-width: 1199px) {
    .cr-tiles, .cr-ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-hbar { grid-template-columns: 180px minmax(0, 1fr) 240px; }
    .cr-dotrow, .cr-dots__scale { grid-template-columns: 160px minmax(0, 1fr) 110px 200px; }
}
@media (max-width: 991px) {
    .cr-hbar, .cr-fstep { grid-template-columns: 160px minmax(0, 1fr) 200px; }
    .cr-ads__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 56px minmax(0, 1.1fr) minmax(0, 0.8fr); gap: 10px; }
    .cr-facts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .cr-head__title { font-size: 24px; }
    .cr-chiprow { flex-direction: column; align-items: stretch; gap: 6px; }
    .cr-chiprow__label { flex: none; }
    .cr-chiprow .cr-seg { align-self: flex-start; }
    .cr-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .cr-chips::-webkit-scrollbar { display: none; }
    .cr-pick__years { flex-wrap: wrap; overflow: visible; }
    .cr-pick { margin-left: 0; max-width: none; padding: 12px; }
    .cr-pick__months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cr-rl .cr-nav { gap: 4px 14px; flex-wrap: wrap; padding: 8px 0; }
    .cr-rl .cr-nav a { font-size: 13px; }
    .cr-rl .cr-nav::-webkit-scrollbar { display: none; }
    .cr-sec { padding-top: 24px; }
    .cr-sec__title { font-size: 20px; }
    .cr-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cr-hero__delta:not(.is-active) { display: none; }
    .cr-tiles, .cr-ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cr-tile { padding: 12px 12px 8px; }
    .cr-tile__value { font-size: 24px; }
    .cr-tile__delta:not(.is-active) { display: none; }
    .cr-chart__box { height: 210px; }
    .cr-tv__wide { display: none; }
    .cr-tv__list { display: block; }
    .cr-tv__list > li { border-bottom: 1px solid #e1e0d9; }
    .cr-tv__list summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 14px; }
    .cr-tv__name { min-width: 0; overflow-wrap: anywhere; color: #0b0b0b; }
    .cr-tv__key { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cr-tv__li--total .cr-tv__name, .cr-tv__li--total .cr-tv__key { font-weight: 700; }
    .cr-tv__li--base .cr-tv__name, .cr-tv__li--match .cr-tv__name { color: #52514e; }
    .cr-tv__dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0 0 10px; font-size: 13px; }
    .cr-tv__dl dt { font-weight: 400; color: #52514e; overflow-wrap: anywhere; }
    .cr-tv__dl dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
    .cr-fstep { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label value pct" "bar bar bar" "base base base"; gap: 4px 12px; }
    .cr-fstep--head { display: none; }
    .cr-fstep__label { grid-area: label; }
    .cr-fbar { grid-area: bar; }
    .cr-fstep__nums { display: contents; }
    .cr-fstep__value { grid-area: value; }
    .cr-fstep__pct { grid-area: pct; }
    .cr-fstep__base { grid-area: base; text-align: left; }
    .cr-minis { grid-template-columns: minmax(0, 1fr); }
    .cr-hbar { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .cr-dotrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "scale scale" "extra extra"; gap: 4px 12px; }
    .cr-dotrow__name { grid-area: name; }
    .cr-dotscale { grid-area: scale; }
    .cr-dotrow__pct { grid-area: pct; text-align: right; }
    .cr-dotrow__extra { grid-area: extra; }
    .cr-dots__scale { display: none; }
    .cr-ads--wide { display: none; }
    .cr-ads--narrow { display: block; }
    .cr-ads--narrow > li { border-bottom: 1px solid #e1e0d9; }
    .cr-ads--narrow summary { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; cursor: pointer; list-style: none; }
    .cr-ads--narrow .cr-status { align-self: flex-start; }
    .cr-ads__key { font-size: 13px; color: #52514e; }
    .cr-fstep { align-items: start; }
    .cr-ads--narrow > li.is-paused .cr-ads__name { color: #52514e; }
    .cr-fold__title { font-size: 18px; }
    .cr-kv { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .cr-swap { transition: none; }
}

/* Control room reading layer: Side by side (2026-10-03). The period in the accent, each comparison in its own grey
   (first #6f6e69, second #c3c2b7, then #a3a29c, #898781, identified by their order and the legend); split bars:
   ad websites #104281 / everything else #86b6ef on the period, dark / light grey on a comparison. */
.cr-sbs { margin-top: 4px; font-variant-numeric: tabular-nums; }
.cr-sbs__row { display: grid; align-items: center; gap: 4px 14px; padding: 6px 0; border-bottom: 1px solid #f0efea; font-size: 14px; }
.cr-sbs--b0 .cr-sbs__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 2fr); }
.cr-sbs--b1 .cr-sbs__row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.cr-sbs--b2 .cr-sbs__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.cr-sbs--b3 .cr-sbs__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) repeat(3, minmax(0, 0.95fr)) minmax(0, 1.1fr); }
.cr-sbs--b4 .cr-sbs__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) repeat(4, minmax(0, 0.9fr)) minmax(0, 1fr); }
.cr-sbs__row:focus { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-sbs__row--head { font-size: 12px; font-weight: 600; color: #52514e; border-bottom-color: #c3c2b7; padding-top: 0; align-items: end; }
.cr-sbs__label { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #0b0b0b; }
.cr-sbs__label .cr-key { margin-right: 6px; vertical-align: -1px; }
.cr-sbs__row--l1 .cr-sbs__label { padding-left: 18px; font-weight: 400; color: #52514e; font-size: 13px; }
.cr-sbs__hint { font-size: 12px; font-weight: 400; color: #52514e; }
.cr-sbs__cell { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.cr-sbs__row--head .cr-sbs__cell { font-variant-numeric: normal; }
.cr-sbs__v { font-weight: 600; white-space: nowrap; }
.cr-sbs__row--l1 .cr-sbs__v { font-weight: 500; }
.cr-sbs__pct { font-size: 12px; color: #898781; white-space: nowrap; }
.cr-sbs__note { font-weight: 400; }
.cr-sbs__match { display: block; font-size: 12px; color: #52514e; font-variant-numeric: normal; }
.cr-sbs__bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-sbs__bar { display: block; width: 100%; height: 6px; }
.cr-sbs__gsum { display: flex; align-items: center; gap: 8px; padding: 12px 0 6px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #0b0b0b; border-bottom: 1px solid #c3c2b7; }
.cr-sbs__gsum::-webkit-details-marker { display: none; }
.cr-sbs__gsum::before { content: ""; width: 7px; height: 7px; border-right: 2px solid #52514e; border-bottom: 2px solid #52514e; transform: rotate(-45deg); }
.cr-sbs__group[open] > .cr-sbs__gsum::before { transform: rotate(45deg); }
.cr-fill-sbs1 rect { fill: #6f6e69; }
.cr-fill-sbs2 rect { fill: #c3c2b7; }
.cr-fill-sbs3 rect { fill: #a3a29c; }
.cr-fill-sbs4 rect { fill: #898781; }
.cr-fill-greydark rect { fill: #6f6e69; }
.cr-fill-greylight rect { fill: #c9c8c1; }
.cr-key--sbs1 { background: #6f6e69; }
.cr-key--sbs2 { background: #c3c2b7; }
.cr-key--sbs3 { background: #a3a29c; }
.cr-key--sbs4 { background: #898781; }
@media (max-width: 767px) {
    /* One line per row: label, the period, the active comparison and its change; the bars under it, full width. */
    .cr-sbs .cr-sbs__row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; }
    .cr-sbs__row .cr-sbs__cell:not(.cr-sbs__cell--cur):not(.is-active) { display: none; }
    .cr-sbs__bars { grid-column: 1 / -1; }
    .cr-sbs__row--head .cr-sbs__bars { display: none; }
    .cr-sbs__bar--base:not(.is-active) { display: none; }
    .cr-sbs__legend:not(.is-active) { display: none; }
    .cr-sbs__row--l1 .cr-sbs__label { padding-left: 12px; }
    .cr-sbs__match { max-width: 140px; margin-left: auto; }
}

/* Control room reading layer: Google Ads wasted searches as a panel under the row, and chips (2026-10-04).
   The panel is visible without JavaScript; with it (.cr-js) it stays closed until the row's button opens it. */
.cr-tchip {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid #e1e0d9; border-radius: 16px;
    background: #ffffff; color: #0b0b0b; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere;
}
.cr-tchip--on { background: #e8f1fc; border-color: #2a78d6; }
.cr-ads__wbtn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px 0 12px; border: 1px solid #c3c2b7; border-radius: 16px;
    background: #ffffff; color: #0b0b0b; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cr-ads__wbtn:hover, .cr-ads__wbtn:focus { border-color: #52514e; }
.cr-ads__wbtn:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
.cr-ads__chev { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.cr-ads__wbtn[aria-expanded="true"] .cr-ads__chev { transform: rotate(225deg); margin-top: 3px; }
.cr-ads__panel { margin: 4px 0 10px; padding: 16px; background: #f6f5f2; border-radius: 10px; font-size: 14px; }
.cr-js .cr-ads__panel:not(.is-open) { display: none; }
.cr-waste--narrow { margin: 4px 0 10px; padding: 16px; background: #f6f5f2; border-radius: 10px; font-size: 14px; }
.cr-waste__cap { font-size: 13px; color: #52514e; margin-bottom: 8px; }
.cr-waste__groups { list-style: none; margin: 0; padding: 0; }
.cr-waste__group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid #e1e0d9; }
.cr-waste__gname { flex: 0 0 200px; font-weight: 700; color: #0b0b0b; overflow-wrap: anywhere; }
.cr-waste__nums { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; color: #52514e; }
.cr-waste__nums strong { color: #0b0b0b; font-weight: 600; }
.cr-waste__chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.cr-waste__start { padding-top: 12px; }
.cr-waste__startlabel { display: block; font-size: 13px; font-weight: 600; color: #0b0b0b; margin-bottom: 6px; }
.cr-waste__start .cr-waste__chips { margin: 0; }
.cr-arows { list-style: none; margin: 8px 0 0; padding: 0; }
.cr-arow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid #f0efea; font-size: 13px; }
.cr-arow__name { flex: 1 1 220px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .cr-waste__gname { flex-basis: 100%; }
    .cr-waste--narrow, .cr-ads__panel { padding: 12px; }
    .cr-arow__name { flex-basis: 100%; }
}

/* Control room reading layer: Week by week strip (2026-10-04). Eight small panels, the chain from leads to income,
   each a 2px line over 26 weeks on a step band of the normal range (12 weeks before, middle half). Four a row on a
   laptop, two on a phone. SVG heights in pixels, x in percent, so lines, dots and text keep their size. */
.cr-wk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cr-wk__panel { background: #f6f5f2; border-radius: 10px; padding: 12px; min-width: 0; }
.cr-wk__label { font-size: 13px; line-height: 1.3; color: #52514e; overflow-wrap: anywhere; }
.cr-wk__name { font-weight: 600; color: #0b0b0b; }
.cr-wk__val { font-weight: 600; color: #0b0b0b; }
.cr-wk__word { font-weight: 700; color: #52514e; }
.cr-wk__word--low { color: #c62828; }
.cr-wk__word--high { color: #2e7d32; }
.cr-wk__week { font-size: 12px; color: #52514e; margin: 2px 0 6px; }
.cr-wk__svg { display: block; width: 100%; overflow: visible; }
.cr-wk__band { fill: #e1e0d9; stroke: none; }
.cr-wk__base { stroke: #c3c2b7; stroke-width: 1; }
.cr-wk__line { stroke: #2a78d6; stroke-width: 2; stroke-linecap: round; fill: none; }
.cr-wk__dot { fill: #2a78d6; stroke: none; }
.cr-wk__dot--low { fill: #c62828; }
.cr-wk__dot--high { fill: #2e7d32; }
.cr-wk__dot--hollow { fill: #ffffff; stroke: #898781; stroke-width: 2; }
.cr-wk__ev { stroke: #898781; stroke-width: 1; }
.cr-wk__evtext { font-size: 10px; fill: #52514e; }
/* The mark's label is written on the first panel of each row only; the line and its tip stay on every panel. */
.cr-wk__evtext { display: none; }
.cr-wk__panel:nth-child(4n+1) .cr-wk__evtext { display: inline; }
.cr-wk__note { font-size: 11px; fill: #52514e; }
.cr-wk__hit { fill: transparent; stroke: none; }
.cr-wk__hit:focus { outline: 1px solid #2a78d6; }
.cr-wk__fixed { margin-top: 10px; font-size: 13px; color: #52514e; }
.cr-wk__more { border-bottom: 1px dotted #898781; }
.cr-wk__login { margin-top: 16px; }
.cr-wk__grid--login { margin-top: 12px; }
.cr-key--band { background: #e1e0d9; }
.cr-key--hollow { width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #898781; }
.cr-vis--weekline .cr-wk__svg { height: 68px; }
@media (max-width: 767px) {
    .cr-wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cr-wk__panel { padding: 10px; }
    .cr-wk__label { font-size: 12.5px; }
    .cr-wk__panel:nth-child(4n+1) .cr-wk__evtext { display: none; }
    .cr-wk__panel:nth-child(2n+1) .cr-wk__evtext { display: inline; }
}

/* Control room reading layer: Campaign history (2026-10-04). One campaign at a time (or all nine summed),
   measures a month as bars in the dataviz categorical order (spend, leads, called, bookings, customers,
   money paid, paid since by this month's leads) plus a line over each colour's bar tops. Customers and Money
   paid are each two chips since 2026-10-19 (owner): this month's leads (dark shade) and earlier leads (lighter
   shade of the same hue); with both halves on they stack into one bar. Chips only, reusing
   .cr-chip/.cr-chips/.cr-chiprow (now multi-select for measures); the canvas, the numbers strip and the
   "Show as table" view read window.CR_DATA.campaign_history and redraw in the browser on every chip tap, so
   this block never reloads the page and the main period chips never touch it. */
.cr-ch { margin-top: 12px; }
.cr-ch__controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cr-ch__box { height: 290px; }
.cr-key--spend { background: #2a78d6; }
.cr-key--leads { background: #eb6834; }
.cr-key--bookings { background: #1baf7a; }
.cr-key--customers-same { background: #a86f00; }
.cr-key--customers-earlier { background: #eda100; }
.cr-key--money-same { background: #4a3aa7; }
.cr-key--money-earlier { background: #8a80c8; }
.cr-key--cohort { background: #e87ba4; }
.cr-key--called { background: #475569; }

/* The numbers strip under the chart (2026-10-04): one row per visible measure, a value under every month,
   so the owner (reads this alone, on a phone) never needs to hover or tap to see a number. Flexbox, not a
   fixed-width grid, so any month count (6 on a phone, 12 or more on desktop) distributes evenly with no
   sideways scroll. */
/* Every column must fit the available width (no sideways scroll, phone or desktop): cells are pure flex
   (min-width 0) and wrap their text onto a second line instead of overflowing, which is why a long value
   such as "£128,587" is allowed to wrap (see cr_phone_390_history.png / scrollWidth checks). */
.cr-ch__numbers { margin-top: 14px; }
.cr-ch__nstrip { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.cr-ch__nrow { display: flex; align-items: flex-start; gap: 4px; padding: 4px 0; border-bottom: 1px solid #f1f0ec; }
.cr-ch__nrow--head { border-bottom-color: #c3c2b7; align-items: center; }
.cr-ch__ncell { flex: 1 1 0; min-width: 0; text-align: right; font-size: 12px; line-height: 1.25; color: #0b0b0b; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
/* The label cell only breaks BETWEEN words ("Money" / "paid"), never inside one ("Customer" / "s"): it needs
   its own rule because the shared .cr-ch__ncell rule above breaks mid-word for the value cells' numbers. */
.cr-ch__ncell--label { flex: 0 0 150px; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; font-weight: 600; white-space: normal; overflow-wrap: normal; word-break: normal; }
.cr-ch__nrow--head .cr-ch__ncell { font-size: 12px; font-weight: 600; color: #52514e; }
.cr-ch__ncell--running { color: #898781; }
.cr-ch__sofar { display: block; font-size: 10px; font-weight: 400; }
/* 2026-10-19: "Show as table" has 14 columns; it scrolls inside its own box instead of widening the page
   (from 768px up, where the wide table is shown; below that the month list replaces it). */
#cr-ch-table .cr-tv__wide { overflow-x: auto; }
/* 2026-10-09: under "All campaigns", one chart + numbers strip per campaign, stacked full width under the
   combined chart (built by CRHistory.buildCampaignList(); hidden when a single campaign is picked). */
.cr-ch__list { display: flex; flex-direction: column; margin-top: 8px; }
.cr-ch__item { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #e1e0d9; min-width: 0; }
.cr-ch__item .cr-chart__title { font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .cr-ch__box { height: 220px; }
    /* 2026-10-19: the Show chips wrap onto as many lines as they need instead of the shared sideways
       scroller of .cr-chips, so the four long Customers / Money paid chips are all in view at once. */
    .cr-ch__measures { flex-wrap: wrap; overflow-x: visible; }
    .cr-ch__item { margin-top: 18px; padding-top: 14px; }
    .cr-ch__nstrip { gap: 1px; }
    .cr-ch__ncell { font-size: 11px; }
    /* 2026-10-19: on a phone each measure's name takes its own line above its numbers (the Customers and
       Money paid names are long), so the month columns get the full width and a figure such as £20,608
       stays on one line; the header row then needs no "Month" cell. */
    .cr-ch__nrow { flex-wrap: wrap; row-gap: 2px; }
    .cr-ch__ncell--label { flex-basis: 100%; font-size: 11px; }
    /* Hidden visually only, so a screen reader still reads "Month" as the first column of the header. */
    .cr-ch__nrow--head .cr-ch__ncell--label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .cr-ch__nstrip--dense .cr-ch__nrow { gap: 2px; }
    .cr-ch__nstrip--dense .cr-ch__ncell:not(.cr-ch__ncell--label) { font-size: 10px; }
    .cr-ch__nrow--head .cr-ch__ncell { font-size: 10px; }
}

/* T-221 (2026-10-07): TEST badge next to a test lead's name (submissions.is_test = 1).
   Only the owner login ever receives test rows, so the badge needs no permission check. */
.lb-test-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #f0ad4e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* T-225 (2026-10-09): where a lead came from, on the lead row and on each history card
   (Admin_model::lead_channel() of submissions.campaign). One wrapping line per badge group. */
.lead-channel-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
    min-width: 0;
    max-width: 100%;
}
.lead-channel-line--history { margin: 0 0 8px; }
.lead-channel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 3px;
    background: #fff3e6;
    color: #b35500;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: normal;
}
.lead-channel--ads { background: #e8f0fd; color: #1a5fb4; }
.lead-channel--maps { background: #e7f5ea; color: #1e7b34; }
.lead-channel--ai { background: #f0eafa; color: #5b2a9e; }
.lead-channel--newsletter { background: #fff3e6; color: #b35500; }
.lead-channel--review { background: #e5f4f3; color: #0f6b65; }
.lead-channel--facebook { background: #e8f0fd; color: #1554b8; }
.lead-channel--other { background: #eeeeee; color: #444; }
.lead-channel--none { background: #f4f4f4; color: #666; font-weight: 600; }
.lead-channel--landing { background: transparent; color: #155e91; border: 1px solid #c9dbe9; font-weight: 600; }
.lead-channel-first {
    margin: 2px 0 4px;
    color: #155e91;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.lead-campaign-url { word-break: break-all; overflow-wrap: anywhere; }
.lead-campaign-url__details { margin: 0; }
.lead-campaign-url__short { cursor: pointer; color: #155e91; display: list-item; }
.lead-campaign-url__details .lead-campaign-url__full { margin-top: 4px; }
@media (max-width: 767px) {
    .lead-channel, .lead-channel-first { font-size: 11px; }
}

/* --------------------------------------------------------------------------
 * Owner decisions 2026-10-19 (patient page, calendar, leads).
 * pp-   payment panel: the redrawn payment list and the "already recorded"
 *       notice with its "Record it anyway" form (admin/new/tmp_history.php,
 *       admin/partials/plan_payments_list.php, payment_panel.php).
 * pe-   plan edit panel: the stale-form notice.
 * tb-   twin booking warning with its "Book anyway" button, and the busy
 *       state of .ajax-admin submit buttons (admin_ajax_leads.php).
 * once- busy state of form[data-once] submit buttons (form_once.php).
 * -------------------------------------------------------------------------- */
.pp-list { transition: opacity 0.15s ease; }
.pp-list--loading { opacity: 0.55; }
.pp-repeat {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 4px;
    color: #713f12;
    text-align: left;
}
.pp-repeat__text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.pp-repeat__form { margin: 0; }
.pp-repeat__btn { min-height: 40px; }
.pe-stale {
    margin: 10px 15px 0;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.45;
}
.pe-stale--saved {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.tb-twin { display: block; text-align: left; line-height: 1.45; }
.tb-twin-box {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 4px;
    color: #713f12;
    text-align: left;
    line-height: 1.45;
}
.tb-twin__text { display: inline; }
.tb-twin__btn, .tb-twin-fetch__btn { margin: 6px 0 0 4px; min-height: 32px; }
.tb-busy, .once-busy { cursor: progress; opacity: 0.7; }
@media (max-width: 767px) {
    .pp-repeat__btn { width: 100%; }
    .tb-twin__btn, .tb-twin-fetch__btn { display: block; width: 100%; margin: 8px 0 0; }
}

/* ===== T-231 (owner 2026-10-19): Ravi's code before staff cancel a consultation =====
   Patient page Cancel Appointment forms (tmp_history.php, .bg_follow_up_cancel). The panel shows
   only after the server answers code_required (admin_ajax_leads.php); no display rule on the panel
   itself, so its hidden attribute keeps working. Box and Confirm share one line at 390px. */
.cancel-code-panel { margin-top: 10px; }
.cancel-code-panel__note {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1c1f2e;
}
.cancel-code-panel__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.bg_follow_up_cancel .cancel-code-input {
    flex: 0 0 100px;
    width: 100px;
    min-width: 0;
    height: 48px;
    padding: 8px;
    border: 1px solid rgba(28, 31, 46, 0.25);
    border-radius: 9px;
    background: #fff;
    color: #1c1f2e;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
}
.bg_follow_up_cancel .cancel-code-input:focus {
    outline: none;
    border-color: #e54d4d;
    box-shadow: 0 0 0 3px rgba(229, 77, 77, 0.2);
}
.bg_follow_up_cancel .cancel-code-confirm,
.ph2-page .bg_follow_up_cancel input.cancel-code-confirm {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    white-space: normal;
}
/* Message under the code box: a note when the code is sent, red for a wrong or missing code (class toggled in JS). */
.cancel-code-panel__msg {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #1e3a8a;
}
.cancel-code-panel__msg:empty { display: none; }
.cancel-code-panel__msg--error {
    color: #b91c1c;
    font-weight: 600;
}

/* ===== T-232 (owner 2026-10-21): Settlement agreement =====
   Patient page panel #xpand_settlement (admin/partials/settlement_panel.php): rows are details
   elements (tap to open, chevron on the summary), two-line tick rows that wrap, a greyed taken row,
   the refund amount shown by a :checked sibling rule (no script), full-width buttons. The grey shell
   comes from the .ph2-panel class hook. Then the settlement signing page and record page. */
#xpand_settlement .stl-msg {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
#xpand_settlement .stl-msg--ok { background: #e4f5e9; border: 1px solid #bfe3c9; color: #116b32; }
#xpand_settlement .stl-msg--error { background: #fdecec; border: 1px solid #f5c2c0; color: #b42318; }
#xpand_settlement .stl-row {
    margin: 0 0 8px;
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 11px;
    overflow: hidden;
}
#xpand_settlement .stl-row__sum {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 8px;
    list-style: none;
    cursor: pointer;
    color: #1c1f2e;
}
#xpand_settlement .stl-row__sum::-webkit-details-marker { display: none; }
#xpand_settlement .stl-row__sum::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 2px 4px 0;
    border-right: 2px solid #4b5563;
    border-bottom: 2px solid #4b5563;
    transform: rotate(45deg);
}
#xpand_settlement .stl-row[open] > .stl-row__sum::after { margin: 4px 2px 0 0; transform: rotate(-135deg); }
#xpand_settlement .stl-row__head {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#xpand_settlement .stl-row__ref { font-size: 14px; font-weight: 700; line-height: 1.4; }
#xpand_settlement .stl-chip {
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
#xpand_settlement .stl-chip--draft { background: #fdf1dc; color: #92400e; }
#xpand_settlement .stl-chip--signed { background: #e4f5e9; color: #116b32; }
#xpand_settlement .stl-chip--voided { background: #fdecec; color: #b42318; }
#xpand_settlement .stl-row__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(28, 31, 46, 0.08);
}
#xpand_settlement .stl-row__line { margin: 0; font-size: 14px; font-weight: 600; color: #1c1f2e; line-height: 1.4; }
#xpand_settlement .stl-row__note { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.45; }
#xpand_settlement .stl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
#xpand_settlement .stl-btn--primary { background: #2f6bea; border: 1px solid #2f6bea; color: #fff; }
#xpand_settlement .stl-btn--secondary { background: #fff; border: 1px solid #bcd0f7; color: #2558c4; }
#xpand_settlement .stl-btn--create { margin: 16px 0 0; font-size: 15px; }
#xpand_settlement .stl-h { margin: 16px 0 10px; font-size: 15px; font-weight: 800; color: #1c1f2e; }
#xpand_settlement .stl-empty { margin: 0 0 12px; font-size: 13px; color: #4b5563; line-height: 1.45; }
#xpand_settlement .stl-free { min-width: 0; margin: 0; padding: 0; border: 0; }
#xpand_settlement .stl-legend {
    display: block;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1c1f2e;
    line-height: 1.45;
}
#xpand_settlement .stl-tick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 11px;
    font-weight: 400;
    cursor: pointer;
}
#xpand_settlement .stl-tick input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; }
#xpand_settlement .stl-tick__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#xpand_settlement .stl-tick__title { font-size: 14px; font-weight: 700; color: #1c1f2e; line-height: 1.4; overflow-wrap: anywhere; }
#xpand_settlement .stl-tick__sub { font-size: 13px; color: #4b5563; line-height: 1.4; }
#xpand_settlement .stl-tick--taken { background: #f3f4f6; border-color: rgba(28, 31, 46, 0.08); cursor: not-allowed; }
#xpand_settlement .stl-tick--taken .stl-tick__title { color: #4b5563; }
#xpand_settlement .stl-refund { position: relative; margin: 16px 0 0; }
#xpand_settlement .stl-refund__on { position: absolute; top: 13px; left: 13px; z-index: 1; width: 20px; height: 20px; margin: 0; }
#xpand_settlement .stl-refund__label { margin: 0; padding-left: 42px; }
#xpand_settlement .stl-refund__amount { display: none; margin: 12px 0 0; }
#xpand_settlement .stl-refund__on:checked ~ .stl-refund__amount { display: block; }
#xpand_settlement .stl-refund__row { display: flex; align-items: stretch; gap: 8px; }
#xpand_settlement .stl-refund__cs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    height: 44px;
    background: #f3f4f6;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 11px;
    font-size: 16px;
    font-weight: 700;
    color: #1c1f2e;
}
#xpand_settlement .stl-refund__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    background: #fff;
    border: 1px solid rgba(28, 31, 46, 0.1);
    border-radius: 11px;
    color: #1c1f2e;
    font-size: 16px;
}

/* Signing page (public/payment_agreement/sign.php): 16px fields so iPad and phone Safari do not zoom
   in on tap now that the viewport allows zoom (both kinds); the settlement wording in full, numbered
   points with a hanging indent, no 200px scroll box; the acceptance tick. */
.pa-ipad-body .form-control { height: auto; font-size: 16px; }
.pa-terms--full { font-size: 14px; color: #1f2937; line-height: 1.55; }
.pa-summary-card .pa-terms--full { padding: 14px 16px; background: #fff; }
.pa-terms--full p { margin: 0 0 10px; }
.pa-terms--full p:last-child { margin-bottom: 0; }
.pa-terms__point { padding-left: 1.8em; text-indent: -1.8em; }
.pa-terms__num { display: inline-block; width: 1.8em; text-indent: 0; }
.pa-accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.45;
    cursor: pointer;
}
.pa-accept input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; }
/* D15: hint under the settlement's Full legal name field. */
.pa-fullname-hint { margin: 6px 0 0; }

/* Record page (admin/agreements/settlement_view.php). */
.stl-record__error { margin: 12px 0 0; }
.stl-record__refund { margin: 0; padding: 12px 16px; border-top: 1px solid #f1f5f9; font-size: 13px; font-weight: 600; color: #111827; }
.stl-record .pa-sig-image { max-width: 100%; }
@media (max-width: 767px) {
    .stl-record.pa-view-wrap { padding-left: 16px; padding-right: 16px; }
}

/* Owner 2026-10-24 (audit money-4): Record New Payment, the amount message (payment_panel.php). */
.pp-amount-error { margin: 8px 0 0; color: #b42318; font-size: 13px; font-weight: 600; }
.pp-amount-error:empty { display: none; }
/* Owner 2026-10-24 (audit money-3): Pay360 Links page, the cancelled list under the pending one. */
.p360-cancelled-title { margin-top: 32px; }

/* harleyfacial.com (2026-10-25): the Stripe deposit line in the patient page appointment panels
   (admin/partials/appt_deposit_line.php). One short line that wraps; the Stripe ids below in smaller text. */
.appt-deposit { margin: 6px 0 8px; padding: 6px 10px; border-radius: 4px; background: #f3f4f6; color: #374151; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.appt-deposit--paid { background: #ecfdf5; color: #065f46; }
.appt-deposit--pending { background: #fffbeb; color: #92400e; }
.appt-deposit__ids { display: block; font-size: 11px; color: #6b7280; }

/* S1 */
/* Staff page (owner only): the commission bands table under Permissions (staff pay, 2026-10-29). Two narrow
   columns of text boxes, fits a 390px phone. */
.staff-form-section h3.staff-bands-title { margin-top: 24px; }
.staff-bands { width: 100%; max-width: 360px; margin-bottom: 0; }
.staff-bands > thead > tr > th, .staff-bands > tbody > tr > td { padding: 4px 8px 4px 0; border: 0; font-weight: 400; }
.staff-bands > thead > tr > th { font-size: 12px; color: #6b7280; }

/* S4 */
/* My money (staff pay, 2026-10-29; admin/mymoney/index.php): her commissions, expenses and payments as one-line
   rows that open on a tap (details/summary). Phone first (390px). */
.mm-page { max-width: 760px; padding-bottom: 80px; }
.mm-title { margin: 16px 0; }
.mm-section { margin: 28px 0 6px; font-size: 20px; font-weight: 700; }
.mm-note { margin: 0 0 10px; color: #6b7280; font-size: 13px; }
/* The receipt input is visually hidden: its label is the button ("Take a photo"). */
.mm-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.mm-file:focus + label { outline: 2px solid #2563eb; outline-offset: 2px; }
.mm-row-wrap { display: flex; align-items: flex-start; gap: 6px; }
.mm-row-wrap > .mm-row { flex: 1 1 auto; min-width: 0; }
.mm-row { margin-bottom: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }
.mm-row__sum { display: flex; align-items: center; gap: 8px; padding: 10px; white-space: nowrap; list-style: none; cursor: pointer; }
.mm-row__sum::-webkit-details-marker { display: none; }
.mm-row__main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mm-row__amount { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.mm-badge--wait { background: #fef3c7; color: #92400e; }
.mm-badge--info { background: #e0e7ff; color: #3730a3; }
.mm-badge--ok   { background: #d1fae5; color: #065f46; }
.mm-badge--paid { background: #ccfbf1; color: #115e59; }
.mm-row__body { padding: 0 12px 10px; overflow-wrap: anywhere; }
.mm-row__body p { margin: 8px 0 0; }
.mm-receipts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mm-receipt { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; }
.mm-receipt img { width: 100%; height: 100%; object-fit: cover; }
.mm-receipt--pdf { color: #991b1b; font-weight: 700; text-decoration: none; }
@media (max-width: 767px) {
    .mm-page { padding-left: 8px; padding-right: 8px; }
    .mm-row__sum { gap: 6px; padding: 10px 8px; }
}

/* S3 */
/* Pay staff (/admin/pay_staff, 2026-10-29): Ravi's page, phone first, one-line rows that open on a tap. */
.pstaff { max-width: 760px; padding-bottom: 40px; }
.pstaff-title { margin: 16px 0 12px; font-size: 22px; }
.pstaff-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.pstaff-tab { flex: 1 1 0; padding: 10px 4px; text-align: center; font-size: 14px; color: #4b5563; border-bottom: 2px solid transparent; white-space: nowrap; }
.pstaff-tab:hover, .pstaff-tab:focus { text-decoration: none; color: #111827; }
.pstaff-tab.is-active { color: #111827; font-weight: 600; border-bottom-color: #2563eb; }
.pstaff-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.pstaff-filters .form-control { flex: 1 1 0; min-width: 0; width: auto; }
.pstaff-empty { color: #6b7280; padding: 16px 0; }
.pstaff-row { display: block; margin-bottom: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }
.pstaff-row__sum { display: flex; align-items: center; gap: 6px; padding: 9px 8px 9px 10px; cursor: pointer; list-style: none; color: #111827; font-size: 14px; }
.pstaff-row__sum::-webkit-details-marker { display: none; }
.pstaff-row__main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstaff-row__amt { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.pstaff-row__body { padding: 10px 12px 12px; }
.pstaff-meta { color: #6b7280; font-size: 13px; margin: 0 0 8px; }
.pstaff-lines { list-style: none; padding: 0; margin: 0 0 8px; }
.pstaff-lines li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed #f3f4f6; }
.pstaff-short { max-width: 140px; }
.pstaff-form { margin-bottom: 10px; }
.pstaff-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #e5e7eb; border-radius: 4px; }
.pstaff-pdf { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid #e5e7eb; border-radius: 4px; font-weight: 600; }
.pstaff-muted { color: #9ca3af; }
.pstaff-paypanel { margin-top: 10px; padding: 10px; background: #f9fafb; border-radius: 6px; }

/* S2 */
/* Patient page "+ S" claim form (staff pay, 2026-10-29): each plan line one tappable row (the service, then its day,
   price and the share left), the live preview above the button. Fits a 390px phone. */
.cm-claim__lines { min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
.cm-claim__lines > legend { width: auto; border: 0; }
.cm-claim__line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 8px 0; border-bottom: 1px solid #eef0f3; font-weight: 400; cursor: pointer; }
.cm-claim__line > input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.cm-claim__name { font-weight: 600; color: #111827; }
.cm-claim__meta { margin-left: auto; color: #6b7280; font-size: 13px; }
.cm-claim__line--free { cursor: default; }
.cm-claim__line--free .cm-claim__name, .cm-claim__line--free .cm-claim__meta { color: #9ca3af; }
.cm-claim__preview { margin: 8px 0 12px; padding: 8px 10px; border-radius: 4px; background: #f3f4f6; color: #374151; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.cm-claim__empty { margin: 0; color: #6b7280; }
/* S4, continued: the site-wide "details summary" rule (bold, light blue) undone on the My money rows. */
.mm-row__sum { color: #111827; font-weight: 400; }
.cm-claim__msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 4px; background: #ecfdf5; color: #065f46; font-size: 13px; font-weight: 600; }
.cm-claim__msg--error { background: #fef2f2; color: #b42318; }
/* S3 */
/* Pay staff, continued: the site-wide "details summary" rule (bold) undone on the Pay staff rows. */
.pstaff-row__sum { font-weight: 400; }
/* fixes 2026-10-29 */
/* "+ S" claim form: a plan line locked for commission requests (the patient is locked only when every line is). */
.cm-claim__locked { margin: 0 0 8px; color: #6b7280; font-size: 13px; overflow-wrap: anywhere; }

/* plan history */
/* Owner 2026-10-29: the plan line's history under "Update Treatment Plan" in the "i" panel; one wrapping line per event. */
.plan-history { margin-top: 16px; }
.plan-history__list { list-style: none; margin: 0; padding: 0; }
.plan-history__item { padding: 6px 0; border-top: 1px solid #e5e7eb; font-size: 13px; line-height: 1.4; color: #374151; overflow-wrap: anywhere; }
.plan-history__when { color: #6b7280; white-space: nowrap; }
/* Pay staff, To pay: "Total to pay" (owner 2026-10-29). */
.pstaff-total { margin: 8px 0; font-size: 15px; }
/* "Paid on: <day> (change)" on My money and Pay staff; the calendar opens only after "change" (owner 2026-10-29). */
.paidon { margin: 8px 0; }
.paidon__line { margin: 0; }
.paidon__change { padding: 0; border: 0; background: none; color: #2563eb; text-decoration: underline; cursor: pointer; }
.paidon [hidden] { display: none; }
.paidon__cal .ui-datepicker { width: 100%; max-width: 320px; }
/* "+ S" form and Pay staff's approve form: each plan's own share as chips (owner 2026-10-29). */
.cm-claim__lshare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px 24px; }
.cm-claim__lshare[hidden], .cm-claim__lamount[hidden] { display: none; }
.cm-chip, .pstaff-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 10px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 13px; font-weight: 400; cursor: pointer; }
.cm-chip input, .pstaff-chip input { margin: 0; }
.cm-claim__lamount { width: 160px; max-width: 100%; }
.pstaff-lineshare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }

/* W3 */
/* Pay staff (2026-10-30): the tabs' counts, the row's date and its two-line end (amount, next step in amber when it
   needs Ravi), the approve form per plan with its live summary, "What happened", the flash with Open it and Undo, the
   payment panel. Phone first (390px). */
.pstaff [hidden] { display: none !important; }
.pstaff-cnt { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #e5e7eb; color: #374151; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.pstaff-cnt.is-hot { background: #2563eb; color: #fff; }
.pstaff-flash { overflow-wrap: anywhere; }
.pstaff-flash a, .pstaff-flash__btn { color: #2b542c; font-weight: 600; text-decoration: underline; }
.pstaff-flash__undo { display: inline; margin: 0; }
.pstaff-flash__btn { padding: 0; border: 0; background: none; cursor: pointer; }
.pstaff-row__date { flex: 0 0 46px; color: #6b7280; font-size: 13px; line-height: 1.2; }
.pstaff-row__end { flex: 0 0 auto; max-width: 45%; text-align: right; line-height: 1.2; }
.pstaff-row__end .pstaff-row__amt { display: block; font-variant-numeric: tabular-nums; }
.pstaff-row__next { display: block; margin-top: 2px; color: #6b7280; font-size: 11px; white-space: normal; }
.pstaff-row__next.is-you { color: #b45309; font-weight: 600; }
.pstaff-filters { align-items: center; }
.pstaff-filters .pstaff-muted { flex: 0 0 auto; font-size: 13px; color: #6b7280; }
.pstaff-plan { padding: 8px 0; border-bottom: 1px dashed #e9ecf0; }
.pstaff-plan__head { color: #111827; overflow-wrap: anywhere; }
.pstaff-plan__head b { font-weight: 600; }
.pstaff-plan.is-done .pstaff-plan__head, .pstaff-plan.is-done .pstaff-plan__head b { color: #9ca3af; }
.pstaff-plan__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pstaff-plan__sharebtn { margin-left: auto; padding: 0; border: 0; background: none; color: #337ab7; font-size: 12px; text-decoration: underline; cursor: pointer; }
.pstaff-chip--ok:has(input:checked) { border-color: #5cb85c; background: #effaf0; }
.pstaff-chip--no:has(input:checked) { border-color: #d9534f; background: #fdf1f1; }
.pstaff-plan__quiet { margin: 6px 0 0; color: #6b7280; font-size: 13px; }
.pstaff-plan__why { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 400; color: #374151; }
.pstaff-plan__why .form-control { flex: 1 1 auto; min-width: 0; height: 30px; }
.pstaff-sum { margin: 10px 0; padding: 8px 10px; border-radius: 4px; background: #f3f4f6; color: #374151; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.pstaff-sum p { margin: 0; }
.pstaff-sum p + p { margin-top: 3px; }
.pstaff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.pstaff-actions .btn { white-space: normal; }
.pstaff-denyall { padding: 0; border: 0; background: none; color: #b42318; text-decoration: underline; cursor: pointer; }
.pstaff-inline-form { display: inline; margin: 0; }
.pstaff-tiny { margin: 6px 0 0; color: #6b7280; font-size: 12px; }
.pstaff-lines .is-ok { color: #065f46; }
.pstaff-lines .is-no { color: #b42318; }
.pstaff-trail__h { margin: 10px 0 0; color: #374151; font-size: 13px; font-weight: 600; }
.pstaff-trail { margin: 4px 0 8px; padding: 0; list-style: none; }
.pstaff-trail__item { position: relative; padding: 6px 0 6px 16px; border-top: 1px solid #e5e7eb; color: #374151; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.pstaff-trail__item::before { content: ""; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.pstaff-trail__item b { color: #111827; font-weight: 600; }
.pstaff-trail__item.is-new { background: #fffbeb; }
.pstaff-trail__item.is-new::before { background: #f59e0b; }
@media (max-width: 767px) {
    .pstaff { padding-left: 8px; padding-right: 8px; }
}

/* W4b */
/* My money (2026-10-30): the commission rows on two short lines (patient and plans with the amount; the badge and the
   sale day under them) with the blue dot for what changed since her last visit. "What happened" uses the Pay staff
   trail classes (.pstaff-trail), so both pages print it the same way. */
.mm-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.mm-dot.is-new { background: #2563eb; }
.mm-row__sum--two { flex-wrap: wrap; gap: 3px 8px; }
.mm-row__sum--two .mm-row__main { flex: 1 1 0; }
.mm-row__l2 { display: flex; flex: 1 0 100%; align-items: center; gap: 8px; min-width: 0; padding-left: 16px; color: #6b7280; font-size: 12px; }
.mm-row__l2 .mm-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mm-row__when { flex: 0 0 auto; margin-left: auto; }
/* W5a */
/* Pay staff (2026-10-30): the admin header keeps only its search row and burger; every other page keeps the tiles. */
.lbm-container--compact .lbm-grid,
.lbm-container--compact .lbm-wide-row { display: none; }
/* folds 2026-10-30 */
/* My money and Pay staff rows: the chevron, smaller and grey, at the end of the first line (the badge line goes under
   it); an opened row: the chevron down and a tinted header strip. Phone first (390px). */
details.mm-row > summary::after, details.pstaff-row > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: translateX(-1px) rotate(-45deg); }
details.mm-row[open] > summary::after, details.pstaff-row[open] > summary::after { border-color: #4b5563; transform: translateY(-2px) rotate(45deg); }
.mm-row__sum--two .mm-row__l2 { order: 1; padding-right: 19px; } /* the sale day stays under the amount */
.mm-row[open], details.pstaff-row[open] { border-color: #b9c7db; }
.mm-row[open] > .mm-row__sum, details.pstaff-row[open] > .pstaff-row__sum { border-bottom: 1px solid #d5deea; border-radius: 5px 5px 0 0; background: #eef3f9; }

/* paystaff proto 2026-10-31 */
/* Pay staff to the approved prototype (http://localhost/crm/wireframes/paystaff/): the five framed bars of a clinic
   tab (title, count, chevron right when closed and down when open; the open one pinned at the top while its rows
   scroll by; grey at zero), the converted sales grouped per person, To pay's sale lines with their Reject box, the
   quiet actions Change and Undo, an expense's receipt and facts, History's wrapping rows. Phone first (390px). */
.psbar { margin-top: 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.psbar.is-open { padding: 0 6px 6px; border-color: #b9c7db; }
.psbar__sum { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 5px; background: #f3f4f6; color: #111827; font-size: 15px; font-weight: 600; line-height: 1.3; }
.psbar__sum:hover, .psbar__sum:focus { color: #111827; text-decoration: none; }
.psbar__sum::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid #4b5563; border-bottom: 2px solid #4b5563; transform: translateX(-2px) rotate(-45deg); }
.psbar__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psbar__t > span { font-weight: 400; color: #4b5563; }
.psbar.is-open > .psbar__sum { position: sticky; top: 0; z-index: 3; margin: 0 -6px 8px; border-bottom: 1px solid #b9c7db; border-radius: 5px 5px 0 0; background: #e8eef7; box-shadow: 0 2px 4px rgba(17, 24, 39, .1); }
.psbar.is-open > .psbar__sum::after { transform: translateY(-2px) rotate(45deg); }
.psbar.is-zero > .psbar__sum { background: #f9fafb; color: #9ca3af; }
.psbar.is-zero .psbar__t > span { color: #9ca3af; }
.psbar.is-zero > .psbar__sum::after { border-color: #d1d5db; }
.psbar__empty { margin: 2px 4px 4px; padding: 0; font-size: 13px; }
.psbar__body > .pstaff-row:last-child { margin-bottom: 0; }
.ps-here { scroll-margin-top: 56px; }
.pstaff-flash { margin-bottom: 8px; padding: 10px 12px; font-size: 13px; }
/* The message is the prototype's green (the site-wide .alert-success is white and blue); "Undone." stays grey. */
.pstaff .pstaff-flash.alert-success { border-color: #d6e9c6; background: #dff0d8; color: #3c763d; }
.pstaff .pstaff-flash.alert-success a, .pstaff .pstaff-flash.alert-success .pstaff-flash__btn { color: #3c763d; }
.pstaff .pstaff-flash.is-undone { border-color: #e5e7eb; background: #f3f4f6; color: #374151; }
.pstaff .pstaff-flash.is-undone b { color: #111827; }
.ps-g { color: #6b7280; }
/* To approve: a person's group of converted sales opens as the bars do (a link), with the bars' chevron */
.ps-group { margin-bottom: 6px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.ps-group.is-open { border-color: #b9c7db; }
.ps-group__sum { display: flex; align-items: center; gap: 6px; padding: 9px 8px 9px 10px; border-radius: 5px; color: #111827; font-size: 14px; }
.ps-group__sum:hover, .ps-group__sum:focus { color: #111827; text-decoration: none; }
.ps-group__sum::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: translateX(-1px) rotate(-45deg); }
.ps-group.is-open > .ps-group__sum { border-bottom: 1px solid #d5deea; border-radius: 5px 5px 0 0; background: #eef3f9; }
.ps-group.is-open > .ps-group__sum::after { border-color: #4b5563; transform: translateY(-2px) rotate(45deg); }
.ps-group__rows { padding: 6px 6px 0; }
.pstaff-plan__cur { color: #6b7280; }
/* To pay: one line per sale, its Reject box and reason, its body opening under it */
.ps-sl { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.ps-sl__main { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; text-align: left; cursor: pointer; }
.ps-sl__main[aria-expanded="true"] { white-space: normal; color: #2563eb; }
.ps-sl__amt { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; color: #111827; }
.ps-rej { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 0; font-weight: 400; color: #374151; }
.ps-rej input { margin: 0; }
.ps-sl.is-rej .ps-sl__main, .ps-sl.is-rej .ps-sl__amt { color: #9ca3af; text-decoration: line-through; }
.ps-why, .ps-reason { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 13px; font-weight: 400; color: #374151; }
.ps-why .form-control, .ps-reason .form-control { flex: 1 1 auto; min-width: 0; height: 30px; }
.ps-sl__body { margin: 0 -6px 2px; padding: 4px 10px 10px; border-bottom: 1px solid #e5e7eb; border-radius: 0 0 6px 6px; background: #f7f9fc; }
.ps-sl__body .pstaff-sum { background: #fff; }
.pstaff-paypanel .btn { white-space: normal; }
/* An opened sale: the plans' status colours and the quiet actions */
.pstaff-lines .is-pend { color: #92400e; }
.pstaff-lines li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pstaff-lines li > span:last-child { flex: 0 1 auto; text-align: right; }
.ps-qa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 10px; font-size: 13px; }
.ps-qa__btn, .ps-cancel, .ps-lnk { padding: 0; border: 0; background: none; color: #337ab7; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ps-cancel, .ps-lnk { color: #6b7280; }
.pstaff-lineshare > span { font-size: 13px; color: #374151; }
/* Expenses: the receipt beside its facts */
.ps-xpi + .ps-xpi { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.ps-xp { display: flex; gap: 12px; }
.ps-rcpt { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; max-width: 134px; }
.ps-norcpt { display: flex; align-items: center; justify-content: center; width: 64px; height: 84px; border-radius: 4px; background: #e5e7eb; color: #4b5563; font-size: 11px; text-align: center; }
.ps-facts { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #111827; overflow-wrap: anywhere; }
.ps-facts p { margin: 0 0 5px; }
.ps-facts span { display: inline-block; width: 68px; color: #6b7280; }
.ps-tag { flex: 0 0 auto; padding: 1px 7px; border: 1px solid #d1d5db; border-radius: 10px; color: #4b5563; font-size: 11px; white-space: nowrap; }
/* History: a long reason drops to its own line instead of being cut */
.pstaff-row__sum.ps-hrow { flex-wrap: wrap; }
.ps-hrow .pstaff-row__main { flex: 1 1 auto; }
/* The prototype's rows carry no chevron (the bars do). */
.pstaff details.pstaff-row > summary::after { content: none; }
.ps-by { flex: 0 0 auto; margin-left: auto; color: #6b7280; font-size: 12px; white-space: nowrap; }
.ps-whyr { flex: 0 1 auto; margin-left: auto; color: #b42318; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.ps-hl > summary { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #eef0f3; font-size: 13px; font-weight: 400; color: #374151; list-style: none; cursor: pointer; }
.ps-hl > summary::-webkit-details-marker { display: none; }
.ps-hl__main { min-width: 0; overflow-wrap: anywhere; }
.ps-hl__amt { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; color: #111827; }
.ps-hl__body { padding: 2px 0 8px; border-bottom: 1px solid #e5e7eb; }

/* mymoney proto 2026-10-31 */
/* My money to the approved prototype (http://localhost/crm/wireframes/paystaff/): the title and the clinic headings,
   the "Ready to request" line per clinic, one list of her commissions per clinic, the rows without a chevron, the two
   modes on top of the list (the blue box, the ticks), the expense form and its rows, the
   payments. Phone first (390px). */
.mmp [hidden] { display: none !important; }
.mmp .mm-title { margin: 12px 0 4px; font-size: 26px; font-weight: 700; }
.mmp .mm-section { margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #e5e7eb; font-size: 19px; }
.mmp-banner { margin: 0 0 4px; padding: 10px 12px; border: 1px solid #a7f3d0; border-radius: 6px; background: #f0fdf4; color: #065f46; font-size: 15px; overflow-wrap: anywhere; }
.mmp-banner b { color: #064e3b; }
.mmp details.mm-row > summary::after { content: none; }
.mmp .mm-row__sum--two .mm-row__l2 { padding-right: 0; }
.mmp .mm-row:last-child { margin-bottom: 0; }
.mm-badge--no { background: #fee2e2; color: #991b1b; }
.mm-badge--quiet { background: #f3f4f6; color: #4b5563; }
.mmp-struck { color: #9ca3af; text-decoration: line-through; }
/* A row's tick in Ask and Mark: its label is a 44 px target (11 px round the 22 px box), the box where it sat, 6 px
   clear of the row so a tap near the edge is not handed to the row; only the tick ticks, the words open the row. */
.mmp-tick { display: flex; flex: 0 0 auto; margin: 0 0 0 -11px; padding: 11px; cursor: pointer; }
.mmp-tick > .mm-tick { width: 22px; height: 22px; margin: 0; }
.mmp-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.mmp-pick { margin: 0 0 8px; padding: 10px; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; }
.mmp-pick .pstaff-actions { margin-top: 0; }
.mmp-pick .btn { white-space: normal; }
.mmp-line { margin: 0 0 8px; color: #1e3a8a; font-size: 13px; font-weight: 600; }
.mmp-pick .paidon { margin: 0 0 10px; }
.mmp-pay .mm-row__main { font-weight: 400; }
.mmp-pay .pstaff-lines { margin: 8px 0 0; }
.mmp-clin { flex: 0 0 auto; padding: 1px 7px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 600; }
.mmp-add { margin-bottom: 8px; }
.mmp-add > summary { display: inline-block; list-style: none; }
.mmp-add > summary::-webkit-details-marker { display: none; }
.mmp-add[open] > summary { display: none; }
.mmp-xf { margin: 0; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafbfc; }
.mmp-fr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: #374151; }
.mmp-lab { flex: 0 0 66px; margin: 0; font-weight: 600; }
.mmp-fr .pstaff-chip { padding: 4px 12px; font-size: 14px; }
.mmp-in { flex: 1 1 0; min-width: 0; width: auto; height: 32px; }
.mmp-cur { color: #6b7280; }
.mmp-photo { display: inline-flex; align-items: center; margin: 0; padding: 5px 12px; border: 1px dashed #9ca3af; border-radius: 6px; background: #fff; color: #374151; font-weight: 400; cursor: pointer; }
.mmp-picked { display: inline-flex; align-items: center; gap: 10px; }
.mmp-picked .mm-receipts { margin: 0; }
@media (pointer: coarse) { .mmp-in { font-size: 16px; } }