/* ═══════════════════════════════════════════════════════════════════
   Community Schedules — Frontend CSS v1.0.0
   Design tokens: identical to community-hub design system
   #1a1a2e shell · #4f46e5 primary · #818cf8 accent · 'Segoe UI'
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────────── */
#cs-app {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #f7f8fc;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.cs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px 12px;
  background: #fff;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
}
.cs-toolbar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-toolbar-right { display: flex; align-items: center; gap: 10px; }

.cs-nav-btn {
  background: #f7f8fc; border: 1px solid #e8eaf0; border-radius: 8px;
  width: 36px; height: 36px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #4f46e5; transition: background .13s;
  flex-shrink: 0;
}
.cs-nav-btn:hover { background: #ede9fe; }

.cs-week-label {
  font-size: 15px; font-weight: 700; color: #1a1a2e;
  min-width: 160px; text-align: center;
}

.cs-today-btn {
  background: #4f46e5; color: #fff; border: none; border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .13s;
}
.cs-today-btn:hover { background: #3730a3; }

.cs-count-badge {
  font-size: 12px; font-weight: 700; color: #888;
  background: #f0f0f0; border-radius: 20px; padding: 3px 12px;
}

/* ── Week strip ─────────────────────────────────────────────────── */
.cs-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
}

.cs-wday {
  background: #f7f8fc;
  border: 2px solid #e8eaf0;
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color .13s, background .13s, transform .12s;
  user-select: none;
  position: relative;
}
.cs-wday:hover { background: #ede9fe; border-color: #818cf8; transform: translateY(-1px); }
.cs-wday.cs-wday-today {
  background: #4f46e5; border-color: #4f46e5;
}
.cs-wday.cs-wday-selected {
  background: #ede9fe; border-color: #4f46e5;
}
.cs-wday.cs-wday-today.cs-wday-selected {
  background: #3730a3; border-color: #3730a3;
}

.cs-wday-name {
  font-size: 10px; font-weight: 700; color: #aaa;
  text-transform: uppercase; letter-spacing: .05em;
}
.cs-wday-today  .cs-wday-name { color: rgba(255,255,255,.7); }
.cs-wday-selected .cs-wday-name { color: #4f46e5; }
.cs-wday-today.cs-wday-selected .cs-wday-name { color: rgba(255,255,255,.8); }

.cs-wday-num {
  font-size: 18px; font-weight: 800; color: #1a1a2e;
  margin: 3px 0;
}
.cs-wday-today    .cs-wday-num { color: #fff; }
.cs-wday-selected .cs-wday-num { color: #4f46e5; }
.cs-wday-today.cs-wday-selected .cs-wday-num { color: #fff; }

.cs-wday-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; min-height: 8px;
}
.cs-wday-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #28a745;
}
.cs-wday-today    .cs-wday-dot { background: rgba(255,255,255,.8); }
.cs-wday-selected .cs-wday-dot { background: #4f46e5; }
.cs-wday-today.cs-wday-selected .cs-wday-dot { background: rgba(255,255,255,.9); }

/* ── Day heading ────────────────────────────────────────────────── */
.cs-day-heading {
  padding: 14px 20px 6px;
  font-size: 14px; font-weight: 700; color: #1a1a2e;
  flex-shrink: 0;
}

/* ── Sessions list ──────────────────────────────────────────────── */
.cs-sessions-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Session card ───────────────────────────────────────────────── */
.cs-session-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8eaf0;
  border-left: 5px solid #4f46e5;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.cs-session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,.1);
}
.cs-session-card.cs-type-group       { border-left-color: #4f46e5; }
.cs-session-card.cs-type-one_on_one  { border-left-color: #28a745; }
.cs-session-card.cs-type-webinar     { border-left-color: #f59e0b; }
.cs-session-card.cs-status-live      { border-left-color: #dc3545; animation: cs-live-pulse 2s ease-in-out infinite; }
.cs-session-card.cs-status-cancelled { opacity: .55; border-left-color: #bbb; cursor: default; }
.cs-session-card.cs-status-cancelled:hover { transform: none; box-shadow: none; }

@keyframes cs-live-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
  50%      { box-shadow: 0 4px 16px rgba(220,53,69,.2); }
}

.cs-slot-time {
  font-size: 13px; font-weight: 800; color: #4f46e5;
  min-width: 72px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cs-type-one_on_one  .cs-slot-time { color: #1e7e34; }
.cs-type-webinar     .cs-slot-time { color: #b45309; }
.cs-status-live      .cs-slot-time { color: #dc3545; }
.cs-status-cancelled .cs-slot-time { color: #bbb; }

.cs-slot-info { flex: 1; min-width: 0; }
.cs-slot-title {
  font-size: 14px; font-weight: 700; color: #1a1a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-slot-sub {
  font-size: 12px; color: #888; margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cs-slot-sub-item { display: flex; align-items: center; gap: 3px; }

/* Badge */
.cs-badge {
  font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 4px 12px;
  flex-shrink: 0; white-space: nowrap;
}
.cs-badge-live      { background: #fde8e8; color: #c0392b; }
.cs-badge-upcoming  { background: #e8f5e9; color: #1e7e34; }
.cs-badge-later     { background: #fff3e0; color: #b45309; }
.cs-badge-completed { background: #f0f0f0; color: #888; }
.cs-badge-cancelled { background: #fafafa; color: #bbb; border: 1px solid #e0e0e0; }

/* Zoom indicator on card */
.cs-zoom-indicator {
  font-size: 18px; flex-shrink: 0;
  opacity: .6; transition: opacity .13s;
}
.cs-session-card:hover .cs-zoom-indicator { opacity: 1; }

/* ── Empty / no sessions state ──────────────────────────────────── */
.cs-empty-day {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 20px; text-align: center; color: #aaa;
}
.cs-empty-icon { font-size: 44px; margin-bottom: 12px; opacity: .4; }
.cs-empty-text { font-size: 15px; font-weight: 600; color: #888; }
.cs-empty-sub  { font-size: 13px; color: #bbb; margin-top: 5px; }

/* ── Skeleton loading ───────────────────────────────────────────── */
.cs-skeleton { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.cs-skeleton-row {
  height: 78px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400% 100%; border-radius: 14px;
  animation: cs-shimmer 1.4s ease-in-out infinite;
}
.cs-skeleton-short { height: 60px; width: 70%; }
@keyframes cs-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Detail modal ───────────────────────────────────────────────── */
.cs-detail-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 99999; display: flex;
  align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
}
.cs-detail-box {
  background: #fff; border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.22);
  width: 100%; max-width: 540px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: cs-in .18s ease;
}
@keyframes cs-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

.cs-detail-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e8eaf0;
  background: #1a1a2e; flex-shrink: 0;
}
.cs-detail-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.cs-detail-meta  { font-size: 12px; color: rgba(255,255,255,.6); margin: 0; }
.cs-detail-close {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 17px; width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s; flex-shrink: 0;
}
.cs-detail-close:hover { background: rgba(255,255,255,.25); }

.cs-detail-body {
  flex: 1; overflow-y: auto; padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Detail rows */
.cs-detail-row {
  display: flex; align-items: flex-start; gap: 12px;
}
.cs-detail-row-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.cs-detail-row-content { flex: 1; min-width: 0; }
.cs-detail-row-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #aaa; margin-bottom: 2px;
}
.cs-detail-row-value { font-size: 14px; color: #1a1a2e; word-break: break-word; }

/* Zoom join button */
.cs-zoom-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2D8CFF; color: #fff; border: none; border-radius: 10px;
  padding: 12px 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .13s; margin-top: 4px;
  box-shadow: 0 4px 14px rgba(45,140,255,.3);
}
.cs-zoom-btn:hover { background: #1a7ae8; color: #fff; }
.cs-zoom-btn-icon { font-size: 18px; }

.cs-passcode-row {
  display: flex; align-items: center; gap: 10px;
  background: #f7f8fc; border: 1px solid #e8eaf0;
  border-radius: 8px; padding: 10px 14px; margin-top: 6px;
}
.cs-passcode-label { font-size: 12px; color: #888; font-weight: 600; }
.cs-passcode-value { font-size: 14px; font-weight: 800; color: #1a1a2e; font-family: monospace; letter-spacing: .05em; }
.cs-passcode-copy {
  margin-left: auto; background: #4f46e5; color: #fff; border: none;
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .13s;
}
.cs-passcode-copy:hover { background: #3730a3; }

.cs-description-text {
  font-size: 13px; color: #555; line-height: 1.6;
  background: #f7f8fc; border-radius: 8px; padding: 12px 14px;
  border: 1px solid #e8eaf0;
}

/* ── Type pill ──────────────────────────────────────────────────── */
.cs-type-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; border-radius: 20px; padding: 3px 10px;
}
.cs-type-group      { background: #ede9fe; color: #4f46e5; }
.cs-type-one_on_one { background: #e8f5e9; color: #1e7e34; }
.cs-type-webinar    { background: #fff3e0; color: #b45309; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cs-toolbar { padding: 12px 14px 10px; }
  .cs-week-label { font-size: 13px; min-width: 120px; }
  .cs-week-strip { padding: 10px 14px; gap: 4px; }
  .cs-wday-num { font-size: 15px; }
  .cs-sessions-list { padding: 0 14px 20px; }
  .cs-session-card { padding: 12px 14px; gap: 10px; }
  .cs-slot-time { min-width: 58px; font-size: 12px; }
  .cs-slot-title { font-size: 13px; }
  .cs-detail-box { border-radius: 14px; }
  .cs-detail-head { padding: 16px 18px 12px; }
  .cs-detail-body { padding: 16px 18px 20px; }
}
@media (max-width: 400px) {
  .cs-wday-name { font-size: 9px; letter-spacing: 0; }
  .cs-wday-num  { font-size: 14px; }
}

/* Title opens zoom link */
.cs-slot-title-link {
    color: #1a1a2e; text-decoration: none; font-weight: 700;
    transition: color .13s;
}
.cs-slot-title-link:hover { color: #4f46e5; text-decoration: underline; }

/* ── Instructor avatar — frontend cards & detail modal ──────────── */
.cs-inst-avatar-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    flex-shrink: 0; overflow: hidden; vertical-align: middle;
}
.cs-inst-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cs-inst-initial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #4f46e5; color: #fff;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0; vertical-align: middle;
}
.cs-inst-avatar-lg,
.cs-inst-initial.cs-inst-avatar-lg {
    width: 38px !important; height: 38px !important; font-size: 16px !important;
}
.cs-detail-inst-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: #1a1a2e; font-weight: 600;
}


/* ════════════════════════════════════════════════════════════════════
   Schedule share card bubble in chat
   ════════════════════════════════════════════════════════════════════ */
.wpcc-cs-schedule-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0effe;
  border: 1.5px solid #c7d2fe;
  border-left: 4px solid #4f46e5;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  cursor: pointer;
  transition: background .14s, box-shadow .14s;
  min-width: 200px;
  max-width: 100%;
}
.wpcc-cs-schedule-card:hover {
  background: #e0e7ff;
  box-shadow: 0 2px 8px rgba(79,70,229,.15);
}
/* In "me" (sent) bubbles */
.wpcc-bubble.me .wpcc-cs-schedule-card {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  border-left-color: rgba(255,255,255,.8);
}
.wpcc-bubble.me .wpcc-cs-schedule-card:hover {
  background: rgba(255,255,255,.26);
}
.wpcc-cs-schedule-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.wpcc-cs-schedule-info {
  flex: 1;
  min-width: 0;
}
.wpcc-cs-schedule-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpcc-bubble.me .wpcc-cs-schedule-title { color: #fff; }
.wpcc-cs-schedule-sub {
  font-size: 11px;
  color: #6366f1;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpcc-bubble.me .wpcc-cs-schedule-sub { color: rgba(255,255,255,.75); }
.wpcc-cs-schedule-arrow {
  font-size: 18px;
  color: #4f46e5;
  flex-shrink: 0;
  font-weight: 700;
}
.wpcc-bubble.me .wpcc-cs-schedule-arrow { color: rgba(255,255,255,.8); }

/* ════════════════════════════════════════════════════════════════════
   Schedule card highlight flash (from chat deep-link)
   ════════════════════════════════════════════════════════════════════ */
@keyframes cs-highlight-flash {
  0%   { box-shadow: 0 0 0 0 rgba(79,70,229,.0);  background: #fff; }
  20%  { box-shadow: 0 0 0 6px rgba(79,70,229,.35); background: #eef2ff; }
  60%  { box-shadow: 0 0 0 4px rgba(79,70,229,.20); background: #e0e7ff; }
  100% { box-shadow: 0 0 0 0 rgba(79,70,229,.0);  background: #fff; }
}
.cs-highlight-flash {
  animation: cs-highlight-flash 2.2s ease forwards;
}

/* ════════════════════════════════════════════════════════════════════
   Share button in detail modal
   ════════════════════════════════════════════════════════════════════ */
.cs-share-btn-row {
  display: flex;
  justify-content: center;
  padding-top: 6px;
  border-top: 1px solid #e8eaf0;
  margin-top: 4px;
}
.cs-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4f46e5, #818cf8);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  transition: opacity .14s, transform .12s;
  box-shadow: 0 4px 14px rgba(79,70,229,.28);
}
.cs-share-btn:hover  { opacity: .90; transform: translateY(-1px); }
.cs-share-btn:active { transform: translateY(0); opacity: .82; }

/* ════════════════════════════════════════════════════════════════════
   Schedule tab badge (shown in hub tab bar)
   ════════════════════════════════════════════════════════════════════ */
.ch-schedule-tab-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #4f46e5;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 17px;
  border-radius: 9px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
  white-space: nowrap;
}
.ch-schedule-tab-badge--visible {
  display: block;
  animation: ch-badge-pop .2s ease;
}
@media (max-width: 640px) {
  .ch-schedule-tab-badge { top: -4px; right: -6px; min-width: 18px; height: 18px; line-height: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Deep-link toast — non-intrusive notice for deleted/unavailable
   schedules reached via a chat bubble.
   Appears at the top of #cs-app, auto-dismisses after 4 s.
   ════════════════════════════════════════════════════════════════════ */
.cs-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 999;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 24px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* Base style (info) */
  background: #1a1a2e;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: opacity .25s ease, transform .25s ease;
}
.cs-toast.cs-toast-error {
  background: #dc3545;
}
.cs-toast.cs-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* #cs-app needs position:relative for the toast to anchor correctly */
#cs-app { position: relative; }

/* ════════════════════════════════════════════════════════════════════
   Deep-link loading overlay
   Covers #cs-app while loadWeek fetches the target week.
   Dismissed inside highlightCard once sessions are rendered.
   ════════════════════════════════════════════════════════════════════ */
.cs-deep-link-loader {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(247, 248, 252, 0.96);
  opacity: 1;
  transition: opacity .3s ease;
  pointer-events: all;
}
.cs-deep-link-loader.cs-deep-link-loader-fade {
  opacity: 0;
  pointer-events: none;
}
.cs-deep-link-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e8eaf0;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: cs-deep-link-spin .75s linear infinite;
}
@keyframes cs-deep-link-spin {
  to { transform: rotate(360deg); }
}
.cs-deep-link-loader-text {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  letter-spacing: .01em;
}