/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHT — AI Maturity Assessment: app-specific styles.
   Uses the shared theme CSS variables (never fixed palette) so dark/light both
   render correctly. --lvl-color is set inline per band.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Result card ─────────────────────────────────────────────────────────── */
.aimat-result{ margin-bottom:22px; }
.aimat-result-top{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.aimat-gauge-wrap{ flex:0 0 auto; }
.aimat-gauge-pct{ font-size:26px; font-weight:800; }
.aimat-gauge-sub{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.aimat-result-info{ flex:1 1 260px; min-width:220px; }
.aimat-result-badge{ display:inline-block; font-size:20px; font-weight:800; color:var(--lvl-color,var(--accent));
  border:2px solid var(--lvl-color,var(--accent)); border-radius:999px; padding:6px 18px; margin-bottom:10px; }
.aimat-result-summary{ font-size:14px; color:var(--text); font-weight:600; margin-bottom:10px; line-height:1.45; }
.aimat-result-meta{ font-size:12px; color:var(--text-muted); }
.aimat-result-meta b{ color:var(--text); }
.aimat-result-eval{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.aimat-eval-label{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; margin-bottom:8px; }
.aimat-eval-label i{ color:var(--accent); }
.aimat-result-eval p{ font-size:14px; line-height:1.6; color:var(--text); margin:0; }

/* empty state */
.aimat-empty{ text-align:center; padding:40px 20px; }
.aimat-empty i{ font-size:42px; color:var(--text-dim); display:block; margin-bottom:14px; }
.aimat-empty-title{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.aimat-empty-sub{ font-size:13px; color:var(--text-muted); }

/* ── Questionnaire form ──────────────────────────────────────────────────── */
.aimat-form{ padding-bottom:8px; }
.aimat-form-head{ margin-bottom:6px; }
.aimat-form-sub{ font-size:13px; color:var(--text-muted); margin:4px 0 14px; }
.aimat-progress{ height:8px; background:var(--border); border-radius:6px; overflow:hidden; }
.aimat-progress-bar{ height:100%; background:var(--accent); border-radius:6px; transition:width .25s ease; }
.aimat-progress-txt{ font-size:12px; color:var(--text-muted); margin-top:6px; }

.aimat-cat{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--accent);
  margin:22px 0 10px; padding-bottom:6px; border-bottom:1px dashed var(--border); }

.aimat-q{ padding:14px 0; border-bottom:1px solid var(--border); transition:background .3s ease; border-radius:8px; }
.aimat-q:last-of-type{ border-bottom:none; }
.aimat-q-missing{ background:color-mix(in srgb, #e74c3c 14%, transparent); box-shadow:0 0 0 2px #e74c3c inset; }
.aimat-q-text{ font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:10px; line-height:1.5; }
.aimat-q-num{ color:var(--text-muted); font-weight:800; margin-right:4px; }

.aimat-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.aimat-opt{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  border:1.5px solid var(--border); background:var(--bg-input,var(--bg-card)); color:var(--text-muted);
  border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; transition:all .15s ease; flex:1 1 auto; min-width:120px; }
.aimat-opt:hover{ border-color:var(--accent); color:var(--text); }
.aimat-opt input{ position:absolute; opacity:0; width:0; height:0; }
.aimat-opt-dot{ width:15px; height:15px; border-radius:50%; border:2px solid var(--border); flex:0 0 auto; transition:all .15s ease; }
.aimat-opt.sel{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); }
.aimat-opt.sel .aimat-opt-dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--bg-card); }

.aimat-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.aimat-submit{ font-size:14px; }
.btn-ghost{ background:transparent; color:var(--text-muted); border:1.5px solid var(--border); border-radius:10px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--text); }

/* ── History table ───────────────────────────────────────────────────────── */
.aimat-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.aimat-table th{ text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); border-bottom:2px solid var(--border); }
.aimat-table td{ padding:11px 12px; border-bottom:1px solid var(--border); color:var(--text); }
.aimat-table tr:last-child td{ border-bottom:none; }
.aimat-score-pill{ display:inline-block; font-weight:800; color:var(--lvl-color,var(--accent));
  border:1.5px solid var(--lvl-color,var(--accent)); border-radius:999px; padding:2px 10px; font-size:12px; }

/* ── Maturity levels reference ───────────────────────────────────────────── */
.aimat-levels{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.aimat-level-row{ display:flex; gap:14px; align-items:flex-start; }
.aimat-level-band{ flex:0 0 86px; text-align:center; font-weight:800; font-size:12px; color:var(--lvl-color,var(--accent));
  border:1.5px solid var(--lvl-color,var(--accent)); border-radius:8px; padding:6px 4px; }
.aimat-level-title{ font-weight:700; color:var(--text); font-size:14px; }
.aimat-level-sum{ font-size:12.5px; color:var(--text-muted); margin-top:2px; line-height:1.45; }

@media (max-width:768px){
  .aimat-result-top{ gap:16px; }
  .aimat-opt{ min-width:100%; }
}


/* ── Role chip (toolbar) + role-aware UI (TASK 2/3) ──────────────────────── */
.aimat-role-chip{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:3px 11px; border:1.5px solid var(--border); color:var(--text-muted); }
.aimat-role-chip i{ font-size:11px; }
.aimat-role-owner{ color:#b8860b; border-color:#b8860b; }
.aimat-role-admin{ color:var(--accent); border-color:var(--accent); }
.aimat-role-user{ color:#2ecc71; border-color:#2ecc71; }
.aimat-role-visitor{ color:var(--text-muted); border-color:var(--border); }

.aimat-visitor-note,.aimat-readonly-note{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted);
  background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-top:14px; }
.aimat-visitor-note i,.aimat-readonly-note i{ color:var(--accent); }
.aimat-submit:disabled{ opacity:.5; cursor:not-allowed; }

/* page header actions */
.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-actions{ display:flex; gap:10px; flex-shrink:0; }

/* ── Scoring edit (TASK 3) ───────────────────────────────────────────────── */
.aimat-levels-full .aimat-level-eval{ font-size:13px; color:var(--text-muted); line-height:1.6; margin-top:6px; }
.aimat-level-edit{ border:1px solid var(--border); border-left:4px solid var(--lvl-color,var(--accent)); border-radius:10px; padding:16px; margin-bottom:14px; }
.aimat-le-row{ display:flex; gap:12px; flex-wrap:wrap; }
.aimat-level-edit label{ display:flex; flex-direction:column; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); gap:5px; margin-bottom:12px; }
.aimat-le-full{ width:100%; }
.aimat-level-edit input,.aimat-level-edit textarea,.aimat-adduser input,.aimat-adduser select,.aimat-table select{
  font-family:inherit; font-size:13.5px; color:var(--text); background:var(--bg-input,var(--bg-card));
  border:1.5px solid var(--border); border-radius:8px; padding:8px 10px; }
.aimat-level-edit input:focus,.aimat-level-edit textarea:focus{ outline:none; border-color:var(--accent); }
.aimat-level-edit input,.aimat-level-edit textarea{ width:100%; box-sizing:border-box; }
.aimat-level-edit textarea{ min-height:110px; resize:vertical; line-height:1.55; }
.aimat-le-row label{ flex:0 0 130px; }
.aimat-le-actions{ display:flex; justify-content:flex-end; }
.aimat-level-edit{ background:var(--bg-card); }
.aimat-level-edit:last-child{ margin-bottom:0; }

/* ── Users table (TASK 2) ────────────────────────────────────────────────── */
.aimat-adduser{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.aimat-adduser input[type=email]{ flex:1 1 260px; min-width:220px; }
.aimat-u-actions{ text-align:right; white-space:nowrap; }
.aimat-protected{ color:var(--text-dim); }
.btn-ghost.btn-sm{ padding:5px 10px; font-size:12px; }

/* ── Hero image (img/hero.webp) — set via CSS, fallback icon hidden ──────── */
.hero-media{ background:var(--bg-card) url('img/hero.jpg') center/cover no-repeat; }
.hero-media .hero-fallback{ display:none; }

/* ── Buttons: app.js emits btn-primary / btn-ghost without the base .btn class,
   so give them the template's .btn base here (same look as .btn .btn-primary /
   .btn .btn-secondary). ─────────────────────────────────────────────────── */
.btn-primary,.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:8px; font-family:inherit; font-size:13px; font-weight:600; line-height:1.2;
  cursor:pointer; border:1px solid transparent; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary{ background:#c0392b; color:#fff; border-color:#c0392b; box-shadow:none; }
.btn-primary:hover{ background:#a93226; border-color:#a93226; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--text-muted); border-color:var(--border-strong,var(--border)); }
.btn-ghost:hover{ background:var(--bg-hover); color:var(--text); border-color:var(--border-strong,var(--border)); }
.btn-primary.btn-sm,.btn-ghost.btn-sm{ padding:6px 12px; font-size:12px; border-radius:7px; }
.aimat-submit{ font-size:13.5px; padding:10px 18px; }


/* ── Dashboard stat cards (average view) ─────────────────────────────────── */
.aimat-stats{ margin-bottom:22px; }
.aimat-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:16px; }
.aimat-kpi{ display:flex; align-items:center; gap:12px; background:var(--bg-card); color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.aimat-kpi-icon{ flex:0 0 40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px;
  color:var(--lvl-color,var(--accent)); background:color-mix(in srgb, var(--lvl-color,var(--accent)) 14%, transparent); }
.aimat-kpi-val{ font-size:20px; font-weight:800; color:var(--lvl-color,var(--text)); line-height:1.15; }
.aimat-kpi-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--text-muted); margin-top:2px; }
.aimat-kpi-sub{ font-size:11.5px; color:var(--text-dim,var(--text-muted)); margin-top:1px; }
.aimat-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; }
.aimat-statcard{ margin-bottom:0; }
.aimat-bar-row{ display:grid; grid-template-columns:minmax(120px,42%) 1fr 52px; gap:10px; align-items:center; padding:6px 0; }
.aimat-bar-lbl{ font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aimat-bar{ height:10px; background:var(--border); border-radius:6px; overflow:hidden; }
.aimat-bar-fill{ height:100%; border-radius:6px; transition:width .3s ease; }
.aimat-bar-val{ font-size:12.5px; font-weight:800; text-align:right; color:var(--text); }

/* ── History: clickable rows + detail ────────────────────────────────────── */
.aimat-table-click tbody tr{ cursor:pointer; transition:background .12s ease; }
.aimat-table-click tbody tr:hover td{ background:var(--bg-hover); }
.aimat-row-go{ text-align:right; color:var(--text-muted); width:30px; }
.aimat-ans-row{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); }
.aimat-ans-row:last-child{ border-bottom:none; }
.aimat-ans-q{ font-size:14px; color:var(--text); line-height:1.5; flex:1 1 auto; }
.aimat-ans-r{ flex:0 0 220px; display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; color:var(--lvl-color,var(--text)); }
.aimat-ans-dots{ display:inline-flex; gap:4px; }
.aimat-ans-dots i{ width:10px; height:10px; border-radius:50%; background:var(--border); display:inline-block; }
.aimat-ans-dots i.on{ background:var(--lvl-color,var(--accent)); }
@media (max-width:768px){ .aimat-ans-row{ flex-direction:column; align-items:flex-start; } .aimat-ans-r{ flex-basis:auto; } }


/* ── Dashboard "Start the survey" CTA card ──────────────────────────────── */
.aimat-start{
  display:flex; align-items:center; justify-content:flex-start; gap:20px;
  flex-wrap:wrap; margin-top:18px;
}
.aimat-start-body{ flex:1 1 260px; min-width:0; order:2; }
.aimat-start-title{
  font-size:16px; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.aimat-start-title i{ color:var(--accent, #e74c3c); }
.aimat-start-sub{ margin-top:6px; font-size:13.5px; color:var(--text-muted, var(--text)); opacity:.85; }
.aimat-start-btn{ flex:0 0 auto; order:1; font-size:14px; padding:12px 22px; white-space:nowrap; }
/* inside the hero: no card chrome, sits under the hero texts */
.hero .aimat-start-hero{ margin-top:auto; padding:20px 0 0; background:transparent; border:0; box-shadow:none; justify-content:flex-start; }
.hero .aimat-start-hero .aimat-start-body{ flex:1 1 220px; }
.aimat-area-svg text{ fill:var(--text-muted, var(--text)); font-size:10px; }
.aimat-area-svg .aimat-area-val{ fill:var(--text); font-weight:600; font-size:11px; }
.aimat-area-ends{ color:var(--text-muted, var(--text)); }
/* space between the result row and the KPI cards below it */
.aimat-stats{ margin-top:18px; }
@media (max-width:900px){ .aimat-result-row{ grid-template-columns:1fr !important; } }

/* survey: give the top action row a little breathing room under the progress bar */
.aimat-actions-top{ margin-top:14px; margin-bottom:4px; padding-bottom:16px; border-bottom:1px solid var(--border, rgba(128,128,128,.25)); }
.aimat-actions-bottom{ margin-top:22px; padding-top:16px; border-top:1px solid var(--border, rgba(128,128,128,.25)); }

/* Owner-only delete button in submission details */
.btn-ghost.aimat-danger{ color:#c0392b; border-color:rgba(192,57,43,.45); }
.btn-ghost.aimat-danger:hover{ background:rgba(192,57,43,.10); color:#c0392b; }
.page-actions{ gap:8px; flex-wrap:wrap; }