/* ============================================================
   NEREUS LAB — Phishing Quiz Widget
   File: css/phishing-quiz.css
   ============================================================ */

/* Scope everything tightly to avoid theme interference */
#nrl-phishing-quiz,
#nrl-phishing-quiz * {
  box-sizing: border-box !important;
  margin:     0;
  padding:    0;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

#nrl-phishing-quiz {
  font-size:   14px;
  line-height: 1.5;
  color:       #1a1a2e;
  width:       100%;
}

/* ── Shell: always a two-column grid ── */
#nrl-phishing-quiz .pq-wrap {
  display:               grid !important;
  grid-template-columns: 180px 1fr !important;
  grid-template-rows:    1fr !important;
  height:                580px !important;
  min-height:            580px !important;
  border:                1px solid #dde1e7 !important;
  border-radius:         8px !important;
  overflow:              hidden !important;
  background:            #fff !important;
}

/* ── Sidebar ── */
#nrl-phishing-quiz .pq-sidebar {
  background:      #f5f6f8 !important;
  border-right:    1px solid #dde1e7 !important;
  display:         flex !important;
  flex-direction:  column !important;
  overflow:        hidden !important;
  min-width:       0;
  grid-column:     1;
  grid-row:        1;
}

#nrl-phishing-quiz .pq-sidebar-top {
  padding:       14px 16px !important;
  border-bottom: 1px solid #dde1e7 !important;
  flex-shrink:   0 !important;
}

#nrl-phishing-quiz .pq-score-label {
  font-size:      10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color:          #888 !important;
  margin-bottom:  4px !important;
  display:        block !important;
}

#nrl-phishing-quiz .pq-score-val {
  font-size:   20px !important;
  font-weight: 700 !important;
  color:       #1a1a2e !important;
  display:     block !important;
}

#nrl-phishing-quiz .pq-score-sub {
  font-size:  11px !important;
  color:      #888 !important;
  margin-top: 1px !important;
  display:    block !important;
}

#nrl-phishing-quiz .pq-folders {
  padding:     8px 0 !important;
  flex-shrink: 0 !important;
}

#nrl-phishing-quiz .pq-folder {
  padding:         7px 16px !important;
  font-size:       13px !important;
  color:           #444 !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  border-left:     3px solid transparent !important;
  list-style:      none !important;
}

#nrl-phishing-quiz .pq-folder.active {
  background:        #e8f0fe !important;
  color:             #1a73e8 !important;
  font-weight:       600 !important;
  border-left-color: #1a73e8 !important;
}

#nrl-phishing-quiz .pq-folder-badge {
  font-size:     10px !important;
  background:    #1a73e8 !important;
  color:         #fff !important;
  border-radius: 10px !important;
  padding:       1px 7px !important;
  font-weight:   600 !important;
  line-height:   1.6 !important;
}

#nrl-phishing-quiz .pq-folder-badge.gray {
  background: #ccc !important;
}

#nrl-phishing-quiz .pq-divider {
  height:     1px !important;
  background: #dde1e7 !important;
  margin:     4px 16px !important;
}

#nrl-phishing-quiz .pq-progress-wrap {
  padding:    12px 16px !important;
  margin-top: auto !important;
  border-top: 1px solid #dde1e7 !important;
  flex-shrink: 0 !important;
}

#nrl-phishing-quiz .pq-prog-label {
  font-size:      10px !important;
  color:          #888 !important;
  margin-bottom:  6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  display:        block !important;
}

#nrl-phishing-quiz .pq-prog-bar {
  height:        4px !important;
  background:    #e0e0e0 !important;
  border-radius: 2px !important;
  overflow:      hidden !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-prog-fill {
  height:        100% !important;
  background:    #1a73e8 !important;
  border-radius: 2px !important;
  transition:    width 0.3s ease !important;
  display:       block !important;
}

/* ── Main area ── */
#nrl-phishing-quiz .pq-main {
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  grid-column:    2;
  grid-row:       1;
  min-width:      0;
}

/* ── Email list ── */
#nrl-phishing-quiz .pq-email-list {
  overflow-y: auto !important;
  flex:       1 !important;
  display:    none !important;
}

#nrl-phishing-quiz .pq-email-list.active {
  display: block !important;
}

#nrl-phishing-quiz .pq-email-row {
  padding:       10px 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  cursor:        pointer !important;
  display:       grid !important;
  grid-template-columns: 32px 1fr auto !important;
  gap:           10px !important;
  align-items:   center !important;
  border-left:   3px solid transparent !important;
  list-style:    none !important;
}

#nrl-phishing-quiz .pq-email-row:hover            { background: #f5f6f8 !important; }
#nrl-phishing-quiz .pq-email-row.selected         { background: #e8f0fe !important; }
#nrl-phishing-quiz .pq-email-row.answered-correct { border-left-color: #1e8e3e !important; }
#nrl-phishing-quiz .pq-email-row.answered-wrong   { border-left-color: #d93025 !important; }

#nrl-phishing-quiz .pq-avatar {
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-size:       11px !important;
  font-weight:     700 !important;
  flex-shrink:     0 !important;
  line-height:     1 !important;
}

#nrl-phishing-quiz .pq-email-meta  { min-width: 0 !important; }

#nrl-phishing-quiz .pq-sender {
  font-size:     13px !important;
  font-weight:   600 !important;
  color:         #1a1a2e !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-subject {
  font-size:     12px !important;
  color:         #444 !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-preview {
  font-size:     11px !important;
  color:         #888 !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-email-time {
  font-size:   11px !important;
  color:       #888 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── Email viewer ── */
#nrl-phishing-quiz .pq-viewer {
  flex:           1 !important;
  overflow-y:     auto !important;
  padding:        20px 24px !important;
  display:        none !important;
  flex-direction: column !important;
}

#nrl-phishing-quiz .pq-viewer.active {
  display: flex !important;
}

#nrl-phishing-quiz .pq-view-subject {
  font-size:     18px !important;
  font-weight:   700 !important;
  color:         #1a1a2e !important;
  margin-bottom: 14px !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-view-sender-row {
  display:        flex !important;
  align-items:    center !important;
  gap:            10px !important;
  margin-bottom:  16px !important;
  padding-bottom: 14px !important;
  border-bottom:  1px solid #eee !important;
}

#nrl-phishing-quiz .pq-view-avatar {
  width:           36px !important;
  height:          36px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-size:       13px !important;
  font-weight:     700 !important;
  flex-shrink:     0 !important;
  line-height:     1 !important;
}

#nrl-phishing-quiz .pq-view-from {
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       #1a1a2e !important;
  display:     block !important;
}

#nrl-phishing-quiz .pq-view-addr {
  font-size: 12px !important;
  color:     #666 !important;
  display:   block !important;
}

#nrl-phishing-quiz .pq-view-to {
  font-size:  11px !important;
  color:      #888 !important;
  margin-top: 2px !important;
  display:    block !important;
}

#nrl-phishing-quiz .pq-view-body {
  font-size:   13px !important;
  color:       #222 !important;
  line-height: 1.7 !important;
  flex:        1 !important;
}

#nrl-phishing-quiz .pq-view-body p      { margin-bottom: 10px !important; }
#nrl-phishing-quiz .pq-view-body a      { color: #1a73e8 !important; text-decoration: underline !important; }
#nrl-phishing-quiz .pq-view-body strong { font-weight: 600 !important; }
#nrl-phishing-quiz .pq-view-body em     { font-style: italic !important; }

/* ── Attachment chip ── */
#nrl-phishing-quiz .pq-attachment {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           8px !important;
  border:        1px solid #dde1e7 !important;
  border-radius: 4px !important;
  padding:       6px 12px !important;
  font-size:     12px !important;
  color:         #444 !important;
  margin-top:    8px !important;
  background:    #f9f9f9 !important;
}

#nrl-phishing-quiz .pq-att-icon {
  width:           20px !important;
  height:          20px !important;
  background:      #4285f4 !important;
  border-radius:   2px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
}

#nrl-phishing-quiz .pq-att-icon svg { width: 12px !important; height: 12px !important; }

/* ── Verdict bar ── */
#nrl-phishing-quiz .pq-verdict-bar {
  border-top:  1px solid #eee !important;
  padding-top: 16px !important;
  margin-top:  16px !important;
}

#nrl-phishing-quiz .pq-verdict-q {
  font-size:     13px !important;
  font-weight:   600 !important;
  color:         #1a1a2e !important;
  margin-bottom: 10px !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-verdict-btns {
  display: flex !important;
  gap:     10px !important;
}

#nrl-phishing-quiz .pq-verdict-btn {
  flex:          1 !important;
  padding:       10px !important;
  border-radius: 6px !important;
  border:        2px solid !important;
  font-size:     13px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  transition:    all 0.15s ease !important;
  background:    transparent !important;
  text-align:    center !important;
}

#nrl-phishing-quiz .pq-verdict-btn.legit {
  border-color: #1e8e3e !important;
  color:        #1e8e3e !important;
  background:   #f0faf3 !important;
}

#nrl-phishing-quiz .pq-verdict-btn.legit:hover:not(:disabled) {
  background: #1e8e3e !important;
  color:      #fff !important;
}

#nrl-phishing-quiz .pq-verdict-btn.phish {
  border-color: #d93025 !important;
  color:        #d93025 !important;
  background:   #fdf3f2 !important;
}

#nrl-phishing-quiz .pq-verdict-btn.phish:hover:not(:disabled) {
  background: #d93025 !important;
  color:      #fff !important;
}

#nrl-phishing-quiz .pq-verdict-btn:disabled {
  opacity: 0.5 !important;
  cursor:  not-allowed !important;
}

/* ── Feedback ── */
#nrl-phishing-quiz .pq-feedback {
  margin-top:    12px !important;
  border-radius: 6px !important;
  padding:       12px 14px !important;
  font-size:     12px !important;
  line-height:   1.6 !important;
  display:       none !important;
}

#nrl-phishing-quiz .pq-feedback.show    { display: block !important; }
#nrl-phishing-quiz .pq-feedback.correct { background: #e6f4ea !important; border: 1px solid #a8d5b5 !important; color: #1e5631 !important; }
#nrl-phishing-quiz .pq-feedback.wrong   { background: #fce8e6 !important; border: 1px solid #f5c6c3 !important; color: #7a1f1a !important; }

#nrl-phishing-quiz .pq-feedback-title {
  font-weight:   700 !important;
  margin-bottom: 4px !important;
  font-size:     13px !important;
  display:       block !important;
}

/* ── Next button ── */
#nrl-phishing-quiz .pq-next-btn {
  margin-top:    10px !important;
  padding:       8px 20px !important;
  background:    #1a73e8 !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 4px !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  display:       none !important;
}

#nrl-phishing-quiz .pq-next-btn.show  { display: inline-block !important; }
#nrl-phishing-quiz .pq-next-btn:hover { background: #1557b0 !important; }

/* ── Results screen ── */
#nrl-phishing-quiz .pq-results {
  flex:            1 !important;
  display:         none !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         32px !important;
  text-align:      center !important;
}

#nrl-phishing-quiz .pq-results.show { display: flex !important; }

#nrl-phishing-quiz .pq-result-score {
  font-size:   56px !important;
  font-weight: 800 !important;
  color:       #1a1a2e !important;
  line-height: 1 !important;
  display:     block !important;
}

#nrl-phishing-quiz .pq-result-label {
  font-size:  16px !important;
  color:      #444 !important;
  margin:     8px 0 12px !important;
  display:    block !important;
}

#nrl-phishing-quiz .pq-result-msg {
  font-size:     14px !important;
  color:         #444 !important;
  margin-bottom: 20px !important;
  max-width:     280px !important;
  line-height:   1.6 !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-result-bars {
  width:         100% !important;
  max-width:     320px !important;
  margin-bottom: 20px !important;
}

#nrl-phishing-quiz .pq-result-row {
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
  margin-bottom: 8px !important;
  font-size:     13px !important;
}

#nrl-phishing-quiz .pq-result-row-label {
  width:      80px !important;
  text-align: right !important;
  color:      #666 !important;
  flex-shrink: 0 !important;
}

#nrl-phishing-quiz .pq-result-bar-wrap {
  flex:          1 !important;
  height:        8px !important;
  background:    #eee !important;
  border-radius: 4px !important;
  overflow:      hidden !important;
}

#nrl-phishing-quiz .pq-result-bar-fill {
  height:        100% !important;
  border-radius: 4px !important;
  transition:    width 0.6s ease !important;
  display:       block !important;
}

#nrl-phishing-quiz .pq-result-bar-fill.green { background: #1e8e3e !important; }
#nrl-phishing-quiz .pq-result-bar-fill.red   { background: #d93025 !important; }

#nrl-phishing-quiz .pq-result-num {
  width:       30px !important;
  font-weight: 600 !important;
  color:       #1a1a2e !important;
  flex-shrink: 0 !important;
}

#nrl-phishing-quiz .pq-restart-btn {
  padding:       10px 28px !important;
  background:    #1a73e8 !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 6px !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
}

#nrl-phishing-quiz .pq-restart-btn:hover { background: #1557b0 !important; }

/* ════════════════════════════
   RESPONSIVE
   ════════════════════════════ */
@media (max-width: 640px) {
  #nrl-phishing-quiz .pq-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows:    auto 1fr !important;
    height:                auto !important;
    min-height:            520px !important;
  }

  #nrl-phishing-quiz .pq-sidebar {
    grid-column:    1 !important;
    grid-row:       1 !important;
    flex-direction: row !important;
    border-right:   none !important;
    border-bottom:  1px solid #dde1e7 !important;
    overflow-x:     auto !important;
    align-items:    center !important;
  }

  #nrl-phishing-quiz .pq-sidebar-top  { border-bottom: none !important; border-right: 1px solid #dde1e7 !important; white-space: nowrap !important; }
  #nrl-phishing-quiz .pq-folders      { display: flex !important; padding: 0 8px !important; white-space: nowrap !important; }
  #nrl-phishing-quiz .pq-divider      { display: none !important; }
  #nrl-phishing-quiz .pq-progress-wrap { margin-top: 0 !important; border-top: none !important; border-left: 1px solid #dde1e7 !important; min-width: 120px !important; }

  #nrl-phishing-quiz .pq-main {
    grid-column:  1 !important;
    grid-row:     2 !important;
    min-height:   420px !important;
  }

  #nrl-phishing-quiz .pq-email-row { grid-template-columns: 32px 1fr !important; }
  #nrl-phishing-quiz .pq-email-time { display: none !important; }
}