/*
 * kaden-enhancements.css — Kaden Onboarding Portal
 * Production-safe enhancement layer for the compiled build.
 *
 * Goals:
 * - make the first-day employee journey clearer
 * - add persistent support/help affordances
 * - expose progress clearly across the onboarding flow
 * - enrich completion experience without rewriting the React bundle
 */

:root {
  --kd-bg:         #131f17;
  --kd-bg-panel:   #1a2820;
  --kd-bg-card:    #1f3126;
  --kd-bg-soft:    rgba(24, 38, 29, 0.78);
  --kd-text:       #ece8df;
  --kd-muted:      #98ab9f;
  --kd-border:     rgba(45, 122, 74, 0.26);
  --kd-green:      #2d7a4a;
  --kd-green-10:   rgba(45, 122, 74, 0.10);
  --kd-green-18:   rgba(45, 122, 74, 0.18);
  --kd-gold:       #dab87a;
  --kd-radius:     0.95rem;
  --kd-shadow:     0 10px 32px rgba(0, 0, 0, 0.42);
  --kd-shadow-sm:  0 5px 18px rgba(0, 0, 0, 0.28);
  --kd-font:       'Cairo', 'Outfit', system-ui, sans-serif;
  --kd-bar-h:      44px;
  --kd-guide-top:  calc(var(--kd-bar-h) + 16px);
}

html.light {
  --kd-bg:         #f4f0e7;
  --kd-bg-panel:   #fbf8f2;
  --kd-bg-card:    #f6f2ea;
  --kd-bg-soft:    rgba(251, 248, 242, 0.94);
  --kd-text:       #1c3022;
  --kd-muted:      #5c7263;
  --kd-border:     rgba(45, 122, 74, 0.18);
  --kd-shadow:     0 10px 32px rgba(0, 0, 0, 0.10);
  --kd-shadow-sm:  0 5px 18px rgba(0, 0, 0, 0.08);
}

#kd-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: var(--kd-bar-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.1rem;
  background: var(--kd-bg);
  border-bottom: 1px solid var(--kd-border);
  font-family: var(--kd-font);
  backdrop-filter: blur(10px);
}

#kd-progress-bar[hidden] { display: none; }
#kd-progress-bar:not([hidden]) ~ #root { padding-top: var(--kd-bar-h); }

#kd-progress-steps {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.kd-prog-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kd-border);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.kd-prog-dot.done { background: var(--kd-green); }
.kd-prog-dot.active {
  background: var(--kd-gold);
  transform: scale(1.55);
  box-shadow: 0 0 0 4px rgba(218,184,122,0.12);
}

#kd-progress-track {
  flex: 1;
  min-width: 72px;
  max-width: 260px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--kd-border);
}

#kd-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kd-green), var(--kd-gold));
  transition: width .55s cubic-bezier(.4,0,.2,1);
}

#kd-progress-label {
  font-size: .72rem;
  color: var(--kd-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Step guide — the “what am I looking at?” companion for first-day employees */
#kd-step-guide {
  position: fixed;
  top: var(--kd-guide-top);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: min(680px, calc(100vw - 2rem));
  background: var(--kd-bg-soft);
  border: 1px solid var(--kd-border);
  border-radius: 1rem;
  box-shadow: var(--kd-shadow);
  backdrop-filter: blur(16px);
  font-family: var(--kd-font);
  color: var(--kd-text);
  overflow: hidden;
}
#kd-step-guide[hidden] { display: none; }

#kd-step-guide-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  padding: 1rem 1rem .95rem;
}

#kd-step-guide-main,
#kd-step-guide-side {
  min-width: 0;
}

#kd-step-guide-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kd-green);
  background: var(--kd-green-10);
  border: 1px solid var(--kd-border);
  border-radius: 999px;
  padding: .24rem .55rem;
}

#kd-step-guide-title {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--kd-gold);
  margin: 0 0 .35rem;
  font-weight: 700;
}

#kd-step-guide-desc {
  margin: 0;
  line-height: 1.72;
  font-size: .84rem;
  color: var(--kd-text);
}

#kd-step-guide-list {
  list-style: none;
  padding: 0;
  margin: .8rem 0 0;
  display: grid;
  gap: .45rem;
}
#kd-step-guide-list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--kd-muted);
}
#kd-step-guide-list li::before {
  content: '•';
  color: var(--kd-gold);
  font-size: .95rem;
  line-height: 1.2;
  margin-top: .08rem;
}

#kd-step-guide-side {
  border-inline-start: 1px solid var(--kd-border);
  padding-inline-start: 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.kd-guide-meta {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .74rem;
  color: var(--kd-muted);
}
.kd-guide-meta strong { color: var(--kd-text); font-weight: 600; }

#kd-step-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .2rem;
}

.kd-guide-chip,
.kd-guide-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .38rem .72rem;
  border: 1px solid var(--kd-border);
  text-decoration: none;
  font-size: .74rem;
  line-height: 1;
}

.kd-guide-chip {
  background: rgba(218,184,122,0.08);
  color: var(--kd-gold);
}
.kd-guide-action {
  background: var(--kd-green-10);
  color: var(--kd-text);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.kd-guide-action:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 122, 74, 0.42);
  background: var(--kd-green-18);
}

#kd-step-guide-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

#kd-step-guide-close {
  position: absolute;
  top: .65rem;
  inset-inline-end: .65rem;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kd-muted);
  cursor: pointer;
}
#kd-step-guide-close:hover { background: var(--kd-green-10); color: var(--kd-text); }

#kd-step-guide-reopen {
  position: fixed;
  top: calc(var(--kd-guide-top) + .2rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 9997;
  border: 1px solid var(--kd-border);
  background: var(--kd-bg-soft);
  color: var(--kd-text);
  border-radius: 999px;
  padding: .45rem .8rem;
  box-shadow: var(--kd-shadow-sm);
  font-family: var(--kd-font);
  font-size: .76rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
}
#kd-step-guide-reopen[hidden] { display: none; }

/* support widget */
#kd-support-widget {
  position: fixed;
  bottom: 1.35rem;
  inset-inline-end: 1.35rem;
  z-index: 10001;
  font-family: var(--kd-font);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#kd-support-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kd-border);
  background: var(--kd-bg-panel);
  color: var(--kd-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kd-shadow-sm);
  transition: color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
#kd-support-btn:hover,
#kd-support-btn[aria-expanded="true"] {
  color: var(--kd-green);
  border-color: rgba(45, 122, 74, 0.45);
  transform: scale(1.06);
  box-shadow: 0 0 0 4px var(--kd-green-10), var(--kd-shadow-sm);
}
#kd-support-btn:focus-visible {
  outline: 2px solid var(--kd-green);
  outline-offset: 3px;
}
#kd-support-hint {
  font-size: .64rem;
  color: var(--kd-muted);
  opacity: .7;
  margin-top: .22rem;
  user-select: none;
}

#kd-support-panel {
  position: absolute;
  bottom: calc(100% + .7rem);
  inset-inline-end: 0;
  width: 270px;
  background: var(--kd-bg-panel);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius);
  box-shadow: var(--kd-shadow);
  padding: .95rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
#kd-support-panel[hidden] { display: none; }
#kd-support-panel:not([hidden]) { animation: kd-panel-in .18s ease; }

@keyframes kd-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#kd-support-title {
  margin: 0 0 .15rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--kd-border);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kd-green);
}
.kd-support-copy {
  font-size: .74rem;
  color: var(--kd-muted);
  line-height: 1.6;
}
.kd-support-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .79rem;
  color: var(--kd-text);
  text-decoration: none;
}
.kd-support-row svg { flex-shrink: 0; }
.kd-ticket-row {
  background: var(--kd-green-10);
  border: 1px solid var(--kd-border);
  padding: .55rem .65rem;
  border-radius: .8rem;
}
.kd-ticket-row:hover { background: var(--kd-green-18); }
.kd-divider {
  height: 1px;
  background: var(--kd-border);
  margin: .1rem 0;
}

/* inline login note + system intro */
.kd-inline-note {
  margin-top: 1rem;
  border: 1px solid var(--kd-border);
  background: rgba(45,122,74,.08);
  border-radius: .95rem;
  padding: .85rem .95rem;
  font-family: var(--kd-font);
  text-align: start;
  box-shadow: var(--kd-shadow-sm);
}
.kd-inline-note h3 {
  margin: 0 0 .45rem;
  font-size: .85rem;
  color: var(--kd-gold);
}
.kd-inline-note p,
.kd-inline-note li {
  margin: 0;
  font-size: .76rem;
  line-height: 1.65;
  color: var(--kd-muted);
}
.kd-inline-note ul {
  margin: .45rem 0 0;
  padding-inline-start: 1rem;
  display: grid;
  gap: .25rem;
}
.kd-inline-note strong { color: var(--kd-text); }

#kd-cert-note {
  margin-top: .9rem;
  border: 1px solid var(--kd-border);
  background: rgba(218,184,122,.08);
  border-radius: .95rem;
  padding: .9rem 1rem;
  color: var(--kd-text);
  line-height: 1.75;
  font-size: .82rem;
}

#kd-whats-next {
  margin-top: 1.15rem;
  border: 1px solid var(--kd-border);
  background: rgba(45, 122, 74, .08);
  border-radius: 1rem;
  padding: 1rem 1rem .9rem;
  font-family: var(--kd-font);
}
.kd-wn-heading {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: var(--kd-gold);
  font-weight: 700;
}
.kd-wn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.kd-wn-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--kd-text);
  line-height: 1.65;
  font-size: .8rem;
}
.kd-wn-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(218,184,122,.1);
  flex-shrink: 0;
}
#kd-whats-next a { color: var(--kd-gold); }

#kd-print-btn {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--kd-border);
  background: var(--kd-bg-panel);
  color: var(--kd-text);
  font-family: var(--kd-font);
  font-size: .8rem;
  cursor: pointer;
  box-shadow: var(--kd-shadow-sm);
}
#kd-print-btn:hover { border-color: rgba(45, 122, 74, 0.42); }

@media (max-width: 900px) {
  #kd-step-guide-inner { grid-template-columns: 1fr; }
  #kd-step-guide-side {
    border-inline-start: 0;
    border-top: 1px solid var(--kd-border);
    padding-inline-start: 0;
    padding-top: .85rem;
  }
}

@media (max-width: 640px) {
  #kd-progress-label { display: none; }
  #kd-progress-track { max-width: 120px; }
  #kd-step-guide {
    width: calc(100vw - 1rem);
    top: calc(var(--kd-bar-h) + 10px);
  }
  #kd-step-guide-inner { padding: .85rem; gap: .85rem; }
  #kd-step-guide-title { font-size: .92rem; }
  #kd-step-guide-desc { font-size: .78rem; }
  #kd-support-panel { width: min(280px, calc(100vw - 2rem)); }
}

@media print {
  #kd-progress-bar,
  #kd-support-widget,
  #kd-step-guide,
  #kd-step-guide-reopen,
  #kd-print-btn,
  #kd-preload { display: none !important; }

  body, html { background: #fff !important; color: #000 !important; }
  #root { padding-top: 0 !important; }
  #kd-whats-next, #kd-cert-note {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #000 !important;
  }
}