::placeholder {
 color: #d3d3d3 !important; 
}

label.error {
  color: red;
  width:100%;
}

html {
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
}

body.modal-open {
    overflow: hidden !important;
}

a {
  text-decoration: none;
  color: var(--fontcolor);
}

/* .container-fluid styles moved to layout section below */


.border-navy {
    --bs-border-opacity: 1;
    border-color: rgba(26,39,74,var(--bs-border-opacity))!important;
}

/* Responsive border utilities for xl breakpoint */
@media (min-width: 1200px) {
  .border-end-xl {
    border-right: 1px solid var(--bs-border-color) !important;
  }
  .border-start-xl {
    border-left: 1px solid var(--bs-border-color) !important;
  }
}

/* 3 Column Details Layout (used on profile/details pages) */
#right-column:has(.details-layout) {
  overflow-x: auto;
}

.details-layout {
  display: flex;
  gap: 0;
  width: 100%;
  min-width: 900px; /* 300 + 300 + minimum main content */
}

.details-col-left {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--bs-border-color);
  padding: 16px 12px 0 0;
}

.details-col-main {
  flex: 1 1 0%;
  min-width: 300px;
  padding: 16px 12px 0;
}

.details-col-right {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--bs-border-color);
  padding: 16px 0 0 12px;
}

/* Mobile: Stack columns vertically */
@media (max-width: 1199px) {
  #right-column:has(.details-layout) {
    overflow-x: hidden;
  }

  .details-layout {
    flex-direction: column;
    min-width: unset;
  }

  .details-col-left,
  .details-col-main,
  .details-col-right {
    width: 100%;
    border: none;
    padding: 0;
    margin-bottom: 16px;
  }

  .details-col-left {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 16px;
  }

  .details-col-right {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 16px;
  }
}

/* Legacy aliases for event-details-layout */
#right-column:has(.event-details-layout) { overflow-x: auto; }
.event-details-layout { display: flex; gap: 0; width: 100%; min-width: 900px; }
.event-col-left { width: 300px; flex-shrink: 0; border-right: 1px solid var(--bs-border-color); padding: 16px 12px 0 0; }
.event-col-main { flex: 1 1 0%; min-width: 300px; padding: 16px 12px 0; }
.event-col-right { width: 300px; flex-shrink: 0; border-left: 1px solid var(--bs-border-color); padding: 16px 0 0 12px; }
@media (max-width: 1199px) {
  #right-column:has(.event-details-layout) { overflow-x: hidden; }
  .event-details-layout { flex-direction: column; min-width: unset; }
  .event-col-left, .event-col-main, .event-col-right { width: 100%; border: none; padding: 0; margin-bottom: 16px; }
  .event-col-left { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 16px; }
  .event-col-right { border-top: 1px solid var(--bs-border-color); padding-top: 16px; }
}

.text-primary {
  color:#E94E89 !important;
}

.text-link {
  color:#E94E89 !important;
  font-weight:600;
}


/* @font-face {
  font-family: "Boing";
  src: url("/assets/fonts/Boing_Light.woff") format('woff');
	font-weight: 300;

}

@font-face {
  font-family: "Boing";
  src: url("/assets/fonts/Boing_Regular.woff") format('woff');
  font-weight: 400;
}

@font-face {
  font-family: "Boing";
  src: url("/assets/fonts/Boing_Semibold.woff") format('woff');
  font-weight: 700;
} */

* {
  font-family: 'Roboto';
/* 	font-family: "Boing"; */
  font-size:14px;
}

.monospacetext {
  font-family: 'Roboto Mono', monospace;
}

.pagetitle {
  font-size:20px;
  margin: 0;
  padding:8px 0 8px 0;
  cursor: default;
}

.pagetitle-menu {
  font-size:20px;
  margin: 0;
  padding:8px 0 8px 0;
  cursor: default;
}

 .rssmodal__outer {
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    background:#000;
    opacity:0.8;
    z-index:1100;
  }

  .rssmodal-overlay {
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:1001;
    background-color:#000000;
    opacity:0.7; 
  }
  
  .rssmodal-modal {
    width:100vw;
    position:absolute;
    top:0;
    left:0;
    z-index:1001;
  }

/* .rssmodal {
  border-radius: 0.25rem;
  background:#fff;
} */

    .toast-container {
      position: fixed;
      bottom: 10px;
      right: 10px;
      transition: bottom 0.3s ease;
      z-index:1101;
    }
  
   .toast-container>:not(:last-child) {
    margin-bottom: 5px !important;
}
  
    .toast {
      position: relative;
      margin-bottom: 10px;
      opacity: 0;
      transition: opacity 0.3s, transform 0.5s;
      transform: translateY(100%);
    }
  



.modal__elm {
  position: relative;
  border-radius: 0.25rem;
  background: #fff;
  overflow: inherit;
  padding: 0;
  margin:2rem auto;
}

.modal__elm header {
  position: relative;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 600;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
}

.modal__elm .modal__body {
  padding:20px;
      max-height: calc(100vh - 160px);
    overflow: auto;
}

.modal__elm footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}


.modal__sm {
  max-width: 400px;
}

.modal__md {
  max-width: 600px;
}

.modal__lg {
  max-width: 800px;
}

.modal__xl {
  max-width: 1200px;
}

.modal__fullscreen {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.modal__fullscreen .modal__body {
  flex: 1;
  max-height: none;
  overflow: auto;
}

/* Attendee Item Styles */
.attendee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  margin-bottom: 6px;
  transition: all 0.2s ease;
}

.attendee-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.attendee-item--placeholder {
  background: #fffbeb;
  border-color: #fef08a;
}

.attendee-item--placeholder:hover {
  background: #fef9c3;
}

.attendee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.attendee-avatar--placeholder {
  background: #e2e8f0;
  color: #94a3b8;
  font-size: 14px;
}

.attendee-info {
  flex: 1;
  min-width: 0;
}

.attendee-name {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.attendee-name a {
  color: inherit;
  text-decoration: none;
}

.attendee-name a:hover {
  color: #D13A75;
}

.attendee-email {
  font-size: 12px;
}

.attendee-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.attendee-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
}

.attendee-action-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

/* WorkPass Badge Styles */
.workpass-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.2s ease;
}

.workpass-badge--active {
  background: #dcfce7;
  color: #16a34a;
}

.workpass-badge--invite {
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  text-decoration: none;
}

.workpass-badge--invite:hover {
  background: #e0e7ff;
  color: #4f46e5;
}

/* Contact Account Badge Styles */
.contact-account-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.contact-account-badge--active {
  background: #dcfce7;
  color: #16a34a;
}

.contact-account-badge--invite {
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  text-decoration: none;
}

.contact-account-badge--invite:hover {
  background: #e0e7ff;
  color: #4f46e5;
}

.attendees-section {
  margin-bottom: 12px;
}

.attendees-section:last-child {
  margin-bottom: 0;
}

.attendees-section-title {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Attendee Inline List Styles */
.attendees-list-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attendee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

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

.attendee-row--placeholder .personSelectInput {
  background: #fffbeb;
  border-color: #fef08a;
}

.attendee-row--placeholder .personSelectInput:hover,
.attendee-row--placeholder .personSelectInput:focus {
  background: #fef9c3;
  border-color: #fde047;
}

.attendee-row__name {
  flex: 1;
  min-width: 0;
}

.attendee-row__name .personSelectInput {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.attendee-row__name .personSelectInput:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.attendee-row__name .personSelectInput:focus {
  border-color: #E94E89;
  box-shadow: 0 0 0 2px rgba(233, 78, 137, 0.1);
  outline: none;
}

.attendee-row__name .personSelectInput::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.attendee-row__name a {
  color: #1e293b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.attendee-row__name a:hover {
  color: #D13A75;
}

.attendee-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Attendee Card Item Styles */
.attendees-list-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attendee-card-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.2s ease;
}

.attendee-card-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.attendee-card-item--placeholder {
  background: #fffbeb;
  border-color: #fef08a;
}

.attendee-card-item--placeholder:hover {
  background: #fef9c3;
  border-color: #fde047;
}

.attendee-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.attendee-card-avatar--placeholder {
  background: #e2e8f0;
  color: #94a3b8;
  font-size: 14px;
}

.attendee-card-info {
  flex: 1;
  min-width: 0;
}

.attendee-card-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

.attendee-card-name a {
  color: inherit;
  text-decoration: none;
}

.attendee-card-name a:hover {
  color: #D13A75;
}

.attendee-card-name-input {
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  width: 100%;
  transition: all 0.2s ease;
}

.attendee-card-name-input:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.attendee-card-name-input:focus {
  border-color: #E94E89;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(233, 78, 137, 0.1);
  outline: none;
}

.attendee-card-name-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-style: italic;
}

.attendee-card-item--placeholder .attendee-card-name-input {
  color: #92400e;
}

.attendee-card-item--placeholder .attendee-card-name-input::placeholder {
  color: #b45309;
}

.attendee-card-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.attendee-card-email,
.attendee-card-mobile {
  display: flex;
  align-items: center;
}

.attendee-card-email i,
.attendee-card-mobile i {
  color: #94a3b8;
}

.attendee-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Attendees Table - Compact layout for many attendees */
.attendees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.attendees-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f0;
}

.attendees-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
}

.attendees-table tbody tr:last-child {
  border-bottom: none;
}

.attendees-table tbody tr:hover {
  background: #f8fafc;
}

.attendees-table__row--placeholder {
  background: #fffbeb;
}

.attendees-table__row--placeholder:hover {
  background: #fef9c3;
}

.attendees-table td {
  padding: 8px;
  vertical-align: middle;
}

.attendees-table__name {
  width: 40%;
}

.attendees-table__email {
  width: 45%;
}

.attendees-table__status {
  width: 15%;
  text-align: right;
}

.attendees-table .personSelectInput {
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  width: 100%;
  transition: all 0.15s ease;
}

.attendees-table .personSelectInput:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.attendees-table .personSelectInput:focus {
  border-color: #E94E89;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(233, 78, 137, 0.1);
  outline: none;
}

.attendees-table .personSelectInput::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-style: italic;
}

.attendees-table__row--placeholder .personSelectInput {
  color: #92400e;
}

.attendees-table__row--placeholder .personSelectInput::placeholder {
  color: #b45309;
}

/* Person Picker Styles */
.personSelect {
  transition: background 0.15s ease;
}

.personSelect:hover {
  background: #f8fafc;
}

.personSelect.highlight {
  background: #fef3c7;
}

/* Places Editor Styles */
.places-editor {
  display: flex;
  align-items: center;
}

.places-editor__display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.places-editor__display:hover {
  background: #e2e8f0;
}

.places-editor__count {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}

.places-editor__label {
  font-size: 12px;
  color: #64748b;
}

.places-editor__icon {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Editor Styles */
.contact-editor {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-editor .form-select {
  flex: 1;
  min-width: 150px;
}

/* Pricing Type Editor Styles */
.pricing-type-editor {
  display: flex;
  align-items: center;
}

.pricing-type-editor__label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

/* Booking Card Header Actions */
.booking-card__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-navy {
    --bs-btn-color: #fff;
    --bs-btn-bg: #E94E89;
    --bs-btn-border-color: #E94E89;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #D13A75;
    --bs-btn-hover-border-color: #D13A75;
    --bs-btn-focus-shadow-rgb: 233,78,137;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C03069;
    --bs-btn-active-border-color: #C03069;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #E94E89;
    --bs-btn-disabled-border-color: #E94E89;
}


.btn-outline-navy {
    --bs-btn-color: #E94E89;
    --bs-btn-border-color: #E94E89;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #E94E89;
    --bs-btn-hover-border-color: #E94E89;
    --bs-btn-focus-shadow-rgb: 233,78,137;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D13A75;
    --bs-btn-active-border-color: #D13A75;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #E94E89;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #E94E89;
    --bs-gradient: none;
}





.filteritem {
  color: #1a274a;
}

  .filteritem:hover {
      color: #E94E89;
    }

/* a:not(.btn):not(.nav-link):not(.page-link) {
  color: #1a274a !important;
} */

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #E94E89;
}



/* TinyMCE */
  .mce-container {
    background: #fff;
  }
  
  .mce-btn {
    border: solid 1px #ccc !important;
/*     background-color:var(--primary); */
    background-color:#fff;
/*     color:#fff; */
  }
  
  .mce-open {
     background-color:var(--primary) !important;
  }
  
/* google maps */
  div.pac-container {
    z-index: 99999999999 !important;
}


/* pagination */
.active>.page-link, .page-link.active {
    z-index: 3;
    color: #fff;
    background-color: #E94E89;
    border-color: #E94E89;
}


/* select2 */
.select2-dropdown {
  z-index:1102;
  border: 1px solid #e5e5e5;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e5e5e5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 30px;
}

  /* Add custom CSS to target Select2 dropdown */
.select2-container.is-invalid .select2-selection--single {
  border-color: #dc3545 !important;
  border-radius: 0.25rem;
}

.select2-container.is-invalid .select2-selection--single:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.select2-container.is-invalid .select2-selection--single .select2-selection__arrow b {
  border-color: #dc3545 transparent transparent transparent !important;
}

.select2-container.is-invalid .select2-selection__clear {
  display: none !important;
}

/* Valid styles */
.select2-container.is-valid .select2-selection--single {
  border-color: #28a745 !important;
}

.select2-container.is-valid .select2-selection--single:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.select2-container.is-valid .select2-selection--single .select2-selection__arrow b {
  border-color: #28a745 transparent transparent transparent !important;
}

.select2-container.is-valid .select2-selection__clear {
  display: none !important;
}


 .form-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
      padding-top: 1.625rem;
      padding-bottom: .625rem;
      line-height: 1.1 !important;
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 33px !important;
}

    .select2-container .select2-selection--single {
      height:33px;
      border-radius: 0.25rem;
/*       border-radius: var(--bs-border-radius); */
    }


    .CourseItem {
      padding: 10px;
    }

    .CourseItem:hover {
      cursor: pointer;
      background-color: #ccc;
    }

    .hidden {
      display: none;
    }

    .select2-container--default .select2-selection--single {
      background-color: #fff;
      transition: border-color 0.3s ease 0s;
      border: 1px solid #e5e5e5;
      /* border-radius: 4px; */
    }
    
/*     .select2-container {
      width:100% !important;
    } */



/* Card */
.card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--transition-speed) var(--transition-ease);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.card-body {
  padding: 14px 16px;
}

.card-body-container {
  min-height:490px;
}

.card-body-top {
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.card-body-top .fw-bold {
  font-size: 14px;
  color: #1e293b;
}

.widgettitle {
  font-weight:900;
}

/* Widget grid spacing */
.row.g-1 {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
}

/* Provider overview specific spacing */
#right-column .row.g-1 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}



/* ========================================
   SIDEBAR - Collapsible Navigation
   ======================================== */

.sidebar {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.sidebar-brand {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all var(--transition-speed) var(--transition-ease);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--hover-bg);
  color: #1e293b;
}

.sidebar-toggle i {
  font-size: 14px;
  transition: transform var(--transition-speed) var(--transition-ease);
}

/* Collapsed state for header */
.sidebar.collapsed .sidebar-header,
body.sidebar-is-collapsed .sidebar .sidebar-header {
  justify-content: center;
  padding: 12px 8px;
}

.sidebar.collapsed .sidebar-brand,
body.sidebar-is-collapsed .sidebar .sidebar-brand {
  display: none;
}

.sidebar.collapsed .sidebar-toggle i,
body.sidebar-is-collapsed .sidebar .sidebar-toggle i {
  transform: rotate(180deg);
}

/* Collapsed state - width controlled by #left-column */
.sidebar.collapsed {
  /* Visual adjustments handled by #left-column.collapsed */
}

.sidebar-nav {
  list-style: none;
  padding: 12px 8px;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav-actions {
  flex: 0;
  padding-top: 0;
}

/* Sidebar items */
.sidebar-item {
  margin: 2px 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all var(--transition-speed) var(--transition-ease);
  white-space: nowrap;
  position: relative;
}

.sidebar-link:hover {
  background: var(--hover-bg);
  color: #1e293b;
}

/* Active state with left accent */
.sidebar-item.current .sidebar-link {
  background: var(--active-bg);
  color: var(--cc-primary);
}

.sidebar-item.current .sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--cc-primary);
  border-radius: 0 3px 3px 0;
}

/* Icons */
.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar-icon i {
  font-size: 18px;
  color: inherit;
}

/* Labels - hide when collapsed */
.sidebar-label {
  transition: opacity var(--transition-speed) var(--transition-ease);
  overflow: hidden;
}

.sidebar.collapsed .sidebar-label,
body.sidebar-is-collapsed .sidebar .sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Tooltips for collapsed state */
.sidebar.collapsed .sidebar-link,
body.sidebar-is-collapsed .sidebar .sidebar-link {
  justify-content: center;
  padding: 10px;
}

/* Allow tooltips to overflow when collapsed */
.sidebar.collapsed,
body.sidebar-is-collapsed .sidebar,
.sidebar.collapsed .sidebar-nav,
body.sidebar-is-collapsed .sidebar .sidebar-nav,
.sidebar.collapsed .sidebar-footer,
body.sidebar-is-collapsed .sidebar .sidebar-footer {
  overflow: visible;
}

.sidebar.collapsed .sidebar-link[data-tooltip]::after,
body.sidebar-is-collapsed .sidebar .sidebar-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  background: #1e293b;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease);
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.sidebar.collapsed .sidebar-link:hover[data-tooltip]::after,
body.sidebar-is-collapsed .sidebar .sidebar-link:hover[data-tooltip]::after {
  opacity: 1;
  visibility: visible;
}

/* Getting Started - subtle text link */
.sidebar-item-subtle {
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}

.sidebar-item-subtle .sidebar-link {
  font-size: 13px;
  color: #94a3b8;
}

.sidebar-item-subtle .sidebar-link:hover {
  color: #64748b;
}

.sidebar-item-subtle .sidebar-icon i {
  font-size: 16px;
}

/* Footer section */
.sidebar-footer {
  padding: 8px;
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
}

.sidebar-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 4px;
}

/* Back button styling in sidebar */
.sidebar-item-back .sidebar-link {
  color: #64748b;
  font-size: 0.875rem;
}

.sidebar-item-back .sidebar-link:hover {
  color: var(--primary);
  background: var(--hover-bg);
}

.sidebar-item-back .sidebar-icon i {
  font-size: 0.75rem;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* Legacy support - keep old classes working */
.sidenav {
  display: flex;
  flex-direction: column;
  margin: auto;
  font-weight: 400;
  overflow-x: auto;
  padding: 5px;
  position: sticky;
  top: var(--topbar-height);
}

.sidenav li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 2px;
  outline: medium none;
  overflow: hidden;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}

.sidenav li:hover {
  background: var(--hover-bg);
}

.sidenav li.current {
  font-weight: 600;
  background: var(--active-bg);
}

.sidenav li.current a {
  color: var(--cc-primary);
}

.sidenav li a {
  padding: 10px 12px !important;
  width: 100%;
  align-items: center;
  display: flex;
}

.sidenav li a i {
  font-size: 1.3rem;
  width: 24px;
  text-align: center;
}

.sidenav li a span {
  margin-left: 12px;
  font-weight: 500;
}

.navicon {
  width: 24px;
}





.nav-link.active {
  color:#0d6efd !important;
}




  .navwrapper {
      display:flex;
      padding: 0 10px 10px 10px;
    }

.secondarynav {
  display: flex;
  margin: auto;
  font-weight: 400;
  overflow-x:auto;
  background:var(--altbackground);
  border-radius:10px;
  padding:5px;
}

.secondarynav li {
  display: table;
  cursor: pointer;
  margin: 2px;
  outline: medium none;
  overflow: hidden;
  padding: 5px 12px !important;
  text-decoration: none;
  border-radius: 0.25rem;
  white-space: nowrap;
}


.secondarynav li a {
 white-space:nowrap; 
}

.secondarynav li:hover {
  background: var(--primaryhover);
  color:#fff;
  transition: all 0.5s ease 0s;
}

.secondarynav li.current {
  background: #6a6b70;
  color: #fff;
}

.secondarynav li.current span {
   color: #fff;
  font-weight: 600;
}


/* Datatables - Modern Style */

div.dataTables_processing {
  z-index: 1;
  top: 30%;
}

/* Modern DataTable Container */
.dataTables_wrapper {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dataTables_wrapper .middle {
  border-left: none;
  border-right: none;
  overflow-x: auto;
}

/* Table Header */
.table.dataTable thead tr th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
  white-space: nowrap;
}

/* Sorting Icons */
.table.dataTable thead th.sorting:before,
.table.dataTable thead th.sorting:after,
.table.dataTable thead th.sorting_asc:before,
.table.dataTable thead th.sorting_asc:after,
.table.dataTable thead th.sorting_desc:before,
.table.dataTable thead th.sorting_desc:after {
  opacity: 0.3;
}

.table.dataTable thead th.sorting_asc:after,
.table.dataTable thead th.sorting_desc:before {
  opacity: 0.8;
}

/* Table Body */
.table.dataTable tbody tr td {
  padding: 12px 16px !important;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  white-space: nowrap;
}

.table.dataTable tbody tr:last-child td {
  border-bottom: none;
}


/* First column styling for links */
.table.dataTable tbody tr td:first-child {
  font-weight: 500;
}

table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable td:first-child {
  border-left-width: 0;
}


/* Empty State / No Data */
.nodata_outer {
  display: none;
}

.nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 60px 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.nodata_icon,
#nodata_icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 50%;
  margin-bottom: 20px;
}

.nodata_icon i,
#nodata_icon i {
  color: #94a3b8;
}

#nodata_message {
  margin-bottom: 24px;
  margin-top: 0;
  color: #64748b !important;
  text-align: center;
  max-width: 400px;
  font-size: 14px;
  line-height: 1.5;
}

#nodata_btn .btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
}

.dtdata_outer {
  display: none;
}


/* DataTable Top Bar (Search & Length) */
.dataTables_wrapper .top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* DataTable Bottom Bar (Pagination & Info) */
.dataTables_wrapper .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* Pagination Styling */
.pagination {
  margin: 0;
  gap: 4px;
}

.pagination .page-link {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: #64748b;
  background: transparent;
}

.pagination .page-link:hover {
  background: #e2e8f0;
  color: #334155;
}

.pagination .page-item.active .page-link {
  background: #64748b;
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  opacity: 0.5;
}

/* Search & Length Controls */
.dataTables_length label,
.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.dataTables_filter input,
.dataTables_length select,
.dataTables_length select.form-select,
.dataTables_length select.form-select-sm {
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #334155 !important;
  min-width: 60px;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  opacity: 1 !important;
}

.dataTables_length select option {
  color: #334155;
  background: #fff;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  outline: none;
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

.dataTables_info {
  font-size: 13px;
  color: #64748b;
}

label i {
  margin-right:3px;
  width:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

  .mb-calender-td-inner * {
    font-size:11px;
  }
  
  .webui-popover-content * {
    font-size:11px;
  }

.table.dataTable {
  margin:0 !important;
}
  
  table.dataTable>tbody>tr>td, table.dataTable>tbody>tr>th {    
    vertical-align: middle;
}



/* Calendar */
      .numdate {
    display: flex;
        align-items: center;
          justify-content: center;
          width: 20px;
    height: 20px;
    border-radius: 50%;
    background:inherit;
    cursor:default;
  }

.numdatetext {
    margin-left: 2px;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 30px;
}

  .mb-calender {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .mb-calender td {
    height: 100px;
    border: solid #ddd 1px;
    box-sizing: border-box;
  }

  .mb-calender-td-inner {
    position: relative;
    height: 100%;
    width: 100%;
    background:inherit;
  }

  .numdatetoday {
    background: red !important;
    color: #fff !important;
  }

  .mb-calender-today {
/*     padding-top: 26px; */
    overflow-y: auto;
    height: 105px;
  }

  .mb-calender-today::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 0;
    background-color: #f1f1f1;
  }

  .mb-calender-today::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f1f1f1;
  }

  .mb-calender-today::-webkit-scrollbar-thumb {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #6a6b70;
  }

  .mb-calender .event {
    cursor: pointer;
    margin: 2px;
    border-radius: 6px;
    font-size: 11px;
    background: #f1f1f1;
    box-sizing: border-box;
    padding: 6px 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: 3px solid rgba(255,255,255,0.3);
  }

  .mb-calender .event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .mb-calender .event .fw-bold {
    font-size: 10px;
    opacity: 0.9;
    margin-bottom: 2px;
  }

  .mb-calender .event-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    border: 1px solid rgba(255,255,255,0.5);
    flex-shrink: 0;
    vertical-align: middle;
  }

  .location-section-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    padding: 8px 10px 4px 10px;
    margin-top: 5px;
    background: #f8f9fa;
    cursor: default !important;
  }

  .location-section-header:first-child {
    margin-top: 0;
  }

  .mb-calender #monthyear {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
    padding: 10px 10px;
    font-weight: 600;
    font-size: 1.1rem;
  }

  .mb-calender i {
    font-size: 30px;
    cursor: pointer;
  }

  /* Filter search input */
  .filter-search-wrapper {
    position: relative;
  }
  .filter-search-input {
    padding-left: 32px;
    padding-right: 28px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .filter-search-input:focus {
    border-color: #94a3b8;
    background: #fff;
    box-shadow: none;
  }
  .filter-search-input::placeholder {
    color: #94a3b8;
  }
  .filter-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
  }
  .filter-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .filter-search-clear:hover {
    color: #64748b;
  }

  /* Filter item highlight when searching */
  .filter-item-hidden {
    display: none !important;
  }
  .filter-item-match {
    background: #fef9c3 !important;
  }

  /* Modern calendar filter styling */
  .tablefilter-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 12px 8px 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
  }

.rs-datepicker {
    background: #fff;
    z-index: 1;
   padding:10px;
  width: 250px;
}

  .rs-calender {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 5px auto;
  }

 .rs-calender td {
    box-sizing: border-box;
  }

 .rs-calender-td-inner {
/*     width: 30px;
    height: 30px; */
   padding:1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

      .rs-numdate {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;    
    cursor:pointer;
        font-size:12px;
  }


.daySelected {
  background: #6a6b70 !important;
  color: #fff !important;
}





/* tabs */
.nav-link { 
 padding:.25rem 1.5rem; 
  border-radius:0.25rem;
}

.nav-link.active, .navbar.active {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    text-transform: initial;
    background: #6a6b70;
    color: #fff !important;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  background: #eeeeee;
  color: var(--fontcolor) !important;
}


.navbar-light .navbar-nav .nav-link {
    color: var(--fontcolor);
}

.nav-item {
  display:flex;
  align-items:center;
}


.dt-top-nav .dt-top-nav-item {
  color:var(--fontcolor);
  display: flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  cursor: pointer;
  outline: medium none;  
  padding: 4px 8px !important;
  text-decoration: none;
  border-radius:0.25rem;
  background-color:#d6d6d6;
  border: 1px solid #dee2e6!important;
}

.dt-top-nav .dt-top-nav-item.current {
  background: #6a6b70;
  color:#fff;
  font-weight: 600;  
}

.dt-top-nav .dt-top-nav-item:hover:not(.current) {
  background-color:#bdbdbd;
}



/* dropdown */
.dropdown-item {
    cursor: pointer;
    padding: 0.75rem 1rem;
}

.dropdown-item:not(.active) i:nth-child(1) {
    color: var(--primary);
    width: 20px;
    text-align: center;
    margin-right: 10px;
}


/* ========================================
   LAYOUT CONTAINER - Clean Redesign
   ======================================== */

/* Fixed top bar */
.topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  z-index: 1000;
}

/* Fixed sidebar - positioned relative to viewport */
#left-column {
  position: fixed !important;
  top: var(--topbar-height);
  left: 0 !important;
  bottom: 0;
  width: var(--sidebar-width-expanded);
  background: #fff;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--transition-speed) var(--transition-ease);
  z-index: 100;
  margin: 0 !important;
  padding: 0 !important;
}

#left-column.collapsed,
body.sidebar-is-collapsed #left-column {
  width: var(--sidebar-width-collapsed);
  overflow: visible;
}

/* Container - no padding, let children handle spacing */
.container-fluid {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Column container - simple block */
#column-container {
  display: block;
  margin: 0;
  padding: 0;
}

/* Right column - main content area with left margin for sidebar */
#right-column {
  margin-left: var(--sidebar-width-expanded);
  padding-top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
  padding-right: 24px;
  padding-bottom: 20px;
  padding-left: 24px;
  background: #f8fafc;
  box-sizing: border-box;
  transition: margin-left var(--transition-speed) var(--transition-ease);
}

#right-column.sidebar-collapsed,
body.sidebar-is-collapsed #right-column {
  margin-left: var(--sidebar-width-collapsed);
}

/* Make right-column a flex container so flex-fill children stretch to fill height */
#right-column {
  display: flex;
  flex-direction: column;
}

#right-column > .d-flex.flex-fill {
  flex: 1;
}

#right-column-menu {
  overflow: visible;
}

#page-menu-tab-container {
}

/* Responsive layout */
@media (max-width: 768px) {
  #left-column {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    border-right: none;
    width: 280px;
    z-index: 1000;
  }

  #left-column.mobile-open {
    transform: translateX(0);
  }

  #right-column {
    margin-left: 0;
    padding-top: var(--topbar-height);
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    width: 100%;
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all var(--transition-speed);
    margin-right: 8px;
  }

  .mobile-menu-toggle:hover {
    background: var(--hover-bg);
    color: var(--cc-primary);
  }

  .mobile-menu-toggle i {
    font-size: 18px;
  }

  /* Mobile overlay when menu is open */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .mobile-menu-overlay.active {
    display: block;
  }
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  .mobile-menu-overlay {
    display: none !important;
  }
}



/* crop photo */

  .content {
	max-width: 1290px;
	padding: 0 1em;
	margin: 0 auto;
	text-align: center;
}

.component {
    position: relative;
    max-width: 901px;
    overflow: hidden;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
}

.resize-container img {
    display: block
}
  
  .resize-handle-ne,
.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: #1e8cd4;
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}
  
  .overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
    z-index: 999;
    width: 200px;
    height: 200px;
    border: solid 1px #1e8cd4;
    box-sizing: content-box;
    pointer-events: none;
}

.overlay:after,
.overlay:before {
    content: '';
    position: absolute;
    display: block;
    width: 204px;
    height: 40px;
}

.overlay:before {
    top: 0;
    margin-left: -2px;
    margin-top: -40px;
}

.overlay:after {
    bottom: 0;
    margin-left: -2px;
    margin-bottom: -40px;
}

.overlay-inner:after,
.overlay-inner:before {
    content: '';
    position: absolute;
    display: block;
    width: 40px;
    height: 204px;
}

.overlay-inner:before {
    left: 0;
    margin-left: -40px;
    margin-top: -2px;
}

.overlay-inner:after {
    right: 0;
    margin-right: -40px;
    margin-top: -2px;
}

.btn-crop {
    position: absolute;
    vertical-align: bottom;
    right: 5px;
    bottom: 5px;
    padding: 6px 10px;
    z-index: 999;
    background-color: #1e8cd4;
    border: none;
    border-radius: 5px;
    color: #FFF;
}
  
  .resize-handle {
    display:none;
  }  
  
  .imgpreview {
border: 1px solid var(--default_b); 
  }



/* file_preview */

.file_preview {
  width:100%;
  height:500px;
  border:1px solid #e3e3e3;
  border-radius:5px;
  position:relative;
  display: flex;
  flex-direction:column;
  background:#fff;
}

.file_preview.fullscreen {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  border-radius: 0;
  z-index: 9000;
}



.certnav_inner {
  width: 50%;
  margin:auto;
}

/* magnificpopup */
.mfp-bg, .mfp-wrap {
  z-index:1101 !important;
}



/* crm css */
 .copyBtn {
    width:25px;
    height:25px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
  }
  
    .copyBtn:hover {
    background:#ccc;    
  }
  
   
  .contactcell {
    position:relative;
    min-width:120px;
  }     
  
.contactcellAction {
visibility: hidden;
   position:absolute;
  top:0;
  right:2px;
  height: 100%;
    display: flex;
    align-items: center;
}


.contactcell:hover .contactcellAction {
    visibility: visible; 
}

@media screen and (max-width: 599px) {
  
  .contactcellAction {
  visibility: visible; 
  }
  /* CSS rules to apply when the screen width is less than 600px */
}

      .cbtable tr td {
        padding:5px 15px 0 0;
      }

.cbmodal {
  display: none;
  position: fixed;
  z-index: 1100;
  right: 0 !important;
  top: 0;
  width: 400px !important;
  height: 100vh !important;
  background-color: #fefefe;
  border-left: 1px solid #888;
}
  
  .cbmodal-header {
    background-color:#E94E89;
    color:#fff;
    padding: 0 20px;
    width: 100%;
    position:relative;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #ContactModalHeader {
    font-size:1.5rem;
  }

.cbmodal-actionmenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 20px;
}

.cbmodal-content {
  
  height: calc(100vh - 105px);
    overflow: auto;
  
  width: 100%;
  background-color:#fff;
}
  
  .cbelement {
    padding: 20px; 
  }
  
  
    .topIcon {
    font-size:1.3rem;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2.5px;
  }
  
  
  #contactBarAction {
    margin-top:10px;
    display:flex;
    align-items:center;
  }
  
#contactBarAction div {
  width:55px;
}

  #contactBarAction .navOption {
    cursor:pointer;
    height:40px;
    width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border-radius:50%;
     background:#ccc !important;
    color: var(--fontcolor) !important;
  }
  

/* Tab Navigation - Modern Pill Style */
.tab {
  display: none;
}
.tab.active {
  display: initial;
}

.pipeline-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pipeline-tabs .tab-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pipeline-tabs .tab-nav-btn:hover {
  color: #334155;
  background: #f1f5f9;
}

.pipeline-tabs .tab-nav-btn.active {
  background: #64748b;
  color: #fff;
}

.pipeline-tabs .tab-nav-btn .badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.pipeline-tabs .tab-nav-btn .badge.bg-primary {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

.pipeline-tabs .tab-nav-btn.active .badge.bg-primary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Legacy tab-nav styles (kept for backwards compatibility) */
.tab-nav-btn {
  background-color: #f2f3f5;
  border: 1px solid var(--bs-border-color);
  border-left: 0;
  cursor: pointer;
}

.tab-nav-btn-start {
  border-radius: 5px 0 0 0;
  border: 1px solid var(--bs-border-color);
}

.tab-nav-btn-end {
  border-radius: 0 5px 0 0;
}

.tab-nav-spacer {
  border-bottom: 1px solid var(--bs-border-color);
}

.tab-nav-btn.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}
  
  

.close {
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 16px;
    color: #fff;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
  


/* Activity */
.activitymessage * {
  font-size:0.8rem;
}

.activitymessage {
  margin-top: 4px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #dee2e6;
}

.activity-change-item {
  padding: 2px 0;
}

.activity-change-field {
  font-weight: 600;
  color: #495057;
}

.activity-change-from {
  color: #6c757d;
  text-decoration: line-through;
}

.activity-change-arrow {
  font-size: 0.7rem;
  color: #adb5bd;
  margin: 0 4px;
}

.activity-change-to {
  color: #28a745;
  font-weight: 500;
}


/* Accordion */

.accordion-list {
  max-height:300px;
  overflow:auto;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* ========================================
   AVATAR DROPDOWN MENU - Modern Style
   ======================================== */

.avatar-menu {
  min-width: 260px;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #fff;
  overflow: hidden;
  animation: avatarMenuSlideIn 0.2s ease-out;
}

@keyframes avatarMenuSlideIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* User Info Header */
.avatar-menu-header {
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.avatar-menu-header .user-name {
  font-weight: 600;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 2px;
  line-height: 1.3;
}

.avatar-menu-header .user-email {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 0;
}

.avatar-menu-header .user-org {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

/* Menu Items Container */
.avatar-menu-items {
  padding: 8px;
}

/* Menu Items */
.avatar-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s ease;
}

.avatar-menu .dropdown-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.avatar-menu .dropdown-item:active {
  background: #e2e8f0;
}

.avatar-menu .dropdown-item i {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #64748b;
  transition: color 0.15s ease;
}

.avatar-menu .dropdown-item:hover i {
  color: #475569;
}

/* Divider */
.avatar-menu .dropdown-divider {
  margin: 4px 8px;
  border-top-color: #e2e8f0;
  opacity: 1;
}

/* Sign Out - Danger Item */
.avatar-menu .dropdown-item.text-danger {
  color: #ef4444;
}

.avatar-menu .dropdown-item.text-danger i {
  color: #ef4444;
}

.avatar-menu .dropdown-item.text-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.avatar-menu .dropdown-item.text-danger:hover i {
  color: #dc2626;
}

/* ============================================
   Event Create Modal - Inline Calendar Styles
   ============================================ */

/* Inline Calendar Container */
.inline-calendar-container {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 8px;
}

.calendar-month-label {
  font-weight: 600;
  font-size: 16px;
  color: #212529;
}

/* Calendar Table */
.inline-calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.inline-calendar-table th {
  text-align: center;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  border: none;
}

.inline-calendar-table td {
  text-align: center;
  padding: 2px;
  vertical-align: top;
  border: none;
}

/* Calendar Day Cell */
.calendar-day {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 2px;
}

.calendar-day:hover {
  background: #f0f0f0;
}

.calendar-day.other-month {
  color: #adb5bd;
  background: #f8f9fa;
}

.calendar-day.other-month:hover {
  background: #e9ecef;
}

/* Today Highlight */
.calendar-day.is-today {
  border: 2px solid var(--primary, #E94E89);
}

/* Selected Date */
.calendar-day.is-selected {
  background: var(--primary, #E94E89);
  color: #fff;
}

.calendar-day.is-selected:hover {
  background: #D13A75;
}

/* Holiday */
.calendar-day.is-holiday {
  background: #fff3cd;
  color: #856404;
}

.calendar-day.is-holiday.is-selected {
  background: var(--primary, #E94E89);
  color: #fff;
}

/* Holiday indicator (small star icon) */
.holiday-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  color: #ffc107;
}

.calendar-day.is-selected .holiday-indicator {
  color: rgba(255, 255, 255, 0.9);
}

/* Holiday tooltip styling */
.tooltip-holiday {
  padding: 6px 10px;
  background: #fff3cd;
  color: #856404;
  font-weight: 500;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Event Indicators (dots) */
.calendar-day-events {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d6efd;
}

.event-dot.conflict {
  background: #dc3545;
}

/* Calendar Legend */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
  font-size: 12px;
  color: #6c757d;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-today {
  border: 2px solid var(--primary, #E94E89);
  background: transparent;
}

.legend-selected {
  background: var(--primary, #E94E89);
}

.legend-event {
  background: #0d6efd;
}

.legend-holiday {
  background: #fff3cd;
  border: 1px solid #ffc107;
}

/* Calendar Tooltip */
.calendar-tooltip {
  position: fixed;
  z-index: 10000;
  background: #212529;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 200px;
  max-width: 280px;
  font-size: 13px;
  pointer-events: none;
}

.tooltip-event {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tooltip-event:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tooltip-event:first-child {
  padding-top: 0;
}

.tooltip-event-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.tooltip-event-time {
  color: #adb5bd;
  font-size: 12px;
}

.tooltip-event-presenter,
.tooltip-event-location {
  font-size: 12px;
  color: #ced4da;
}

/* Conflict Warning Banner */
.conflict-warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.conflict-warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #856404;
  margin-bottom: 8px;
}

.conflict-warning-header i {
  color: #ffc107;
}

.conflict-details {
  font-size: 13px;
  color: #664d03;
  max-height: 120px;
  overflow-y: auto;
}

.conflict-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

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

.conflict-item-type {
  font-weight: 600;
  text-transform: capitalize;
}

.conflict-note {
  margin-top: 8px;
  font-size: 12px;
  color: #856404;
  font-style: italic;
}

/* Selected Dates Container */
.selected-dates-container {
  max-height: 400px;
  overflow-y: auto;
}

/* Date Item Cards Enhancement */
.dateItem.has-conflict {
  border-color: #ffc107 !important;
  background: #fffdf5;
}

.dateItem .conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffc107;
  color: #212529;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  margin-left: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .inline-calendar-container {
    padding: 8px;
  }

  .calendar-day {
    font-size: 12px;
    min-height: 36px;
  }

  .event-dot {
    width: 4px;
    height: 4px;
  }

  .calendar-legend {
    font-size: 10px;
    gap: 8px;
  }
}

/* Course Info Card Styles (Event Creation Step 1) */
.course-info-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 20px;
}

.course-info-card h5 {
  margin-bottom: 12px;
  color: #212529;
  font-weight: 600;
}

.course-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: #495057;
}

.course-info-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.course-info-meta i {
  color: var(--primary);
}

/* Suggested Dates Section */
.suggested-dates-section {
  background: #e8f4f8;
  border-radius: 12px;
  padding: 16px;
  border: 2px dashed #0dcaf0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.suggested-dates-section label {
  color: #0c5460;
}

.suggested-dates-section small {
  display: block;
  margin-top: 8px;
}

/* Upcoming Events Table */
.upcoming-events-container {
  max-height: 250px;
  overflow-y: auto;
}

.upcoming-event-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.15s ease;
}

.upcoming-event-row:last-child {
  border-bottom: none;
}

.upcoming-event-row:hover {
  background-color: #f8f9fa;
}

.upcoming-event-info {
  flex: 1;
}

.upcoming-event-date {
  font-weight: 600;
  color: #212529;
}

.upcoming-event-location {
  font-size: 13px;
  color: #6c757d;
}

.upcoming-event-places {
  text-align: right;
  font-size: 13px;
  padding-left: 12px;
}

.upcoming-event-places.filling {
  color: #ffc107;
  font-weight: 500;
}

.upcoming-event-places.available {
  color: #198754;
}

.upcoming-event-places.full {
  color: #dc3545;
  font-weight: 500;
}

/* No upcoming events message */
#noUpcomingEvents {
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* Step indicator updates for 4 steps */
.step-indicator-4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-indicator-4 .step {
  flex: 1;
  text-align: center;
  padding: 10px 5px;
  position: relative;
}

.step-indicator-4 .step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 50%;
  height: 2px;
  background: #e9ecef;
  transform: translateY(-50%);
}

.step-indicator-4 .step:last-child::after {
  display: none;
}

.step-indicator-4 .step.active {
  color: var(--primary);
  font-weight: 600;
}

.step-indicator-4 .step.completed {
  color: #198754;
}

/* Places Container Styles */
.places-container {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

/* Pricing Options Styles */
.pricing-options {
  display: flex;
  gap: 16px;
}

.pricing-option {
  flex: 1;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-option:has(.form-check-input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 39, 74, 0.1);
}

.pricing-option-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.pricing-option-header .form-check {
  margin: 0;
}

.pricing-option-header .form-check-label {
  cursor: pointer;
}

.pricing-option-body {
  padding: 16px;
}

.pricing-hint {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
}

/* Availability Options Styles */
.availability-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.availability-option {
  cursor: pointer;
  margin: 0;
}

.availability-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.availability-option-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.availability-option:hover .availability-option-content {
  border-color: #dee2e6;
  background: #f8f9fa;
}

.availability-option input[type="radio"]:checked + .availability-option-content {
  border-color: var(--primary);
  background: rgba(26, 39, 74, 0.03);
}

.availability-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  flex-shrink: 0;
}

.availability-option input[type="radio"]:checked + .availability-option-content .availability-icon {
  background: #fff;
}

.availability-details {
  flex: 1;
}

.availability-title {
  font-weight: 600;
  color: #212529;
  margin-bottom: 2px;
}

.availability-desc {
  font-size: 13px;
  color: #6c757d;
}

.availability-check {
  font-size: 24px;
  color: #e9ecef;
  transition: color 0.2s ease;
}

.availability-option input[type="radio"]:checked + .availability-option-content .availability-check {
  color: var(--primary);
}

/* Disabled availability option */
.availability-option.availability-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.availability-option.availability-disabled .availability-option-content {
  pointer-events: none;
  background: #f8f9fa;
}

.availability-option.availability-disabled:hover .availability-option-content {
  border-color: #e9ecef;
  background: #f8f9fa;
}

/* Responsive adjustments for pricing */
@media (max-width: 768px) {
  .pricing-options {
    flex-direction: column;
  }
}

/* ========================================
   BOOKING DASHBOARD - Card-based Layout
   ======================================== */

/* Dashboard Grid Layout */
.booking-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0;
}

.booking-dashboard--full {
  grid-column: 1 / -1;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 992px) {
  .booking-dashboard {
    grid-template-columns: 1fr;
  }
}

/* Booking Header Bar */
.booking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.booking-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.booking-header__back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.booking-header__back:hover {
  color: #E94E89;
}

.booking-header__ref {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.booking-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Booking Cards Base */
.booking-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.booking-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.booking-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.booking-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.booking-card__title i {
  color: #94a3b8;
  font-size: 16px;
}

.booking-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #E94E89;
  text-decoration: none;
  transition: color 0.15s ease;
}

.booking-card__action:hover {
  color: #D13A75;
}

.booking-card__body {
  padding: 16px;
}

.booking-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  cursor: pointer;
  transition: background 0.15s ease;
}

.booking-card__footer:hover {
  background: #f1f5f9;
}

.booking-card__footer i {
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.booking-card__footer[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Places Modal */
.places-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.places-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 320px;
  animation: placesModalIn 0.2s ease;
}

@keyframes placesModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.places-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.places-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.places-modal__close:hover {
  color: #334155;
}

.places-modal__body {
  padding: 16px;
}

.places-modal__body .form-label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 8px;
}

.places-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 8px 8px;
}

/* Status Card - Most Prominent */
.booking-card--status {
  border-color: #e2e8f0;
  background: linear-gradient(135deg, #fafbfc 0%, #fff 100%);
}

.booking-card--status .booking-card__body {
  padding: 20px;
}

/* Status Badge */
.booking-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.booking-status-badge--draft {
  background: #f1f5f9;
  color: #64748b;
}

.booking-status-badge--ready {
  background: #dbeafe;
  color: #2563eb;
}

.booking-status-badge--sent {
  background: #dbeafe;
  color: #1d4ed8;
}

.booking-status-badge--accepted {
  background: #dcfce7;
  color: #166534;
}

.booking-status-badge--invoice {
  background: #fef3c7;
  color: #92400e;
}

.booking-status-badge--paid {
  background: #d1fae5;
  color: #065f46;
}

.booking-status-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Status Stepper */
.booking-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  margin: 16px 0;
}

.booking-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  transition: color 0.2s ease;
}

.booking-stepper__step span {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.booking-stepper__icon i {
  font-size: 14px;
}

.booking-stepper__connector {
  flex: 0 0 40px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 4px 20px 4px;
  transition: background 0.2s ease;
}

/* Stepper States */
.booking-stepper__step--completed {
  color: #22c55e;
}

.booking-stepper__step--completed .booking-stepper__icon {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.booking-stepper__step--completed + .booking-stepper__connector {
  background: #22c55e;
}

.booking-stepper__step--active {
  color: #E94E89;
}

.booking-stepper__step--active .booking-stepper__icon {
  background: #E94E89;
  border-color: #E94E89;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(233, 78, 137, 0.2);
}

/* Key Dates */
.booking-key-dates {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px;
  margin: 0 -20px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
  border-bottom: 1px solid #bbf7d0;
}

.booking-key-dates__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #166534;
}

.booking-key-dates__item i {
  font-size: 14px;
}

.booking-key-dates__label {
  font-weight: 600;
}

.booking-key-dates__value {
  font-weight: 500;
  color: #15803d;
}

.booking-key-dates__item--invoice {
  color: #1e40af;
}

.booking-key-dates__item--invoice .booking-key-dates__value {
  color: #1d4ed8;
}

.booking-key-dates__item--due {
  color: #1e40af;
}

.booking-key-dates__item--due .booking-key-dates__value {
  color: #1d4ed8;
}

.booking-key-dates__item--overdue {
  color: #991b1b;
}

.booking-key-dates__item--overdue .booking-key-dates__value {
  color: #dc2626;
}

/* Next Step Prompt */
.booking-next-step {
  text-align: center;
  padding: 20px;
  margin: 0 -20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.booking-next-step__message {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 16px;
}

.booking-next-step__message i {
  font-size: 18px;
  color: #64748b;
}

.booking-next-step__action .btn-lg {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.booking-next-step__action .btn-lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary Actions */
.booking-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}

/* Legacy - keep for backwards compatibility */
.booking-status-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.booking-primary-action {
  min-width: 160px;
}

/* Data List for Card Content */
.booking-data-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
}

.booking-data-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.booking-data-list dt i {
  width: 16px;
  text-align: center;
  color: #94a3b8;
}

.booking-data-list dd {
  font-size: 14px;
  color: #1e293b;
  margin: 0;
}

/* Event Card */
.booking-event-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.booking-event-meta {
  margin-bottom: 12px;
}

/* Customer Card */
.booking-customer-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* Attendees Card */
.booking-attendees-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.booking-attendees-count {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
}

.booking-attendees-label {
  font-size: 13px;
  color: #64748b;
}

.booking-attendees-list {
  max-height: 200px;
  overflow-y: auto;
}

.booking-attendee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.booking-attendee-row:last-child {
  border-bottom: none;
}

.booking-attendee-name {
  font-weight: 500;
  color: #1e293b;
}

.booking-attendee-email {
  font-size: 13px;
  color: #64748b;
}

/* Pricing Card */
.booking-card--pricing {
  grid-column: 1 / -1;
}

.booking-pricing-table {
  width: 100%;
}

.booking-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #e2e8f0;
}

.booking-totals__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.booking-totals__row--total {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Discounts Section */
.booking-discounts {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.booking-discounts__header {
  font-weight: 600;
  margin-bottom: 12px;
  color: #475569;
}

.booking-discount-code {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.booking-discount-code input {
  max-width: 200px;
}

/* Documents Card */
.booking-documents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-document {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.booking-document__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 8px;
  color: #dc2626;
  font-size: 20px;
}

.booking-document__info {
  flex: 1;
}

.booking-document__name {
  font-weight: 600;
  color: #1e293b;
}

.booking-document__status {
  font-size: 12px;
  color: #64748b;
}

.booking-document__actions {
  display: flex;
  gap: 6px;
}

/* Secondary document style (for historical documents) */
.booking-document--secondary {
  background: #fafbfc;
  border-color: #e2e8f0;
}

/* Emails Card */
.booking-emails-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.booking-email-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.booking-email-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.booking-email-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  border-radius: 50%;
  color: #64748b;
  font-size: 14px;
  flex-shrink: 0;
}

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

.booking-email-item__type {
  font-weight: 500;
  font-size: 13px;
  color: #1e293b;
}

.booking-email-item__recipient {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-email-item__date {
  font-size: 11px;
  color: #94a3b8;
}

.booking-email-item__status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Email Event History */
.booking-email-item-wrapper {
  margin-bottom: 8px;
}

.booking-email-events {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 8px 12px;
  margin-top: -1px;
}

.booking-email-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
}

.booking-email-event:not(:last-child) {
  border-bottom: 1px dashed #e2e8f0;
}

.booking-email-event__time {
  color: #64748b;
}

.email-toggle-events {
  color: #64748b;
  font-size: 12px;
  padding: 2px 6px !important;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
}

.email-toggle-events:hover {
  color: #1e293b;
  background: #f1f5f9;
  border-radius: 4px;
}

/* PDF Method Display */
.booking-email-item__method {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 11px;
  color: #64748b;
}

.booking-email-item__method i {
  font-size: 10px;
}

.activity-pdf-method {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  font-size: 11px;
  color: #64748b;
  font-weight: normal;
}

.activity-pdf-method i {
  font-size: 10px;
  color: #0d6efd;
}

/* Email Action Buttons */
.booking-email-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.email-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.email-action-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.email-action-btn.active {
  background: #e2e8f0;
  color: #0d6efd;
}

.email-view-btn:hover {
  color: #0d6efd;
}

.email-history-btn:hover {
  color: #059669;
}

.email-action-btn i {
  font-size: 14px;
}

/* Email Preview */
.email-preview-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

/* Email Client-style Header */
.email-client-header {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.email-client-subject {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.email-client-meta {
  font-size: 0.875rem;
}

.email-client-row {
  display: flex;
  margin-bottom: 6px;
}

.email-client-row:last-child {
  margin-bottom: 0;
}

.email-client-label {
  color: #64748b;
  min-width: 50px;
  font-weight: 500;
}

.email-client-value {
  color: #334155;
}

.email-preview-body {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.email-preview-body img {
  max-width: 100%;
  height: auto;
}

/* Attendees Card List */
.attendees-card-list {
  margin-top: 12px;
}

.attendees-section {
  margin-bottom: 16px;
}

.attendees-section:last-child {
  margin-bottom: 0;
}

.attendees-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.attendees-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attendee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.attendee-item--placeholder {
  background: #fefce8;
  border-color: #fde68a;
}

.attendee-info {
  flex: 1;
  min-width: 0;
}

.attendee-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: #1e293b;
}

.attendee-email {
  font-size: 0.8rem;
  margin-top: 2px;
}

.attendee-actions {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}

.booking-attendees-summary {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.booking-attendees-summary__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}

/* Timeline Card */
.timeline-filters {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.timeline-filters__toggle .btn.active {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.timeline-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-filter-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.timeline-filter-chip input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.timeline-filter-chip input[type="checkbox"]:checked + span,
.timeline-filter-chip:has(input:checked) {
  color: #1e40af;
}

.booking-timeline {
  max-height: 350px;
  overflow-y: auto;
  padding-right: 8px;
}

.booking-timeline__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.booking-timeline__item:last-child {
  border-bottom: none;
}

.booking-timeline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  flex-shrink: 0;
}

.booking-timeline__icon i {
  font-size: 14px;
  color: #64748b;
}

.booking-timeline__item--note .booking-timeline__icon {
  background: #fef3c7;
}

.booking-timeline__item--note .booking-timeline__icon i {
  color: #d97706;
}

.booking-timeline__content {
  flex: 1;
  min-width: 0;
}

.booking-timeline__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.booking-timeline__author {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}

.booking-timeline__time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.booking-timeline__text {
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}

/* Timeline Date Separator */
.booking-timeline__date-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 0 8px 0;
  margin-top: 8px;
}

.booking-timeline__date-separator:first-child {
  margin-top: 0;
  padding-top: 0;
}

.booking-timeline__date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* Cancelled Booking Alert */
.booking-cancelled-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-weight: 500;
  margin-bottom: 16px;
}

.booking-cancelled-alert i {
  font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .booking-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-stepper {
    flex-wrap: wrap;
    gap: 8px;
  }

  .booking-stepper__connector {
    display: none;
  }

  .booking-status-actions {
    flex-direction: column;
  }

  .booking-primary-action {
    width: 100%;
  }
}

/* ========================================
   Event Timeline Styles
   ======================================== */

.event-timeline {
  max-height: 350px;
  overflow-y: auto;
  padding-right: 8px;
}

.event-timeline__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.event-timeline__item:last-child {
  border-bottom: none;
}

.event-timeline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  flex-shrink: 0;
}

.event-timeline__icon i {
  font-size: 14px;
  color: #64748b;
}

.event-timeline__icon--success {
  background: #dcfce7;
}

.event-timeline__icon--success i {
  color: #16a34a;
}

.event-timeline__icon--primary {
  background: rgba(var(--primary-rgb), 0.1);
}

.event-timeline__icon--primary i {
  color: var(--primary);
}

.event-timeline__item--note .event-timeline__icon {
  background: #fef3c7;
}

.event-timeline__item--note .event-timeline__icon i {
  color: #d97706;
}

.event-timeline__item--booking .event-timeline__icon {
  background: #e0e7ff;
}

.event-timeline__item--booking .event-timeline__icon i {
  color: #4f46e5;
}

.event-timeline__content {
  flex: 1;
  min-width: 0;
}

.event-timeline__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.event-timeline__author {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}

.event-timeline__time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.event-timeline__text {
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}

/* Timeline Date Separator */
.event-timeline__date-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 0 8px 0;
  margin-top: 8px;
}

.event-timeline__date-separator:first-child {
  margin-top: 0;
  padding-top: 0;
}

.event-timeline__date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ========================================
   Event Details Card Layout
   ======================================== */

/* Event Dashboard Grid Layout - similar to booking dashboard */
.event-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  padding: 0;
}

.event-dashboard--full {
  grid-column: 1 / -1;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 800px) {
  .event-dashboard {
    grid-template-columns: 1fr;
  }
}

/* Event Header Bar */
.event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.event-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.event-header__back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.event-header__back:hover {
  color: #E94E89;
}

.event-header__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-header__title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.event-header__subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.event-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Event Cards - inherit from booking cards */
.event-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.event-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.event-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.event-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.event-card__title i {
  color: #94a3b8;
  font-size: 16px;
}

.event-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #E94E89;
  text-decoration: none;
  transition: color 0.15s ease;
}

.event-card__action:hover {
  color: #D13A75;
}

.event-card__body {
  padding: 16px;
}

/* Event Status Card */
.event-card--status {
  border-color: #e2e8f0;
  background: linear-gradient(135deg, #fafbfc 0%, #fff 100%);
}

.event-card--status .event-card__body {
  padding: 20px;
}

/* Event Status Badge */
.event-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.event-status-badge--draft {
  background: #f1f5f9;
  color: #64748b;
}

.event-status-badge--confirmed {
  background: #dcfce7;
  color: #166534;
}

.event-status-badge--pending {
  background: #fef3c7;
  color: #92400e;
}

.event-status-badge--completed {
  background: #dbeafe;
  color: #1e40af;
}

.event-status-badge--cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Event Data List */
.event-data-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-data-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  font-weight: normal;
}

.event-data-list dt i {
  width: 16px;
  text-align: center;
  color: #94a3b8;
}

.event-data-list dd {
  font-size: 13px;
  color: #1e293b;
  margin: 0;
  text-align: right;
}

/* Event Next Step Prompt */
.event-next-step {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.event-next-step__message {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #475569;
  margin-bottom: 12px;
}

.event-next-step__action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Event Secondary Actions */
.event-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

/* Event Attendees Card */
.event-attendees-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.event-attendee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.event-attendee-item__info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-attendee-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-weight: 600;
  font-size: 12px;
}

.event-attendee-item__name {
  font-weight: 500;
  color: #1e293b;
}

.event-attendee-item__org {
  font-size: 12px;
  color: #64748b;
}

.event-attendee-item__status {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Event Dates Card */
.event-dates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-date-item {
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.event-date-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.event-date-item__day {
  font-weight: 600;
  color: #1e293b;
}

.event-date-item__details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #64748b;
}

.event-date-item__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-date-item__label {
  font-size: 11px;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Event Bookings Card */
.event-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: background 0.15s ease;
}

.event-booking-item:hover {
  background: #f1f5f9;
}

.event-booking-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-booking-item__ref {
  font-weight: 600;
  color: #E94E89;
  text-decoration: none;
}

.event-booking-item__ref:hover {
  text-decoration: underline;
}

.event-booking-item__org {
  font-size: 13px;
  color: #64748b;
}

.event-booking-item__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Event Notes Card */
.event-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.event-note-item {
  padding: 10px 12px;
  background: #fef3c7;
  border-radius: 8px;
  border: 1px solid #fde68a;
}

.event-note-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.event-note-item__author {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
}

.event-note-item__time {
  font-size: 11px;
  color: #b45309;
}

.event-note-item__text {
  font-size: 13px;
  color: #78350f;
}

.event-note-input {
  display: flex;
  gap: 8px;
}

.event-note-input input {
  flex: 1;
}

/* Event Presenters Card */
.event-presenters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-presenter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.event-presenter-item__info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-presenter-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e40af;
  font-weight: 600;
  font-size: 14px;
}

.event-presenter-item__name {
  font-weight: 500;
  color: #1e293b;
}

.event-presenter-item__po {
  font-size: 12px;
  color: #64748b;
}

/* Event Files Card */
.event-files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.event-file-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  color: #dc2626;
  font-size: 18px;
}

.event-file-item__info {
  flex: 1;
}

.event-file-item__name {
  font-weight: 500;
  color: #1e293b;
}

.event-file-item__size {
  font-size: 12px;
  color: #64748b;
}

.event-file-item__actions {
  display: flex;
  gap: 6px;
}

/* Full width cards */
.event-card--full {
  grid-column: 1 / -1;
}

/* Wide cards (2 columns) */
.event-card--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .event-card--wide {
    grid-column: 1 / -1;
  }
}

/* Event Settings Card */
.event-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .event-settings-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .event-settings-grid {
    grid-template-columns: 1fr;
  }
}

.event-settings-section {
  display: flex;
  flex-direction: column;
}

/* Event Settings Inline Grid (for combined card) */
.event-settings-grid-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.event-settings-inline-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-settings-inline-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  flex-shrink: 0;
}

.event-settings-inline-item__icon i {
  font-size: 12px;
  color: #64748b;
}

.event-settings-inline-item__label {
  font-size: 12px;
  color: #64748b;
}

.event-settings-inline-item__value {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

@media (max-width: 640px) {
  .event-settings-grid-inline {
    gap: 12px 16px;
  }

  .event-settings-inline-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}

/* Event Dates Table */
.event-dates-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}

.event-dates-table thead th {
  text-align: left;
  font-weight: 500;
  color: #64748b;
  padding: 4px 6px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.event-dates-table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 11px;
}

.event-dates-table tbody tr:last-child td {
  border-bottom: none;
}

.event-dates-table tbody tr:hover {
  background: #f8fafc;
}

.event-dates-table__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
  font-size: 11px;
  border-radius: 4px;
}

.event-settings-section__title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-settings-section__title i {
  color: var(--primary);
}

.event-settings-section__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.event-settings-item:last-child {
  border-bottom: none;
}

.event-settings-item__label {
  font-size: 13px;
  color: #64748b;
}

.event-settings-item__value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.event-settings-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Event responsive adjustments */
@media (max-width: 768px) {
  .event-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-data-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .event-data-list dd {
    text-align: left;
    padding-left: 24px;
  }

  .event-secondary-actions {
    flex-direction: column;
  }
}

/* ========================================
   Booking Item Layout (Event Bookings)
   ======================================== */

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

.booking-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.booking-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
}

.booking-item__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.booking-item__source {
  flex-shrink: 0;
}

.booking-item__key {
  font-weight: 600;
  color: #1e293b;
  flex-shrink: 0;
}

.booking-item__status {
  flex-shrink: 0;
}

.booking-item__org {
  color: #64748b;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-item__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.booking-item__badges .badge {
  cursor: pointer;
}

.booking-item__toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #64748b;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.booking-item__toggle:hover {
  color: #1e293b;
}

.booking-item__details {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 16px;
}

.booking-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.booking-detail-section {
  min-width: 0;
}

.booking-detail-section__title {
  font-weight: 600;
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.booking-detail-section__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.detail-label {
  color: #64748b;
  flex-shrink: 0;
}

.detail-value {
  color: #1e293b;
  text-align: right;
  word-break: break-word;
}

/* Pipeline rows */
.pipeline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}

.pipeline-stage {
  color: #64748b;
  min-width: 80px;
}

.pipeline-date {
  color: #94a3b8;
  font-size: 12px;
  margin-left: auto;
}

.pipeline-row .dropdown {
  margin-left: 4px;
}

.pipeline-row .dropdown-toggle {
  color: #64748b;
  padding: 4px;
  cursor: pointer;
}

.pipeline-row .dropdown-toggle:hover {
  color: #1e293b;
}

/* Booking actions */
.booking-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

/* Decline section special styling */
.booking-detail-section--decline {
  grid-column: 1 / -1;
  background: #fef2f2;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #fecaca;
}

.booking-detail-section--decline .booking-detail-section__title {
  border-bottom-color: #fecaca;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 992px) {
  .booking-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-detail-section--pipeline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .booking-item__header {
    flex-wrap: wrap;
  }

  .booking-item__main {
    width: 100%;
  }

  .booking-item__badges {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }

  .booking-item__toggle {
    position: absolute;
    right: 8px;
    top: 12px;
  }

  .booking-item__header {
    position: relative;
    padding-right: 40px;
  }

  .booking-details-grid {
    grid-template-columns: 1fr;
  }

  .booking-item__actions {
    flex-direction: column;
  }

  .booking-item__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Event Bookings Table Layout */
.event-bookings-table {
  font-size: 13px;
}

.event-bookings-table thead th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
  padding: 10px 12px;
  white-space: nowrap;
}

.event-bookings-table tbody tr.booking-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.event-bookings-table tbody tr.booking-row:hover {
  background-color: #f8fafc;
}

.event-bookings-table tbody tr.booking-row td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
}

.event-bookings-table tbody tr.booking-row.expanded {
  background-color: #f1f5f9;
}

.event-bookings-table tbody tr.booking-row.expanded td {
  border-bottom-color: transparent;
}

.event-bookings-table tbody tr.booking-details-row td {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.booking-details-expanded {
  padding: 16px 20px;
}

.event-bookings-table .rs_btn_rotate {
  transition: transform 0.2s ease;
}

.event-bookings-table .booking-row.expanded .rs_btn_rotate {
  transform: rotate(90deg);
}

/* ========================================
   Booking Expanded Panel (New Design)
   ======================================== */

.booking-expanded {
  padding: 20px 24px;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

/* Header with Stage & Link */
.booking-expanded__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.booking-expanded__stage {
  display: flex;
  align-items: center;
}

.booking-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
}

.booking-stage-badge i {
  font-size: 14px;
}

.booking-stage-badge.stage--draft {
  background: #f3f4f6;
  color: #6b7280;
}

.booking-stage-badge.stage--sent {
  background: #dbeafe;
  color: #1d4ed8;
}

.booking-stage-badge.stage--accepted {
  background: #dcfce7;
  color: #15803d;
}

.booking-stage-badge.stage--declined {
  background: #fee2e2;
  color: #b91c1c;
}

.booking-stage-badge.stage--invoice {
  background: #fef3c7;
  color: #b45309;
}

.booking-stage-badge.stage--invoice-sent {
  background: #e0e7ff;
  color: #4338ca;
}

.booking-stage-badge.stage--paid {
  background: #d1fae5;
  color: #047857;
}

.booking-expanded__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.booking-expanded__link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.booking-expanded__link i {
  font-size: 12px;
}

/* Alert Banner */
.booking-expanded__alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}

.booking-expanded__alert i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.booking-expanded__alert--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.booking-expanded__alert--danger i {
  color: #dc2626;
}

.booking-expanded__alert div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-expanded__alert strong {
  font-weight: 600;
}

.booking-expanded__alert span {
  opacity: 0.85;
}

/* Main Grid Layout */
.booking-expanded__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Left Column: Contact Info */
.booking-expanded__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-info-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-info-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.booking-info-card__row > i {
  width: 18px;
  color: #64748b;
  font-size: 14px;
  margin-top: 2px;
  text-align: center;
  flex-shrink: 0;
}

.booking-info-card__row > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.booking-info-card__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.booking-info-card__value {
  font-size: 13px;
  color: #1e293b;
  word-break: break-word;
}

.booking-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
}

.booking-info-meta span {
  display: inline-flex;
  align-items: center;
}

.booking-info-meta i {
  color: #94a3b8;
}

/* Right Column: Pipeline Tracker */
.booking-expanded__pipeline {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
}

.pipeline-tracker {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Pipeline Step */
.pipeline-tracker__step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  position: relative;
}

.pipeline-tracker__step:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}

/* Connector line */
.pipeline-tracker__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 48px;
  bottom: -12px;
  width: 2px;
  background: #e2e8f0;
  transform: translateX(-50%);
}

/* Step Icon */
.pipeline-tracker__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #f1f5f9;
  color: #94a3b8;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Step Content */
.pipeline-tracker__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.pipeline-tracker__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.pipeline-tracker__status {
  font-size: 12px;
  color: #64748b;
}

.pipeline-tracker__date {
  font-size: 11px;
  color: #94a3b8;
}

/* Step Actions */
.pipeline-tracker__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 6px;
}

.pipeline-tracker__actions .btn {
  padding: 5px 10px;
  font-size: 11px;
}

/* Status Variants */
.pipeline-tracker__step--waiting .pipeline-tracker__icon {
  background: #f1f5f9;
  color: #94a3b8;
}

.pipeline-tracker__step--pending .pipeline-tracker__icon {
  background: #fef3c7;
  color: #d97706;
}

.pipeline-tracker__step--sent .pipeline-tracker__icon {
  background: #dbeafe;
  color: #2563eb;
}

.pipeline-tracker__step--complete .pipeline-tracker__icon {
  background: #dcfce7;
  color: #16a34a;
}

.pipeline-tracker__step--error .pipeline-tracker__icon {
  background: #fef2f2;
  color: #dc2626;
}

.pipeline-tracker__step--complete .pipeline-tracker__status {
  color: #16a34a;
}

.pipeline-tracker__step--error .pipeline-tracker__status {
  color: #dc2626;
}

.pipeline-tracker__step--complete::before {
  background: #22c55e;
}

/* Quick Actions Bar */
.booking-expanded__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.booking-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.booking-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
  text-decoration: none;
}

.booking-action-btn i {
  font-size: 13px;
  color: #64748b;
}

.booking-action-btn--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.booking-action-btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.booking-action-btn--danger i {
  color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
  .booking-expanded__grid {
    grid-template-columns: 1fr;
  }

  .pipeline-tracker__step {
    grid-template-columns: 32px 1fr;
  }

  .pipeline-tracker__actions {
    grid-column: 2;
    padding-top: 8px;
  }

  .booking-expanded__actions {
    flex-wrap: wrap;
  }

  .booking-action-btn {
    flex: 1;
    justify-content: center;
    min-width: 100px;
  }
}

/* ========================================
   File Explorer (Shared Drive)
   ======================================== */

.file-explorer {
  background: #ffffff;
  min-height: 300px;
}

/* Toolbar */
.file-explorer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.file-explorer__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.file-explorer__nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.file-explorer__nav-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

/* Breadcrumb */
.file-explorer__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}

.file-explorer__breadcrumb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #64748b;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.file-explorer__breadcrumb-home:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.file-explorer__breadcrumb-path {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.file-explorer__breadcrumb-sep {
  color: #cbd5e1;
  margin: 0 4px;
  flex-shrink: 0;
}

.file-explorer__breadcrumb-item {
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.file-explorer__breadcrumb-item:hover {
  color: #1e293b;
  text-decoration: none;
}

.file-explorer__breadcrumb-current {
  color: #1e293b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toolbar Actions */
.file-explorer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.file-explorer__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.file-explorer__action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
  text-decoration: none;
}

.file-explorer__action-btn i {
  font-size: 14px;
}

.file-explorer__action-btn--primary {
  background: #1a274a;
  border-color: #1a274a;
  color: #ffffff;
}

.file-explorer__action-btn--primary:hover {
  background: #2a3a5a;
  border-color: #2a3a5a;
  color: #ffffff;
}

/* Storage Bar */
.file-explorer__storage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
}

.file-explorer__storage-bar {
  flex: 1;
  max-width: 200px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

.file-explorer__storage-used {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.file-explorer__storage-text {
  color: #64748b;
  display: flex;
  gap: 4px;
}

.file-explorer__storage-text span:first-child {
  font-weight: 600;
  color: #1e293b;
}

/* Notice Bar */
.file-explorer__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  font-size: 11px;
  color: #92400e;
}

.file-explorer__notice i {
  color: #d97706;
}

/* Content Area */
.file-explorer__content {
  padding: 16px;
  min-height: 200px;
}

.file-explorer__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  color: #64748b;
  font-size: 13px;
}

.file-explorer__loading i {
  font-size: 24px;
  color: #94a3b8;
}

.file-explorer__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 16px;
  color: #dc2626;
  font-size: 13px;
}

/* Empty State */
.file-explorer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
}

.file-explorer__empty-icon {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.file-explorer__empty-text {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
}

.file-explorer__empty-hint {
  font-size: 12px;
  color: #94a3b8;
}

/* Files List - typical file explorer style */
.file-explorer__grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

/* File Item - row style like Windows/macOS file explorer */
.file-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s ease;
}

.file-item:hover {
  background: #f1f5f9;
}

.file-item--folder {
  background: #fff;
}

.file-item--folder:hover {
  background: #fefce8;
}

/* File Icon - inline, small */
.file-item__icon {
  flex-shrink: 0;
  width: 16px;
  font-size: 14px;
  color: #64748b;
  text-align: center;
}

.file-item--folder .file-item__icon {
  color: #eab308;
}

/* File Link - for files */
.file-item__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.file-item__link:hover {
  text-decoration: none;
  color: inherit;
}

/* File Name */
.file-item__name {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item--folder .file-item__name {
  font-weight: 500;
}

/* File Meta - size, date */
.file-item__meta {
  flex-shrink: 0;
  font-size: 12px;
  color: #94a3b8;
  min-width: 60px;
  text-align: right;
}

/* File Actions - right side */
.file-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.1s ease;
  margin-left: auto;
}

.file-item:hover .file-item__actions {
  opacity: 1;
}

.file-item__action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #64748b;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: all 0.1s ease;
  font-size: 12px;
}

.file-item__action:hover {
  background: #e2e8f0;
  color: #1e293b;
  text-decoration: none;
}

.file-item__action--danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Responsive */
@media (max-width: 640px) {
  .file-explorer__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .file-explorer__nav {
    order: 2;
  }

  .file-explorer__actions {
    order: 1;
    justify-content: flex-end;
  }

  .file-explorer__storage {
    flex-wrap: wrap;
  }

  .file-item__actions {
    opacity: 1;
  }
}

/* ========================================
   Settings Details Card Layout
   ======================================== */

/* Settings Dashboard Grid Layout */
.settings-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0;
}

.settings-dashboard--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .settings-dashboard {
    grid-template-columns: 1fr;
  }
}

/* Settings Header Bar */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.settings-header__title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.settings-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Settings Cards */
.settings-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.settings-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.settings-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.settings-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.settings-card__title i {
  color: #94a3b8;
  font-size: 16px;
}

.settings-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #E94E89;
  text-decoration: none;
  transition: color 0.15s ease;
}

.settings-card__action:hover {
  color: #D13A75;
}

.settings-card__body {
  padding: 16px;
}

/* Settings Data List */
.settings-data-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-data-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  font-weight: normal;
}

.settings-data-list dt i {
  width: 16px;
  text-align: center;
  color: #94a3b8;
}

.settings-data-list dd {
  font-size: 13px;
  color: #1e293b;
  margin: 0;
}

/* Settings full width */
.settings-card--full {
  grid-column: 1 / -1;
}

/* Settings responsive */
@media (max-width: 768px) {
  .settings-data-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-data-list dd {
    padding-left: 24px;
    margin-bottom: 8px;
  }
}

/* Custom Bootstrap Tooltip Styling - matches sidebar tooltips */
.tooltip {
  --bs-tooltip-bg: #1e293b;
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
  font-family: inherit;
}

.tooltip-inner {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}

.tooltip .tooltip-arrow::before {
  border-top-color: #1e293b;
  border-bottom-color: #1e293b;
  border-left-color: #1e293b;
  border-right-color: #1e293b;
}

/* Custom tooltip element (JS positioned, matches sidebar style) */
.custom-tooltip {
  position: fixed;
  padding: 6px 12px;
  background: #1e293b;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease);
  z-index: 10000;
  box-shadow: var(--shadow-md);
}

.custom-tooltip.visible {
  opacity: 1;
  visibility: visible;
}