/* ═══════════════════════════════════════════════════════════════════
   G24 Training Panel — Global Reusable Help Drawer
   Loaded once via base.html. Works on EVERY feature page.

   HOW TO USE (per blueprint template):
   ─────────────────────────────────────
   1. Trigger button anywhere in header:
        <button class="g24-tp-btn">📖 How this works?</button>

   2. Content block (hidden, just data):
        <div class="g24-tp-def" data-title="Feature Name">
          <section data-tab="why">
            <div class="g24-tps" data-kw="keywords space separated">
              <span>🚀</span>
              <b>Title</b>
              <p>Description. Use <strong>emphasis</strong>.</p>
            </div>
          </section>
          <section data-tab="how"> ... </section>
          <section data-tab="tech"> ... </section>
        </div>

   TAB VISIBILITY (controlled by JS role config — ONE place to change):
     Tab 1 "Why?"     → account_admin, consultant, staff, viewer, trial, internal_admin
     Tab 2 "How to"   → EVERYONE
     Tab 3 "Technical"→ super_admin, internal_admin, developer only

   Created: 2026-04-26
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel dark-mode tokens (always dark, independent of page theme) ── */
:root {
  --g24tp-bg:              #0d1117;
  --g24tp-border:          #6366f1;
  --g24tp-hdr-bg:          rgba(13,17,23,.96);
  --g24tp-hdr-border:      rgba(255,255,255,.08);
  --g24tp-text:            #f1f5f9;
  --g24tp-text-muted:      #94a3b8;
  --g24tp-text-dim:        #475569;
  --g24tp-text-accent:     #c7d2fe;
  --g24tp-eyebrow:         #818cf8;
  --g24tp-section-hover:   rgba(255,255,255,.04);
  --g24tp-close-border:    rgba(255,255,255,.12);
  --g24tp-search-bg:       rgba(99,102,241,.07);
  --g24tp-glow-indigo:     #6366f1;
  --g24tp-glow-purple:     #a855f7;
  --g24tp-glow-cyan:       #06b6d4;
  --g24tp-width:           440px;
}

/* ── Trigger button ─────────────────────────────────────────────── */
.g24-tp-btn {
  background: transparent;
  color: var(--tone-info-fg, #1a5fa8);
  border: 1px solid var(--tone-info-border, #bfdbfe);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.g24-tp-btn:hover {
  background: var(--tone-info-fg, #1a5fa8);
  color: var(--bg, #fff);
  border-color: var(--tone-info-fg, #1a5fa8);
}
.g24-tp-btn:focus-visible {
  outline: 2px solid var(--g24tp-glow-indigo);
  outline-offset: 2px;
}

/* ── Trigger row layout helper ──────────────────────────────────── */
/* Use instead of inline style="display:flex;..." on the wrapper div */
.g24-tp-trigger-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 20px 2px;
}

/* ── Content definition holder (invisible data container) ───────── */
.g24-tp-def { display: none !important; }

/* ── Panel (fixed right-side drawer) ────────────────────────────── */
.g24-tp-panel {
  /* color-scheme: dark signals to browser/extensions (Dark Reader, Stylus,
     Windows forced-colors) that this widget is intentionally dark-themed
     and must not be inverted. Without this, Dark Reader sees a dark
     hardcoded background and flips it to white → invisible text inside
     a white blank panel. 2026-05-18 fix. */
  color-scheme: dark;
  forced-color-adjust: none;
  position: fixed;
  top: 0;
  right: 0;
  width: var(--g24tp-width);
  max-width: 92vw;
  height: 100%;
  padding-top: calc(52px + env(safe-area-inset-top, 0));    /* clear the fixed top header + iPhone notch */
  padding-right: env(safe-area-inset-right, 0);             /* Wave B7: landscape right-notch */
  padding-bottom: env(safe-area-inset-bottom, 0);           /* Wave B7: home-indicator */
  background: var(--g24tp-bg, #0d1117);
  border-left: 2px solid var(--g24tp-border, #6366f1);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%); /* starts off-screen to the right */
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -6px 0 40px rgba(99,102,241,.2),
              -20px 0 60px rgba(0,0,0,.5);
  will-change: transform;
}
/* Belt-and-suspenders against Dark Reader: when its root attribute is
   present, force the dark panel tokens via stronger specificity. */
html[data-darkreader-scheme] .g24-tp-panel,
html[data-darkreader-mode] .g24-tp-panel {
  background: #0d1117 !important;
  color: #f1f5f9 !important;
}
html[data-darkreader-scheme] .g24-tp-panel .g24-tp-sec-text,
html[data-darkreader-mode] .g24-tp-panel .g24-tp-sec-text {
  color: #94a3b8 !important;
}
html[data-darkreader-scheme] .g24-tp-panel .g24-tp-sec-title,
html[data-darkreader-mode] .g24-tp-panel .g24-tp-sec-title {
  color: #f1f5f9 !important;
}
.g24-tp-panel.g24-tp-open {
  transform: translateX(0);
  animation: g24TpGlow 5s ease-in-out infinite;
}

/* ── Page push when panel opens ─────────────────────────────────── */
body.g24-tp-pushed {
  padding-right: var(--g24tp-width);
  transition: padding-right .3s cubic-bezier(.4, 0, .2, 1);
}

/* ── Border glow animation ──────────────────────────────────────── */
@keyframes g24TpGlow {
  0%,100% {
    border-left-color: var(--g24tp-glow-indigo);
    box-shadow: -6px 0 40px rgba(99,102,241,.3), -20px 0 60px rgba(0,0,0,.5);
  }
  33% {
    border-left-color: var(--g24tp-glow-purple);
    box-shadow: -6px 0 48px rgba(168,85,247,.4), -20px 0 60px rgba(0,0,0,.5);
  }
  66% {
    border-left-color: var(--g24tp-glow-cyan);
    box-shadow: -6px 0 40px rgba(6,182,212,.3), -20px 0 60px rgba(0,0,0,.5);
  }
}

/* ── Header: feature name + tabs + close ────────────────────────── */
.g24-tp-hdr {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 0;
  background: var(--g24tp-hdr-bg);
  border-bottom: 1px solid var(--g24tp-hdr-border);
  flex-shrink: 0;
}
.g24-tp-hdr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}
.g24-tp-feature-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--g24tp-eyebrow);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tab row */
.g24-tp-tabs {
  display: flex;
  gap: 2px;
  margin: 0 -16px;              /* bleed to edges */
  padding: 0 12px;
}
.g24-tp-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--g24tp-text-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  letter-spacing: 0.01em;
}
.g24-tp-tab:hover              { color: var(--g24tp-text); }
.g24-tp-tab.g24-tp-tab-active  {
  color: var(--g24tp-eyebrow);
  border-bottom-color: var(--g24tp-glow-indigo);
}
.g24-tp-tab[hidden]            { display: none; }
.g24-tp-tab:focus-visible {
  outline: 2px solid var(--g24tp-glow-indigo);
  outline-offset: -2px;
}

/* Close button */
.g24-tp-close {
  background: none;
  border: 1px solid var(--g24tp-close-border);
  color: var(--g24tp-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-md, 6px);
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.g24-tp-close:hover {
  background: rgba(99,102,241,.2);
  color: var(--g24tp-text);
  border-color: var(--g24tp-glow-indigo);
}
.g24-tp-close:focus-visible {
  outline: 2px solid var(--g24tp-glow-indigo);
  outline-offset: 2px;
}

/* ── Search bar ─────────────────────────────────────────────────── */
.g24-tp-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 7px 12px;
  background: var(--g24tp-search-bg);
  border: 1px solid var(--g24tp-glow-indigo);
  border-radius: var(--radius-lg, 10px);
  flex-shrink: 0;
  animation: g24TpSearchGlow 5s ease-in-out infinite;
}
@keyframes g24TpSearchGlow {
  0%,100% {
    border-color: var(--g24tp-glow-indigo);
    box-shadow: 0 0 0 3px rgba(99,102,241,.08);
  }
  33% {
    border-color: var(--g24tp-glow-purple);
    box-shadow: 0 0 0 3px rgba(168,85,247,.07);
  }
  66% {
    border-color: var(--g24tp-glow-cyan);
    box-shadow: 0 0 0 3px rgba(6,182,212,.07);
  }
}
.g24-tp-search-ico { color: var(--g24tp-eyebrow); flex-shrink: 0; }
.g24-tp-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--g24tp-text);
  font-size: var(--text-sm, 0.875rem);
  min-width: 0;
}
.g24-tp-search-input::placeholder { color: var(--g24tp-text-dim); }
.g24-tp-search-input:focus-visible {
  outline: none; /* search-wrap border provides visual focus context */
}

/* ── Scrollable body ────────────────────────────────────────────── */
.g24-tp-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.g24-tp-body::-webkit-scrollbar       { width: 3px; }
.g24-tp-body::-webkit-scrollbar-track { background: transparent; }
.g24-tp-body::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.4);
  border-radius: 999px;
}
.g24-tp-body::-webkit-scrollbar-thumb:hover {
  background: var(--g24tp-glow-indigo);
}

/* ── Tab divider (between Why and How in same scroll) ───────────── */
.g24-tp-tab-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 6px;
  color: var(--g24tp-eyebrow);
  font-size: var(--text-xs, 0.72rem);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.g24-tp-tab-divider::before,
.g24-tp-tab-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--g24tp-hdr-border);
}
.g24-tp-tab-divider[hidden] { display: none; }

/* ── Individual help section ────────────────────────────────────── */
.g24-tp-sec {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px 8px;
  border-radius: var(--radius-lg, 10px);
  transition: background .15s;
  cursor: default;
}
.g24-tp-sec:hover                { background: var(--g24tp-section-hover); }
.g24-tp-sec[hidden]              { display: none; }
.g24-tp-sec-icon {
  font-size: 1.45em;
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  margin-top: 2px;
}
.g24-tp-sec-body                 { min-width: 0; }
.g24-tp-sec-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  color: var(--g24tp-text);
  margin-bottom: 5px;
  line-height: 1.3;
}
.g24-tp-sec-text {
  font-size: 0.82rem;
  color: var(--g24tp-text-muted);
  line-height: 1.68;
}
.g24-tp-sec-text strong { color: var(--g24tp-text-accent); }
.g24-tp-sec-text code   {
  background: rgba(255,255,255,.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .88em;
  color: var(--g24tp-glow-cyan);
}

/* ── "Nothing found" state ──────────────────────────────────────── */
.g24-tp-no-results {
  display: none;
  padding: 28px 16px;
  text-align: center;
  color: var(--g24tp-text-muted);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.65;
}
.g24-tp-no-results strong { color: var(--g24tp-text); }

/* ── WhatsApp help button ───────────────────────────────────────── */
.g24-tp-wa-wrap {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--g24tp-hdr-border);
  flex-shrink: 0;
}
.g24-tp-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--wa-green, #25d366);
  color: var(--color-on-primary, #fff);
  border-radius: var(--radius-lg, 10px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.g24-tp-wa-btn:hover {
  background: var(--wa-green-hover, #1ebe5d);
  transform: translateY(-1px);
}
.g24-tp-wa-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Responsive: full-width on small screens ────────────────────── */
@media (max-width: 600px) {
  :root { --g24tp-width: 100vw; }
  .g24-tp-panel { padding-top: 44px; }
  body.g24-tp-pushed { padding-right: 0; }
}