/*
 * Tjep's Digital Agents — Shared CSS Variables
 * /DesktopModules/TjepsNavigator/CSS/agents-shared.css
 *
 * Accentkleur wordt per agent dynamisch overschreven via JS setAccent()
 * op basis van de Brand Guardian primaire kleur.
 * Default: Tjep's green #28a745
 */

:root {
  /* Accent — wordt dynamisch ingesteld vanuit Brand Guardian */
  --accent:         #28a745;
  --accent-h:       #1e7e34;
  --accent-soft:    rgba(40,167,69,0.08);
  --accent-border:  rgba(40,167,69,0.25);
  --accent-text:    #1e7e34;

  /* Layout */
  --bg:             #ffffff;
  --bg-soft:        #f8f9fa;
  --bg-card:        #ffffff;
  --border:         #dee2e6;
  --border-soft:    #e9ecef;

  /* Tekst */
  --text:           #212529;
  --text-muted:     #6c757d;
  --text-light:     #adb5bd;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── Reset ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Shared form elements ───────────────────────────── */
.f-label{font-size:12px;font-weight:500;color:var(--text-muted);margin-bottom:5px;display:block}
.f-label em{color:#dc3545;font-style:normal}
.f-hint{font-size:11px;color:var(--text-light);margin-top:4px}

.f-input,.f-select,.f-textarea{
  width:100%;padding:9px 12px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);color:var(--text);
  font-size:14px;font-family:inherit;
  outline:none;transition:border-color .18s,box-shadow .18s;line-height:1.5;
}
.f-input:focus,.f-select:focus,.f-textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.f-input::placeholder,.f-textarea::placeholder{color:var(--text-light)}
.f-textarea{resize:vertical;min-height:80px}

.f-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.f-full{margin-bottom:14px}

/* ── Brand loaded badge ─────────────────────────────── */
.brand-loaded{
  display:none;margin-top:6px;padding:6px 12px;
  background:var(--accent-soft);border:1px solid var(--accent-border);
  border-radius:var(--r-sm);font-size:12px;color:var(--accent-text);font-weight:500;
}

/* ── Buttons ────────────────────────────────────────── */
.btn-primary,.header-button2{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 24px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--r-md);font-size:14px;
  font-weight:500;cursor:pointer;font-family:inherit;
  transition:background .15s,transform .1s;
}
.btn-primary:hover,.header-button2:hover{background:var(--accent-h)}
.btn-primary:active,.header-button2:active{transform:scale(0.98)}

.btn-secondary{
  padding:7px 16px;border-radius:var(--r-sm);font-size:13px;
  font-family:inherit;cursor:pointer;font-weight:500;transition:all .15s;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-text);
}
.btn-secondary:hover{background:var(--accent);color:#fff}

.btn-ghost{
  padding:7px 16px;border-radius:var(--r-sm);font-size:13px;
  font-family:inherit;cursor:pointer;font-weight:500;transition:all .15s;
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
}
.btn-ghost:hover{border-color:var(--text-muted);color:var(--text)}

.val-msg{font-size:12px;color:#dc3545;margin-top:8px;display:none}

/* ── Loading dots ───────────────────────────────────── */
.dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:blink 1.2s ease-in-out infinite;
}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

/* ── Mode / type cards ──────────────────────────────── */
.mode-card,.type-card{
  background:var(--bg-card);border:2px solid var(--border);
  border-radius:var(--r-md);padding:10px 8px;
  cursor:pointer;transition:all .15s;text-align:center;
}
.mode-card:hover,.type-card:hover{border-color:var(--accent)}
.mode-card.active,.type-card.active{border-color:var(--accent);background:var(--accent-soft)}
.mode-icon,.type-icon{font-size:18px;display:block;margin-bottom:4px}
.mode-lbl,.type-lbl{font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.3}
.mode-card.active .mode-lbl,.type-card.active .type-lbl{color:var(--text)}

/* ── Tone / count pills ─────────────────────────────── */
.tone-pill,.count-btn,.jtype-pill{
  padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;
  background:var(--bg-soft);border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;transition:all .15s;font-family:inherit;
}
.tone-pill:hover,.count-btn:hover,.jtype-pill:hover{border-color:var(--accent);color:var(--accent-text)}
.tone-pill.active,.count-btn.active,.jtype-pill.active{
  background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-text);font-weight:600;
}

/* ── Section blocks (result) ────────────────────────── */
.result-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:8px}
.result-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
  border-radius:var(--r-sm);font-size:12px;font-weight:600;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-text);
}
.result-btns{display:flex;gap:8px}

/* Save status */
.save-status{
  display:none;font-size:12px;padding:7px 12px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--accent-border);
  color:var(--accent-text);margin-bottom:12px;font-weight:500;
}

/* ── Generic section card ───────────────────────────── */
.sec-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.sec-hdr{padding:10px 16px;background:var(--bg-soft);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:8px}
.sec-icon{font-size:14px}
.sec-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.sec-body{padding:14px 16px;font-size:13px;color:var(--text);line-height:1.75;white-space:pre-wrap;word-break:break-word}

/* ── Error ──────────────────────────────────────────── */
.agent-error{background:#fff5f5;border:1px solid #fed7d7;border-radius:var(--r-md);padding:1rem 1.25rem;display:none}
.agent-error-txt{font-size:14px;color:#c53030}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:560px){
  .f-row2{grid-template-columns:1fr}
  .mode-grid,.type-grid{grid-template-columns:repeat(3,1fr)}
}