@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');
/* ==========================================================================
   CARETOCHINA MEDICAL STAFF PLUGIN - STRICTLY SCOPED CSS SYSTEM
   ========================================================================== */

/* GLOBAL SCOPED BOX-SIZING RESET */
.careyou-staff-portal-wrapper,
.caretochina-staff-portal-wrapper,
.careyou-staff-portal-wrapper,
.caretochina-staff-portal-wrapper * {
  box-sizing: border-box !important;
}

/* SCOPED DESIGN TOKENS & UTILITIES FOR MEDICAL STAFF PLUGIN */
.careyou-staff-portal-wrapper,
.caretochina-staff-portal-wrapper {
  --cyms-primary: #023743;
  --cyms-primary-hover: #01252D;
  --cyms-secondary-light: rgba(235, 170, 106, 0.15);
  --cyms-accent: #F59E0B;
  --cyms-accent-light: #FEF3C7;
  --cyms-bg-light: #F8FAFC;
  --cyms-bg-card: #FFFFFF;
  --cyms-text-dark: #0F172A;
  --cyms-text-light: #5A6B82;
  --cyms-border-color: #E2E8F0;
  --cyms-success: #10B981;
  --cyms-danger: #EF4444;
  --cyms-radius-card: 24px;
  --cyms-radius-btn: 999px;
  --cyms-radius-sm: 14px;
  --cyms-font-heading: 'Lato', sans-serif;
  --cyms-font-body: 'Heebo', sans-serif;
  --cyms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  width: 100% !important;
  max-width: 100% !important;
  margin: 15px auto !important;
  padding: 0 10px !important;
  font-family: var(--cyms-font-body) !important;
  color: var(--cyms-text-dark) !important;
  box-sizing: border-box !important;
}

/*Staff login page*/
.ctc-staff-login-card {
  background-color: #F8FAFC !important;
}


/* SCOPED TOP BANNER */
.careyou-staff-portal-wrapper .staff-header-banner,
.caretochina-staff-portal-wrapper .staff-header-banner {
  width: 100% !important;
  background: #FFFFFF !important;
  color: #023743 !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 5px solid #023743 !important;
  padding: 24px 28px !important;
  border-radius: var(--cyms-radius-card) !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 118, 110, 0.25) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.careyou-staff-portal-wrapper .staff-header-banner h2,
.caretochina-staff-portal-wrapper .staff-header-banner h2 {
  color: #023743 !important;
  font-family: var(--cyms-font-heading) !important;
  font-size: 22px !important;
  margin: 0 0 4px 0 !important;
}

.careyou-staff-portal-wrapper .staff-header-banner p,
.caretochina-staff-portal-wrapper .staff-header-banner p {
  color: #5A6B82 !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

/* SCOPED GRID LAYOUT */
.careyou-staff-portal-wrapper .staff-container,
.caretochina-staff-portal-wrapper .staff-container {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.careyou-staff-portal-wrapper .staff-sidebar,
.caretochina-staff-portal-wrapper .staff-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.careyou-staff-portal-wrapper .staff-tab,
.caretochina-staff-portal-wrapper .staff-tab {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 16px 20px !important;
  border-radius: var(--cyms-radius-sm) !important;
  background: var(--cyms-bg-card) !important;
  border: 1px solid var(--cyms-border-color) !important;
  font-family: var(--cyms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--cyms-text-dark) !important;
  cursor: pointer !important;
  transition: var(--cyms-transition) !important;
  text-align: left !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.careyou-staff-portal-wrapper .staff-tab.active,
.caretochina-staff-portal-wrapper .staff-tab.active,
.careyou-staff-portal-wrapper .staff-tab:hover,
.caretochina-staff-portal-wrapper .staff-tab:hover {
  background: var(--cyms-primary) !important;
  color: #FFF !important;
  border-color: var(--cyms-primary) !important;
}

.careyou-staff-portal-wrapper .staff-panel,
.caretochina-staff-portal-wrapper .staff-panel {
  display: none;
  width: 100% !important;
  box-sizing: border-box !important;
}

.careyou-staff-portal-wrapper .staff-panel.active,
.caretochina-staff-portal-wrapper .staff-panel.active {
  display: block !important;
  animation: cymsFadeIn 0.3s ease !important;
}

/* SCOPED GLASS CARDS */
.careyou-staff-portal-wrapper .staff-panel .glass-card,
.caretochina-staff-portal-wrapper .staff-panel .glass-card {
  background: var(--cyms-bg-card) !important;
  border: 1px solid var(--cyms-border-color) !important;
  border-radius: var(--cyms-radius-card) !important;
  padding: 32px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 118, 110, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* SCOPED ACTION BUTTONS */
.careyou-staff-portal-wrapper .btn-action-accept,
.caretochina-staff-portal-wrapper .btn-action-accept {
  background: var(--cyms-success) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: var(--cyms-radius-btn) !important;
  font-family: var(--cyms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.careyou-staff-portal-wrapper .btn-action-accept:hover,
.caretochina-staff-portal-wrapper .btn-action-accept:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

.careyou-staff-portal-wrapper .btn-action-waiting,
.caretochina-staff-portal-wrapper .btn-action-waiting {
  background: var(--cyms-accent-light) !important;
  color: #B45309 !important;
  border: 1px solid var(--cyms-accent) !important;
  padding: 8px 16px !important;
  border-radius: var(--cyms-radius-btn) !important;
  font-family: var(--cyms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.careyou-staff-portal-wrapper .btn-action-waiting:hover,
.caretochina-staff-portal-wrapper .btn-action-waiting:hover {
  background: var(--cyms-accent) !important;
  color: #FFFFFF !important;
}

.careyou-staff-portal-wrapper .btn-action-reject,
.caretochina-staff-portal-wrapper .btn-action-reject {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border: 1px solid var(--cyms-danger) !important;
  padding: 8px 16px !important;
  border-radius: var(--cyms-radius-btn) !important;
  font-family: var(--cyms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.careyou-staff-portal-wrapper .btn-action-reject:hover,
.caretochina-staff-portal-wrapper .btn-action-reject:hover {
  background: var(--cyms-danger) !important;
  color: #FFFFFF !important;
}

@keyframes cymsFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* STAFF PORTAL SIDEBAR COLLAPSE SYSTEM */
.careyou-staff-portal-wrapper .staff-container,
.caretochina-staff-portal-wrapper .staff-container {
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.careyou-staff-portal-wrapper .staff-sidebar,
.caretochina-staff-portal-wrapper .staff-sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.staff-sidebar-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cyms-border-color) !important;
  background: var(--cyms-bg-card) !important;
  color: var(--cyms-text-light) !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
  transition: all 0.2s ease !important;
}

.staff-sidebar-toggle-btn:hover {
  background: var(--cyms-bg-light) !important;
  color: var(--cyms-primary) !important;
}

/* Collapsed classes */
.careyou-staff-portal-wrapper .staff-container.sidebar-collapsed,
.caretochina-staff-portal-wrapper .staff-container.sidebar-collapsed {
  grid-template-columns: 88px minmax(0, 1fr) !important;
}

.careyou-staff-portal-wrapper .staff-sidebar.collapsed,
.caretochina-staff-portal-wrapper .staff-sidebar.collapsed {
  width: 88px !important;
  padding: 16px 10px !important;
  align-items: center !important;
}

.careyou-staff-portal-wrapper .staff-sidebar.collapsed .staff-sidebar-toggle-btn,
.caretochina-staff-portal-wrapper .staff-sidebar.collapsed .staff-sidebar-toggle-btn {
  align-self: center !important;
}

.careyou-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab,
.caretochina-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab {
  justify-content: center !important;
  padding: 14px 0 !important;
  width: 48px !important;
}

.careyou-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab span,
.caretochina-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab span {
  display: none !important;
}

.careyou-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab i,
.caretochina-staff-portal-wrapper .staff-sidebar.collapsed .staff-tab i {
  margin: 0 !important;
  font-size: 18px !important;
}

/* Chrome/Cross-browser Layout Safety Rules */
.careyou-staff-portal-wrapper .staff-content,
.caretochina-staff-portal-wrapper .staff-content {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* STAFF CHAT LAYOUT & THREAD */
.staff-chat-layout {
  display: flex !important;
  height: 520px !important;
  background: #FFF !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.staff-chat-sidebar {
  width: 220px !important;
  min-width: 180px !important;
  max-width: 240px !important;
  border-right: 1px solid #E2E8F0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #F8FAFC !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.staff-chat-thread {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#staff-chat-box {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 20px !important;
  background: #F8FAFC !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

.careyou-staff-portal-wrapper .chat-msg,
.caretochina-staff-portal-wrapper .chat-msg {
  width: 100% !important;
  box-sizing: border-box !important;
}

.careyou-staff-portal-wrapper .chat-msg .msg-bubble,
.caretochina-staff-portal-wrapper .chat-msg .msg-bubble {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 82% !important;
  box-sizing: border-box !important;
}

#staff-chat-form {
  padding: 12px 16px !important;
  border-top: 1px solid #E2E8F0 !important;
  background: #FFF !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

#staff_chat_input {
  flex: 1 1 140px !important;
  min-width: 110px !important;
  box-sizing: border-box !important;
}

#staff-chat-req-pay-btn,
#staff-chat-form button[type="submit"] {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.staff-chat-patient-list {
  flex: 1 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

.staff-chat-patient-item {
  padding: 12px 16px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: #FFFFFF !important;
  border-left: 4px solid transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

.staff-chat-patient-item:hover {
  background: #F1F5F9 !important;
}

.staff-chat-patient-item.active {
  background: rgba(235, 170, 106, 0.15) !important;
  border-left: 4px solid #023743 !important;
}

.staff-chat-item-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
}

.staff-chat-item-name-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.staff-chat-item-name {
  font-weight: 700 !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.staff-chat-item-guest-tag {
  background: #FEF3C7 !important;
  color: #92400E !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.staff-chat-item-time {
  font-size: 11px !important;
  color: #64748B !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-weight: 500 !important;
}

.staff-chat-item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.staff-chat-item-code {
  font-size: 11px !important;
  color: #023743 !important;
  font-weight: 700 !important;
  font-family: monospace !important;
  flex-shrink: 0 !important;
}

.staff-chat-item-snippet {
  font-size: 12px !important;
  color: #64748B !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}

.staff-chat-item-snippet.has-unread {
  color: #0F172A !important;
  font-weight: 700 !important;
}

.staff-chat-item-unread-badge {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
}



/* RESPONSIVE LAYOUT SYSTEM FOR LAPTOP, TABLET & MOBILE */
@media (max-width: 1200px) {
  .careyou-staff-portal-wrapper .staff-container,
  .caretochina-staff-portal-wrapper .staff-container {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .staff-chat-sidebar {
    width: 200px !important;
    min-width: 170px !important;
  }
  #staff-chat-req-pay-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 991px) {
  .careyou-staff-portal-wrapper .staff-container,
  .caretochina-staff-portal-wrapper .staff-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .careyou-staff-portal-wrapper .staff-sidebar,
  .caretochina-staff-portal-wrapper .staff-sidebar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .careyou-staff-portal-wrapper .staff-tab,
  .caretochina-staff-portal-wrapper .staff-tab {
    width: auto !important;
    flex: 1 1 calc(50% - 8px) !important;
  }
  .staff-sidebar-toggle-btn {
    display: none !important;
  }
  .staff-chat-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .staff-chat-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: 170px !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }
  #staff-chat-box {
    height: 340px !important;
    max-height: 340px !important;
  }
}

@media (max-width: 640px) {
  .careyou-staff-portal-wrapper .staff-tab,
  .caretochina-staff-portal-wrapper .staff-tab {
    flex: 1 1 100% !important;
  }
  #staff-chat-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #staff_chat_input {
    width: 100% !important;
  }
  #staff-chat-req-pay-btn,
  #staff-chat-form button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
  #staff-bell-dropdown {
    width: calc(100vw - 32px) !important;
    right: -70px !important;
  }
}

/* NOTIFICATION DROPDOWN STYLES */
#staff-bell-dropdown {
  animation: ctcDropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes ctcDropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.staff-dropdown-item {
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.staff-dropdown-item:hover {
  background: #F8FAFC !important;
}

.staff-dropdown-item:last-child {
  border-bottom: none !important;
}