/*
 * ResourceNexus — Shepherd.js Deep Sea Green theme
 * Overrides default Shepherd styles with the platform palette.
 */

:root {
  --rn-primary: #2d7d80;
  --rn-dark:    #285E61;
  --rn-accent:  #3baab0;
  --rn-light:   #e8f7f8;
  --rn-border:  #a8dde0;
  --rn-glow:    rgba(45, 125, 128, 0.16);
  --rn-text:    #1a2e2e;
  --rn-radius:  14px;
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.shepherd-modal-overlay-container {
  fill: rgba(10, 28, 28, 0.52);
}

/* ── Suppress pre-layout flicker: hide until floating-ui finishes (~70ms) ── */
.shepherd-element {
  opacity: 0;
  animation: rn-shepherd-appear 0.22s ease 0.07s forwards;
}
@keyframes rn-shepherd-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Centered (unattached) steps ───────────────────────────────────────────
   Applied via JS class before the element is painted. Using !important beats
   floating-ui's inline style positioning, so the element is NEVER rendered
   off-center — no JS setTimeout or post-paint repositioning needed.         */
.shepherd-element.rn-step-centered {
  position:  fixed !important;
  top:       50%   !important;
  left:      50%   !important;
  transform: translate(-50%, -50%) !important;
  max-width: 480px !important;
  width:     min(480px, 90vw) !important;
  /* Opacity-only animation: translateY conflicts with the centering transform */
  animation: rn-centered-appear 0.2s ease forwards !important;
}
@keyframes rn-centered-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Step container ────────────────────────────────────────────────────────── */
.rn-shepherd-step.shepherd-element {
  background:    #ffffff;
  border:        1.5px solid var(--rn-border);
  border-radius: var(--rn-radius);
  box-shadow:    0 12px 40px var(--rn-glow), 0 2px 8px rgba(0, 0, 0, 0.07);
  max-width:     360px;
  min-width:     260px;
  font-family:   inherit;
  overflow:      hidden;
  animation:     rnStepIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes rnStepIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Arrow ─────────────────────────────────────────────────────────────────── */
.rn-shepherd-step .shepherd-arrow::before {
  background: var(--rn-border);
}
.shepherd-has-title .shepherd-arrow::before {
  background: var(--rn-accent);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
/* !important needed: Shepherd v11 default CSS uses a 3-class selector
   (.shepherd-has-title .shepherd-content .shepherd-header) for its gray bg,
   outweighing our 2-class selector without the override.                     */
.rn-shepherd-step .shepherd-header {
  background:  linear-gradient(135deg, var(--rn-accent) 0%, var(--rn-primary) 60%, var(--rn-dark) 100%) !important;
  padding:     14px 16px 11px;
  display:     flex;
  align-items: flex-start;
  gap:         10px;
}

.rn-shepherd-step .shepherd-title {
  color:          #ffffff;
  font-size:      13px;
  font-weight:    700;
  line-height:    1.35;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

/* ── Progress dots ─────────────────────────────────────────────────────────── */
.rn-dots {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.rn-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.35);
  transition:    background 0.2s, width 0.15s, height 0.15s;
  flex-shrink:   0;
}

.rn-dot.active {
  background: #ffffff;
  width:      7px;
  height:     7px;
}

/* ── Cancel (×) icon ───────────────────────────────────────────────────────── */
.rn-shepherd-step .shepherd-cancel-icon {
  color:       rgba(255, 255, 255, 0.65);
  background:  none;
  border:      none;
  font-size:   18px;
  line-height: 1;
  cursor:      pointer;
  padding:     0 0 2px;
  margin:      -2px -4px 0 0;
  flex-shrink: 0;
  transition:  color 0.15s;
}
.rn-shepherd-step .shepherd-cancel-icon:hover { color: #ffffff; }

/* ── Step title ────────────────────────────────────────────────────────────── */
.rn-step-title { display: block; }

/* ── Body ──────────────────────────────────────────────────────────────────── */
.rn-shepherd-step .shepherd-text {
  padding:     14px 16px;
  font-size:   13px;
  color:       var(--rn-text);
  line-height: 1.6;
}

.rn-shepherd-step .shepherd-text strong {
  color:       var(--rn-primary);
  font-weight: 600;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.rn-shepherd-step .shepherd-footer {
  padding:         0 16px 14px;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
  border-top:      none;
}

/* ── Skip button ───────────────────────────────────────────────────────────── */
.rn-btn-skip {
  background:   transparent;
  border:       none;
  color:        #94a3b8;
  font-size:    11px;
  font-weight:  500;
  cursor:       pointer;
  padding:      6px 2px;
  margin-right: auto;
  transition:   color 0.15s;
  white-space:  nowrap;
}
.rn-btn-skip:hover { color: #64748b; }

/* ── Next button ───────────────────────────────────────────────────────────── */
.rn-btn-next {
  background:    var(--rn-primary);
  color:         #ffffff;
  border:        none;
  border-radius: 8px;
  font-size:     12px;
  font-weight:   600;
  padding:       7px 18px;
  cursor:        pointer;
  transition:    background 0.15s, transform 0.1s;
  white-space:   nowrap;
}
.rn-btn-next:hover {
  background: var(--rn-dark);
  transform:  translateY(-1px);
}

/* ── Done / final button ───────────────────────────────────────────────────── */
.rn-btn-done {
  background:    linear-gradient(135deg, var(--rn-accent) 0%, var(--rn-dark) 100%);
  color:         #ffffff;
  border:        none;
  border-radius: 8px;
  font-size:     12px;
  font-weight:   700;
  padding:       7px 20px;
  cursor:        pointer;
  transition:    filter 0.15s, transform 0.1s;
  white-space:   nowrap;
}
.rn-btn-done:hover {
  filter:    brightness(1.12);
  transform: translateY(-1px);
}

/* ── Highlighted element outline ───────────────────────────────────────────── */
.shepherd-highlighted-element {
  outline:        3px solid var(--rn-primary) !important;
  outline-offset: 4px;
  border-radius:  6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   "How do I…" — right-edge expandable tour panel
   Width 340px: 40px tab always visible + 300px drawer slides in from right.
   Closed: right:-300px → tab sticks out 40px.
   Open:   right:0     → full panel visible.
   ══════════════════════════════════════════════════════════════════════════════ */

#rn-how-container {
  position:   fixed;
  top:        0;
  bottom:     0;
  right:      -300px;
  width:      340px;
  z-index:    900;
  display:    flex;
  transition: right 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none; /* let clicks through when drawer is closed */
}

#rn-how-container.rn-how-open {
  right: 0;
}

/* ── Tab button — compact, matches the Feedback tab size ── */
#rn-how-tab {
  /* Anchored from the top — centre aligns with "Your clinical workspace is ready." */
  align-self:      flex-start;
  margin-top:      11rem;
  flex-shrink:     0;
  /* Must equal container_width − drawer_width (340 − 300 = 40px) to sit flush at the viewport edge */
  width:           40px;

  background:      linear-gradient(180deg, var(--rn-dark) 0%, var(--rn-primary) 100%);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         .6rem .4rem;

  /* Rounded on the left (protruding) edge, flat on the right where it meets the drawer */
  border-radius:   8px 0 0 8px;

  box-shadow:      -2px 2px 12px rgba(40, 94, 97, 0.45);
  transition:      background 0.2s;
  pointer-events:  auto;
}
#rn-how-tab:hover {
  background: linear-gradient(180deg, #1e4547 0%, var(--rn-dark) 100%);
}

.rn-how-tab-text {
  color:          #ffffff;
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .07em;
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
  white-space:    nowrap;
  user-select:    none;
}

/* ── Sliding drawer ── */
#rn-how-drawer {
  width:           300px;
  flex-shrink:     0;
  background:      #ffffff;
  display:         flex;
  flex-direction:  column;
  box-shadow:      -6px 0 32px rgba(0, 0, 0, 0.14);
  overflow:        hidden;
  pointer-events:  auto;
}

/* ── Drawer header ── */
.rn-how-header {
  background:      linear-gradient(135deg, var(--rn-accent) 0%, var(--rn-primary) 55%, var(--rn-dark) 100%);
  padding:         20px 16px 18px;
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
  flex-shrink:     0;
}

.rn-how-header-label {
  color:          rgba(255, 255, 255, 0.65);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  3px;
}

.rn-how-header-title {
  color:       #ffffff;
  font-size:   20px;
  font-weight: 800;
  line-height: 1.15;
  margin:      0;
}

.rn-how-header-sub {
  color:       rgba(255, 255, 255, 0.6);
  font-size:   11px;
  margin-top:  5px;
  line-height: 1.4;
}

.rn-how-close {
  background:  rgba(255, 255, 255, 0.15);
  border:      none;
  color:       #ffffff;
  font-size:   18px;
  line-height: 1;
  width:       28px;
  height:      28px;
  border-radius: 50%;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background 0.15s;
  flex-shrink: 0;
  margin-top:  2px;
}
.rn-how-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Tour list body ── */
#rn-how-body {
  flex:       1;
  overflow-y: auto;
  padding:    14px 12px 20px;
}

.rn-how-empty {
  text-align:  center;
  color:       #94a3b8;
  font-size:   13px;
  padding:     40px 16px;
  line-height: 1.5;
}

/* ── Individual tour card ── */
.rn-how-card {
  border:        1.5px solid #e2e8f0;
  border-radius: 12px;
  padding:       14px 14px 12px;
  margin-bottom: 10px;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.rn-how-card:hover {
  border-color: var(--rn-border);
  box-shadow:   0 3px 14px var(--rn-glow);
}

.rn-how-card-icon {
  font-size:    18px;
  margin-bottom: 7px;
  display:      block;
}

.rn-how-card-name {
  font-size:     13px;
  font-weight:   700;
  color:         #1e293b;
  margin-bottom: 4px;
  line-height:   1.3;
}

.rn-how-card-desc {
  font-size:     11.5px;
  color:         #64748b;
  line-height:   1.5;
  margin-bottom: 12px;
}

.rn-how-card-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     var(--rn-primary);
  color:          #ffffff;
  border:         none;
  border-radius:  8px;
  font-size:      11.5px;
  font-weight:    700;
  padding:        6px 14px;
  cursor:         pointer;
  transition:     background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.rn-how-card-btn:hover {
  background: var(--rn-dark);
  transform:  translateY(-1px);
}
.rn-how-card-btn svg {
  width:  11px;
  height: 11px;
  flex-shrink: 0;
}

/* ── Off-page card variant (tour lives on a different page) ── */
.rn-how-card.rn-how-card-offpage {
  border-color: #e2e8f0;
  background:   #f8fafc;
}
.rn-how-card.rn-how-card-offpage .rn-how-card-btn {
  background: #475569;
}
.rn-how-card.rn-how-card-offpage .rn-how-card-btn:hover {
  background: #334155;
}

/* ── Page-location badge shown on off-page tours ── */
.rn-how-card-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  margin-left:   6px;
  padding:       1px 6px;
  border-radius: 20px;
  font-size:     9.5px;
  font-weight:   600;
  letter-spacing:.02em;
  background:    #eff6ff;
  color:         #3b82f6;
  border:        1px solid #bfdbfe;
  vertical-align: middle;
  white-space:   nowrap;
}

/* ── Footer note ── */
.rn-how-footer {
  padding:     10px 14px 14px;
  border-top:  1px solid #f1f5f9;
  font-size:   10.5px;
  color:       #94a3b8;
  line-height: 1.45;
  flex-shrink: 0;
}

/* ── Backdrop (closes panel on outside click) ── */
#rn-how-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    899;
  background: rgba(10, 28, 28, 0.2);
}
#rn-how-backdrop.rn-how-open {
  display: block;
}

/* ── Spinner for async tour actions ── */
@keyframes rn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}