/* ==========================================
   PUETTGEN CONSULTING — App Styles (PSI look)
   For LTA (forms, questions, admin, charts)
   ========================================== */

/* ---- Design tokens ---- */
:root{
  /* Brand & semantic */
  --brand:#0072CE;
  --brand-hover:#005ba1;
  --brand-active:#004785;

  --success:#16a34a;        --success-bg:#dcfce7;  --success-text:#15803d;
  --warn:#d97706;           --warn-bg:#fef3c7;     --warn-text:#92400e;
  --danger:#dc2626;         --danger-bg:#fef2f2;   --danger-text:#991b1b;

  /* Team (fallback for dashed team line) */
  --team: var(--danger);

  /* Neutrals */
  --bg:#fafafa; --card:#ffffff;
  --text:#1f2937; --muted:#6b7280; --muter:#9ca3af;
  --line:#e5e7eb; --line-2:#d1d5db;

  /* Radius / Shadow / Timing */
  --r-sm:.375rem; --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 10px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(59,130,246,.25);

  /* Spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem;
}

/* ---- Base ---- */
*,
*::before,
*::after { box-sizing:border-box; }

html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

img{ max-width:100%; height:auto; display:block; }

/* iOS zoom avoidance */
input[type="text"], select { font-size:16px; }

/* Focus */
:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }

/* Links */
a{ color:inherit; }
a[href]{ color:var(--brand); text-decoration:none; }
a[href]:hover{ text-decoration:underline; }

/* Helpers used in forms/messages */
.note{ color:var(--muted); font-size:.95rem; }
.err{
  background:var(--danger-bg);
  border:1px solid var(--line);
  color:var(--danger-text);
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
}

/* ---- Layout ---- */
.container{ max-width:1200px; margin:0 auto; padding:var(--s4); }
.container--narrow{ max-width:960px; }

.header{ margin-bottom:var(--s6); }
.header--horizontal{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}

.brand__logo{ height:56px; width:auto; }
.brand__title{ margin:.25rem 0 0; font-weight:700; font-size:1.75rem; }
.lead{ color:var(--muted); margin:.25rem 0 0; }

/* Language switch */
.lang{ margin:0; }
.lang select{
  min-width:110px;
  padding:var(--s2) var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--text);
}
.lang select:focus{ box-shadow:var(--focus); border-color:var(--brand); }
.lang-switch{ float:right; margin-left:1rem; }

/* ---- Tabs (admin) ---- */
.tabs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tabs a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .65rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff; color:var(--text);
  text-decoration:none;
}
.tabs a:hover{ border-color:var(--line-2); background:#f7f9fc; }
.tabs a.active{ background:#f5f7fb; border-color:#d0d7e3; font-weight:700; }

/* ---- Cards ---- */
.card{
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--s5);
  background:#fff;
  box-shadow:var(--shadow-sm);
  margin:var(--s4) 0;
}

/* ---- Forms ---- */
.form-plain{ margin:0 0 var(--s8); }

.form-group{ margin-bottom:var(--s5); }
.form-label{ display:block; font-weight:600; margin-bottom:var(--s2); }
.form-label--required::after{ content:" *"; color:var(--danger); }

.input{
  width:100%; max-width:720px;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
}
.input:hover{ border-color:var(--line-2); }
.input:focus{ border-color:var(--brand); box-shadow:var(--focus); outline:0; }

.form-hint{ display:block; color:var(--muted); font-size:.9rem; margin-top:.35rem; }
.form-error{ color:var(--danger-text); font-size:.9rem; margin-top:.35rem; min-height:1.2em; }
.form-field--error{ border-color:var(--danger) !important; }

/* Questions grid (PSI layout) */
.questions{ display:grid; gap:var(--s4); margin-top:var(--s4); }
.q{
  display:grid;
  grid-template-columns:1fr auto;   /* label left, select right */
  gap:var(--s3);
  align-items:center;
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.question__label{ margin:0; }
.question__select{
  width:auto; min-width:180px; justify-self:start;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
}
.question__select:hover{ border-color:var(--line-2); }
.question__select:focus{ border-color:var(--brand); box-shadow:var(--focus); outline:0; }
.scale-reminder{ margin-top:var(--s3); color:var(--muted); }

/* Consent */
.checkbox{ display:flex; gap:var(--s3); align-items:flex-start; margin-top:var(--s4); }
.checkbox__input{ width:18px; height:18px; accent-color:var(--brand); margin-top:.25rem; }
.checkbox__label{ color:var(--muted); }
.checkbox__label a{ color:var(--brand); }

/* ---- Buttons ---- */
.btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--s3) var(--s4);
  border:none; border-radius:var(--r-md);
  background:var(--brand); color:#fff; font-weight:700; cursor:pointer;
  min-height:44px; min-width:44px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background:var(--brand-hover); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn:active{ background:var(--brand-active); transform:none; }
.btn:focus-visible{ box-shadow:var(--focus); }

.btn--secondary{ background:#fff; color:var(--text); border:1px solid var(--line); }
.btn--secondary:hover{ background:#f7f7f7; border-color:var(--line-2); }

.btn--ghost{ background:transparent; color:var(--brand); border:1px solid transparent; }
.btn--ghost:hover{ background:#eef4fb; }

.btn--small{ padding:.4rem .6rem; font-size:.875rem; }
.btn--danger{ background:#fff0f2; color:#8b1d2c; border:1px solid #ffd7dd; }

.btn-group{ display:flex; gap:var(--s2); margin-top:var(--s4); }
.btn-group--end{ justify-content:flex-end; }

/* Ensure <a class="btn"> has correct text colors */
a.btn, button.btn { color:#fff !important; }
a.btn:visited { color:#fff !important; }
a.btn--secondary, button.btn--secondary { color:var(--text) !important; }
a.btn--ghost, button.btn--ghost       { color:var(--brand) !important; }

/* ---- Tables (admin/results) ---- */
.table-container{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:left; }
.table thead th{ background:#f9fafb; font-weight:700; font-size:.85rem; letter-spacing:.02em; }
.table--compact th, .table--compact td{ padding:var(--s2) var(--s3); }
.table-wrap{ overflow-x:auto; }
.nowrap{ white-space:nowrap; }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:.2rem .5rem; border-radius:var(--r-full); font-size:.8rem; font-weight:600; }
.badge--success{ background:var(--success-bg); color:var(--success-text); }
.badge--warning{ background:var(--warn-bg); color:var(--warn-text); }
.badge--danger{ background:var(--danger-bg); color:var(--danger-text); }

/* ---- Mini cards (admin list with small charts) ---- */
.grid-mini{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s4); }
.mini{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); background:#fff; }
.mini__head{ margin-bottom:var(--s3); color:var(--muted); }
.mini__chart{ width:100%; height:180px; }

/* ---- Radar/chart area (results/admin) ---- */
.chart-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.chart-actions{ display:flex; gap:var(--s2); }
.chart-container{
  position:relative; min-height:360px; height:50vh; max-height:520px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3);
}
.chart-loading, .chart-error{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:600;
}

/* Alerts */
.alert{
  background:#fff7e6;
  border:1px solid #ffecb3;
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  margin:var(--s3) 0;
}

/* ---- Status text colors (results table) ---- */
.status-a{ color:#16a34a; font-weight:600; } /* Strength */
.status-b{ color:#b45309; font-weight:600; } /* Watch */
.status-c{ color:#b91c1c; font-weight:600; } /* Needs attention */

/* ---- Utility ---- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.footer{
  margin:var(--s8) 0 var(--s6);
  color:var(--muted);
  text-align:center;
  padding-top:var(--s6);
  border-top:1px solid var(--line);
}

/* ---- Responsive ---- */
@media (max-width:720px){
  .q{ grid-template-columns:1fr; }
  .question__select{ width:100%; min-width:0; }
  .chart-container{ height:360px; }
}
@media (max-width:520px){
  .container{ padding:var(--s3); }
  .brand__logo{ height:48px; }
}

/* ---- Clean up/compat ---- */
.section-divider, hr.top, .top-rule{ display:none; }
.questionnaire, .question-list, .cards-wrap, .frame{
  border:none !important;
  box-shadow:none !important;
  background:transparent;
}
/* Links: not on button-like anchors */
a { color: inherit; }
a[href]:not(.btn):not(.btn--secondary):not(.btn--ghost) {
  color: var(--brand);
  text-decoration: none;
}
a[href]:hover:not(.btn):not(.btn--secondary):not(.btn--ghost) {
  text-decoration: underline;
}

/* ===== Print (PDF) ===== */
@media print {
  @page { size: A4 portrait; margin: 16mm; }
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .no-print { display: none !important; }        /* Buttons, Navi etc. */
  .sheet { box-shadow: none; border: 0; }        /* cleaner A4 */
  .card, .table-container { break-inside: avoid; }
  .chart-container { height: 420px !important; } /* good for A4 */

  /* Table head bg in print */
  .table thead th{ background:#f2f4f7 !important; }
}

/* Legend styles for result page (screen & print) */
.legend {
  display:flex; gap:1rem; align-items:center; margin-top:.5rem;
  font-size:.9rem; color:var(--muted);
}
.legend__item { display:inline-flex; gap:.5rem; align-items:center; }
.legend__swatch { width:16px; height:6px; border-radius:4px; }
.legend__swatch--mine { background:var(--brand); }
.legend__swatch--team {
  height:0; width:16px;
  border-top:3px dashed var(--team);
}

/* Make table rules a bit stronger (helps in PDF) */
.table th, .table td { border-bottom: 1px solid #e5e7eb; }