/* ============================================================
   NEREUS LAB — Pentest Workflow Widget  v3
   ============================================================ */

/* ── Variables ── */
#nrl-pentest-workflow {
  --nrl-accent:        #00d4aa;
  --nrl-accent-dim:    rgba(0, 212, 170, 0.10);
  --nrl-accent-border: rgba(0, 212, 170, 0.25);
  --nrl-bg:            #0a0e1a;
  --nrl-bg-mid:        #111827;
  --nrl-bg-card:       #0f1522;
  --nrl-border:        rgba(255, 255, 255, 0.07);
  --nrl-text:          #f0f4ff;
  --nrl-muted:         #8a9bb8;
  --nrl-radius:        4px;
  --nrl-font-mono:     'DM Mono', 'Courier New', monospace;
  --nrl-font-sans:     'Syne', system-ui, sans-serif;

  box-sizing:    border-box;
  background:    var(--nrl-bg);
  color:         var(--nrl-text);
  font-family:   var(--nrl-font-sans);
  padding:       32px 24px;
  border-radius: 8px;
  width:         100%;
}

#nrl-pentest-workflow *,
#nrl-pentest-workflow *::before,
#nrl-pentest-workflow *::after {
  box-sizing: inherit;
  margin:     0;
  padding:    0;
}

/* ── Header ── */
.nrl-pw-header        { margin-bottom: 28px; }
.nrl-pw-label {
  font-family:    var(--nrl-font-mono);
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--nrl-accent);
  margin-bottom:  8px;
}
.nrl-pw-title {
  font-size:      22px;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--nrl-text);
}

/* ── Track ── */
.nrl-pw-track {
  display:                    flex;
  align-items:                stretch;   /* makes every step the same height */
  position:                   relative;
  margin-bottom:              0;
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            thin;
  scrollbar-color:            var(--nrl-border) transparent;
}

/* each step column stretches to fill track height */
.nrl-pw-step {
  flex:      1;
  min-width: 110px;
  display:   flex;          /* NEW: makes button fill the column */
  position:  relative;
}

/* ── Step button ── */
.nrl-pw-step-btn {
  flex:            1;        /* fills the parent flex column = equal heights */
  background:      var(--nrl-bg-card);
  border:          0.5px solid var(--nrl-border);
  border-right:    none;
  padding:         16px 14px 14px;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  cursor:          pointer;
  text-align:      left;
  transition:      background 0.15s ease;
  color:           var(--nrl-text);
  min-height:      120px;   /* floor so single-line names don't look tiny */
}

.nrl-pw-step:last-child .nrl-pw-step-btn { border-right: 0.5px solid var(--nrl-border); }
.nrl-pw-step-btn:hover                   { background: #131928; }

.nrl-pw-step-btn.is-active {
  background:   var(--nrl-accent-dim);
  border-color: var(--nrl-accent-border);
}
.nrl-pw-step-btn:focus-visible {
  outline:        2px solid var(--nrl-accent);
  outline-offset: -2px;
}

/* ── Step internals ── */
.nrl-pw-step-num {
  display:        block;
  font-family:    var(--nrl-font-mono);
  font-size:      9px;
  letter-spacing: 0.15em;
  color:          var(--nrl-muted);
  margin-bottom:  8px;
}
.nrl-pw-step-btn.is-active .nrl-pw-step-num { color: var(--nrl-accent); }

.nrl-pw-step-icon {
  display:       block;
  width:         24px;
  height:        24px;
  margin-bottom: 10px;
  color:         var(--nrl-accent);
  flex-shrink:   0;
}
.nrl-pw-step-icon svg { width: 24px; height: 24px; }

.nrl-pw-step-name {
  display:     block;
  font-size:   12px;
  font-weight: 600;
  line-height: 1.35;
  color:       var(--nrl-text);
  flex:        1;           /* pushes bar to bottom regardless of text length */
}

/* ── Progress bar ── */
.nrl-pw-step-bar {
  display:    block;
  width:      100%;
  height:     2px;
  background: var(--nrl-border);
  margin-top: 12px;
  overflow:   hidden;
  flex-shrink: 0;
}
.nrl-pw-step-bar-fill {
  display:    block;
  height:     100%;
  width:      0;
  background: var(--nrl-accent);
  transition: width 0.3s ease;
}
.nrl-pw-step-btn.is-active .nrl-pw-step-bar-fill { width: 100%; }

/* ── Arrow between steps ── */
.nrl-pw-arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  flex-shrink:     0;
  background:      var(--nrl-bg-card);
  border-top:      0.5px solid var(--nrl-border);
  border-bottom:   0.5px solid var(--nrl-border);
  position:        relative;
  z-index:         2;
}
.nrl-pw-arrow::after {
  content:      '';
  display:      block;
  width:        12px;
  height:       12px;
  border-top:   0.5px solid var(--nrl-border);
  border-right: 0.5px solid var(--nrl-border);
  transform:    rotate(45deg);
  margin-left:  -6px;
  background:   var(--nrl-bg-card);
}

/* ── Detail panel ── */
.nrl-pw-panel {
  background:     var(--nrl-bg-mid);
  border:         0.5px solid var(--nrl-accent-border);
  border-top:     2px solid var(--nrl-accent);
  border-radius:  0 0 var(--nrl-radius) var(--nrl-radius);
  overflow:       hidden;
  max-height:     0;
  padding:        0 40px;   /* keep horizontal padding, collapse vertical */
  border-width:   0;
  transition:     max-height 0.35s ease, padding 0.25s ease, border-width 0s;
}
.nrl-pw-panel.is-visible {
  max-height:       2000px;
  padding:          40px;   /* FIX: restored full padding so text breathes */
  border-width:     0.5px;
  border-top-width: 2px;
}

/* ── Panel top row ── */
.nrl-pw-dp-top {
  display:       flex;
  align-items:   flex-start;
  gap:           18px;
  margin-bottom: 20px;      /* FIX: more space before description */
}
.nrl-pw-dp-icon {
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  border:          0.5px solid var(--nrl-accent-border);
  border-radius:   var(--nrl-radius);
  background:      var(--nrl-accent-dim);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--nrl-accent);
}
.nrl-pw-dp-icon svg { width: 24px; height: 24px; }

.nrl-pw-dp-tag {
  font-family:    var(--nrl-font-mono);
  font-size:      9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--nrl-accent);
  margin-bottom:  6px;
}
.nrl-pw-dp-title {
  font-size:      18px;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--nrl-text);
  margin-bottom:  4px;      /* FIX: gap between title and subtitle */
}
.nrl-pw-dp-subtitle {
  font-size: 12px;
  color:     var(--nrl-muted);
}

/* ── Description ── */
.nrl-pw-dp-desc {
  font-size:     13px;
  color:         var(--nrl-muted);
  line-height:   1.7;
  margin-bottom: 24px;      /* FIX: more breathing room before columns */
}

/* ── Two-column body ── */
.nrl-pw-dp-body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  margin-bottom:         24px;
}
.nrl-pw-dp-block {
  background:    var(--nrl-bg-card);
  border:        0.5px solid var(--nrl-border);
  border-radius: var(--nrl-radius);
  padding:       24px;      /* FIX: more inner padding in the cards */
}
.nrl-pw-dp-block-label {
  font-family:    var(--nrl-font-mono);
  font-size:      9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--nrl-accent);
  margin-bottom:  12px;     /* FIX: gap between label and list */
}
.nrl-pw-dp-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            9px;      /* FIX: more space between list items */
}
.nrl-pw-dp-list li {
  font-size:   12px;
  color:       var(--nrl-text);
  line-height: 1.5;
  display:     flex;
  align-items: flex-start;
  gap:         8px;
}
.nrl-pw-dp-list li::before {
  content:      '';
  display:      block;
  width:        4px;
  height:       4px;
  border-radius: 50%;
  background:   var(--nrl-accent);
  margin-top:   6px;
  flex-shrink:  0;
}

/* ── Pills ── */
.nrl-pw-dp-pills {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 24px;
}
.nrl-pw-pill {
  font-family:    var(--nrl-font-mono);
  font-size:      10px;
  letter-spacing: 0.1em;
  padding:        5px 12px;
  border-radius:  2px;
  border:         0.5px solid var(--nrl-accent-border);
  color:          var(--nrl-accent);
  background:     var(--nrl-accent-dim);
}
.nrl-pw-pill--gray {
  color:        var(--nrl-muted);
  border-color: var(--nrl-border);
  background:   transparent;
}

/* ── Footer nav ── */
.nrl-pw-dp-footer {
  border-top:      0.5px solid var(--nrl-border);
  padding-top:     22px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}
.nrl-pw-dp-counter {
  font-family: var(--nrl-font-mono);
  font-size:   11px;
  color:       var(--nrl-muted);
}
.nrl-pw-dp-nav { display: flex; gap: 8px; }

.nrl-pw-nav-btn {
  font-family:    var(--nrl-font-mono);
  font-size:      10px;
  letter-spacing: 0.08em;
  padding:        8px 16px;
  border-radius:  2px;
  border:         0.5px solid var(--nrl-border);
  color:          var(--nrl-muted);
  background:     transparent;
  cursor:         pointer;
  transition:     border-color 0.15s, color 0.15s;
}
.nrl-pw-nav-btn:hover:not(:disabled) {
  border-color: var(--nrl-accent-border);
  color:        var(--nrl-text);
}
.nrl-pw-nav-btn--primary {
  border-color: var(--nrl-accent-border);
  color:        var(--nrl-accent);
}
.nrl-pw-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* Tablet: compress step buttons, hide labels */
@media (max-width: 768px) {
  #nrl-pentest-workflow { padding: 24px 16px; }

  .nrl-pw-step     { min-width: 80px; }
  .nrl-pw-step-btn { padding: 12px 10px 10px; min-height: 100px; }
  .nrl-pw-step-name { font-size: 11px; }

  .nrl-pw-panel.is-visible { padding: 28px 32px; }

  .nrl-pw-dp-top   { gap: 14px; }
  .nrl-pw-dp-title { font-size: 16px; }
}

/* Mobile: vertical stack */
@media (max-width: 540px) {
  #nrl-pentest-workflow { padding: 20px 14px; }

  /* Stack steps vertically, each is a compact horizontal row */
  .nrl-pw-track         { flex-direction: column; overflow-x: visible; }
  .nrl-pw-step          { min-width: 0; width: 100%; }
  .nrl-pw-step-btn {
    flex-direction: row;
    align-items:    center;
    min-height:     0;
    padding:        12px 14px;
    gap:            12px;
    border-right:   0.5px solid var(--nrl-border);
    border-bottom:  none;
  }
  .nrl-pw-step:last-child .nrl-pw-step-btn {
    border-bottom: 0.5px solid var(--nrl-border);
  }

  /* in row mode: num + icon side by side, name fills remaining space */
  .nrl-pw-step-num  { margin-bottom: 0; min-width: 22px; }
  .nrl-pw-step-icon { margin-bottom: 0; flex-shrink: 0; }
  .nrl-pw-step-name { flex: 1; font-size: 12px; }

  /* hide progress bar and arrows on mobile */
  .nrl-pw-step-bar  { display: none; }
  .nrl-pw-arrow     { display: none; }

  /* panel full width */
  .nrl-pw-panel.is-visible { padding: 20px 18px; }
  .nrl-pw-dp-body   { grid-template-columns: 1fr; }

  .nrl-pw-dp-top    { flex-direction: row; align-items: center; gap: 12px; }
  .nrl-pw-dp-icon   { width: 40px; height: 40px; flex-shrink: 0; }
  .nrl-pw-dp-title  { font-size: 15px; }

  .nrl-pw-dp-footer {
    flex-direction: column;
    align-items:    flex-start;
  }
}