/* portal.css — gedeelde, zakelijke stijl voor login.html, portal.html en me.html.
   Bouwt volledig op de CSS-variabelen die theme.js uit tenant.theme zet (--t-*).
   De :root-fallbacks hieronder zorgen dat login.html (nog geen tenant bekend) en
   pagina's vóór het laden van het thema er toch verzorgd uitzien. */

:root {
  --t-primary: #2f5d50;
  --t-primary-dark: #1f3f36;
  --t-accent: #c9762f;
  --t-bg: #f5f6f4;
  --t-surface: #ffffff;
  --t-text: #1f2a27;
  --t-muted: #5f6f6a;
  --t-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-radius: 14px;

  --t-line: rgba(31, 42, 39, 0.12);
  --t-shadow: 0 14px 40px rgba(31, 42, 39, 0.10);
  --band-good: #1f9d6b;
  --band-mid: #d69022;
  --band-low: #c4553a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--t-text);
  background: var(--t-bg);
  font-family: var(--t-font);
  line-height: 1.5;
}

a { color: var(--t-primary); }

button { cursor: pointer; font: inherit; }

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 40px) 64px;
}

.muted { color: var(--t-muted); }

/* --- Gedeelde topbar (gevuld door theme.js) ----------------------------- */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
}

.tb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tb-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--t-bg);
}

.tb-logo-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--t-primary);
  font-weight: 800;
  font-size: 1.1rem;
}

.tb-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tb-brand-text strong { font-size: 1.02rem; line-height: 1.2; }
.tb-brand-text span { font-size: 0.8rem; color: var(--t-muted); }

.tb-nav {
  display: flex;
  gap: 18px;
  margin-left: 8px;
}

.tb-nav a {
  color: var(--t-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.tb-nav a:hover { color: var(--t-primary); }

.tb-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.tb-user-name { font-weight: 600; font-size: 0.92rem; }

.tb-logout {
  padding: 8px 14px;
  border: 1px solid var(--t-line);
  border-radius: 999px;
  background: var(--t-surface);
  color: var(--t-text);
  font-weight: 600;
  font-size: 0.86rem;
}

.tb-logout:hover { border-color: var(--t-primary); color: var(--t-primary); }

/* --- Kaarten & knoppen --------------------------------------------------- */
.card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  padding: 20px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--t-primary);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover { background: var(--t-primary-dark); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--t-line);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-text);
  font-weight: 600;
  text-decoration: none;
}

.btn-ghost:hover { border-color: var(--t-primary); color: var(--t-primary); }

/* --- Loginpagina --------------------------------------------------------- */
.auth-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--t-text);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: #fff;
  background: var(--t-primary);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.auth-card h1 { margin: 0 0 4px; font-size: 1.45rem; }
.auth-card .auth-sub { margin: 0 0 22px; color: var(--t-muted); font-size: 0.92rem; }

.form-field { margin-bottom: 16px; }

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.88rem;
}

.form-field input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--t-line);
  border-radius: 10px;
  background: var(--t-surface);
  color: var(--t-text);
  outline: none;
}

.form-field input:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.15);
}

.auth-error {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(196, 85, 58, 0.12);
  border: 1px solid rgba(196, 85, 58, 0.3);
  color: var(--band-low);
  font-size: 0.9rem;
}

.auth-error[hidden] { display: none; }

.auth-card .btn-primary { width: 100%; margin-top: 4px; }

.auth-back {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--t-muted);
  text-decoration: none;
}

.auth-back:hover { color: var(--t-primary); }

/* --- Paginakoppen -------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 26px 28px;
  border-radius: var(--t-radius);
  color: #fff;
  background: linear-gradient(120deg, var(--t-primary), var(--t-primary-dark));
  box-shadow: var(--t-shadow);
}

/* Subtiele tenant-hero rechts in de kop (ingesteld via inline background-image). */
.page-hero.has-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 40%;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center right;
  opacity: 0.22;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}

.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.page-hero p { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 640px; }

/* --- KPI-strip ----------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.kpi {
  padding: 18px 20px;
  border-radius: var(--t-radius);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

.kpi strong { display: block; font-size: 1.9rem; line-height: 1.1; }
.kpi span { color: var(--t-muted); font-size: 0.85rem; font-weight: 600; }

/* --- Secties ------------------------------------------------------------- */
.section { margin-bottom: 32px; }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.section-title h2 { margin: 0; font-size: 1.2rem; }
.section-title .hint { color: var(--t-muted); font-size: 0.86rem; }

/* --- Score-banden -------------------------------------------------------- */
.band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.band-good { background: rgba(31, 157, 107, 0.14); color: #12724c; }
.band-mid { background: rgba(214, 144, 34, 0.16); color: #8a5c10; }
.band-low { background: rgba(196, 85, 58, 0.14); color: #93331f; }
.band-none { background: rgba(95, 111, 106, 0.12); color: var(--t-muted); }

.band-dot { width: 9px; height: 9px; border-radius: 50%; }
.band-dot.band-good { background: var(--band-good); }
.band-dot.band-mid { background: var(--band-mid); }
.band-dot.band-low { background: var(--band-low); }
.band-dot.band-none { background: var(--t-muted); }

/* --- Medewerkerskaarten (portal) ---------------------------------------- */
.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.employee-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--t-radius);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

.employee-card.needs-attention {
  border-color: rgba(196, 85, 58, 0.5);
  box-shadow: 0 0 0 1px rgba(196, 85, 58, 0.25), var(--t-shadow);
}

.employee-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.employee-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.employee-head .employee-email { color: var(--t-muted); font-size: 0.82rem; }

.employee-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.employee-stats .stat {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--t-bg);
  text-align: center;
}

.employee-stats .stat strong { display: block; font-size: 1.15rem; }
.employee-stats .stat span { font-size: 0.72rem; color: var(--t-muted); font-weight: 600; }

.attention-flag {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(196, 85, 58, 0.1);
  border: 1px solid rgba(196, 85, 58, 0.28);
  font-size: 0.84rem;
}

.attention-flag strong { color: #93331f; }

.attention-flag ul { margin: 6px 0 0; padding-left: 18px; }
.attention-flag li { margin-bottom: 2px; }

.compliance-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #93331f;
  font-weight: 600;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  font-size: 0.78rem;
  font-weight: 600;
}

.chip.empty { color: var(--t-muted); font-style: italic; }

/* Module-toewijzing */
.assign-block { border-top: 1px solid var(--t-line); padding-top: 12px; }

.assign-toggle {
  border: 0;
  background: none;
  padding: 0;
  color: var(--t-primary);
  font-weight: 700;
  font-size: 0.88rem;
}

.assign-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.assign-list[hidden] { display: none; }

.assign-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--t-line);
  border-radius: 10px;
  cursor: pointer;
}

.assign-option:hover { border-color: var(--t-primary); }
.assign-option input { margin-top: 3px; }
.assign-option .opt-title { font-weight: 600; font-size: 0.9rem; }
.assign-option .opt-summary { color: var(--t-muted); font-size: 0.8rem; }

.assign-actions { display: flex; gap: 10px; align-items: center; }

.save-note { font-size: 0.82rem; color: var(--t-muted); }
.save-note.ok { color: #12724c; }
.save-note.err { color: #93331f; }

/* --- Aandachtsgebieden (focusAreas) ------------------------------------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.focus-card {
  padding: 16px 18px;
  border-radius: var(--t-radius);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

.focus-card h3 { margin: 0 0 10px; font-size: 0.98rem; }

.focus-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.focus-score { font-size: 1.5rem; font-weight: 800; }

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--t-bg);
  overflow: hidden;
}

.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--t-primary); }

/* --- Medewerkersdashboard (me) ------------------------------------------ */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.training-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--t-radius);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

.training-card h3 { margin: 0; font-size: 1.05rem; }
.training-card p { margin: 0; color: var(--t-muted); font-size: 0.9rem; flex: 1; }

.training-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.84rem;
  color: var(--t-muted);
}

.training-status b { color: var(--t-text); }

.training-card .btn-primary { margin-top: 4px; }

.learning-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: stretch;
}

.learning-overview,
.module-list-shell {
  min-width: 0;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  box-shadow: var(--t-shadow);
}

.learning-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.learning-overview h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  line-height: 1.15;
}

.learning-overview p {
  margin: 0;
  color: var(--t-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.learning-progress {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-primary) 9%, var(--t-bg));
}

.learning-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--t-primary), var(--t-accent));
}

.learning-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--t-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.learning-meta b { color: var(--t-text); }

.learning-overview .btn-primary {
  width: fit-content;
  margin-top: auto;
}

.module-list-shell { overflow: hidden; }

.module-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--t-line);
}

.module-list-head strong { font-size: 0.96rem; }
.module-list-head span { color: var(--t-muted); font-size: 0.78rem; font-weight: 800; }

.module-list { display: grid; }

.module-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-text);
  background: var(--t-surface);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.module-row:last-child { border-bottom: 0; }
.module-row:hover,
.module-row.is-active { background: color-mix(in srgb, var(--t-primary) 7%, var(--t-surface)); }

.module-row-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--t-primary);
  background: color-mix(in srgb, var(--t-primary) 12%, var(--t-surface));
  font-size: 0.76rem;
  font-weight: 900;
}

.module-row-main {
  display: block;
  min-width: 0;
}

.module-row-main strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.92rem;
  line-height: 1.25;
}

.module-row-main small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--t-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.module-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--t-muted);
  background: var(--t-bg);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.module-row.is-active .module-row-status {
  color: #fff;
  background: var(--t-primary);
}

body[data-tenant="pb-projects"] .learning-overview,
body[data-tenant="pb-projects"] .module-list-shell {
  border: 0;
  border-top: 5px solid #dd3737;
  border-radius: 0;
  box-shadow: 0 16px 36px rgba(15,20,70,.10);
}

body[data-tenant="pb-projects"] .module-row-index,
body[data-tenant="pb-projects"] .module-row-status,
body[data-tenant="pb-projects"] .learning-progress {
  border-radius: 0;
}

body[data-tenant="pb-projects"] .module-row.is-active .module-row-status {
  background: #dd3737;
}

body[data-tenant="elevengroup"] .learning-overview,
body[data-tenant="elevengroup"] .module-list-shell {
  border: 0;
  border-radius: 30px;
  background: rgba(255,253,248,.94);
  box-shadow: 0 22px 55px rgba(23,51,58,.09);
}

body[data-tenant="elevengroup"] .module-row-index {
  color: #17333a;
  background: rgba(8,192,201,.18);
}

body[data-tenant="elevengroup"] .module-row.is-active .module-row-status {
  color: #17333a;
  background: #08c0c9;
}

body[data-theme-custom="true"] .learning-overview,
body[data-theme-custom="true"] .module-list-shell {
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  box-shadow: var(--t-shadow);
}

body[data-theme-custom="true"] .module-row-index {
  color: var(--t-primary);
  background: color-mix(in srgb, var(--t-primary) 12%, var(--t-surface));
}

body[data-theme-custom="true"] .module-row.is-active .module-row-status {
  color: #fff;
  background: var(--t-primary);
}

@media (max-width: 860px) {
  .learning-panel { grid-template-columns: 1fr; }

  .module-row {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 84px;
  }

  .module-row-status {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    min-height: 26px;
  }
}

/* Resultatenlijst */
.results-list { display: grid; gap: 10px; }

.result-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--t-radius);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
}

.result-date { font-size: 0.82rem; color: var(--t-muted); font-weight: 600; }
.result-main strong { display: block; font-size: 0.98rem; }

.result-comp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--t-muted);
}

.result-comp .up { color: #12724c; font-weight: 600; }
.result-comp .down { color: #93331f; font-weight: 600; }

.result-score { display: flex; align-items: center; gap: 10px; }

.score-badge {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 44px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1.05rem;
}

.score-badge.band-good { background: rgba(31, 157, 107, 0.16); color: #12724c; }
.score-badge.band-mid { background: rgba(214, 144, 34, 0.18); color: #8a5c10; }
.score-badge.band-low { background: rgba(196, 85, 58, 0.16); color: #93331f; }
.score-badge.band-none { background: var(--t-bg); color: var(--t-muted); }

/* --- Lege staat & laadmelding ------------------------------------------- */
.empty-block {
  padding: 28px;
  border: 1px dashed var(--t-line);
  border-radius: var(--t-radius);
  text-align: center;
  color: var(--t-muted);
}

.loading { padding: 40px; text-align: center; color: var(--t-muted); }

@media (max-width: 640px) {
  .result-row { grid-template-columns: 1fr; }
  .result-score { justify-content: flex-start; }
  .app-topbar { flex-wrap: wrap; gap: 12px; }
  .tb-nav { margin-left: 0; }
  .tb-user { margin-left: 0; width: 100%; }
}

/* --- Tenant-specific MVP polish ---------------------------------------- */
.eyebrow{display:inline-flex;margin-bottom:8px;color:rgba(255,255,255,.78);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.brand-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr) auto;gap:18px;align-items:stretch;margin-bottom:18px;padding:22px;border-radius:var(--t-radius);background:var(--t-surface);border:1px solid var(--t-line);box-shadow:var(--t-shadow)}
.brand-panel .eyebrow{color:var(--t-accent);margin-bottom:6px}.brand-panel h2{margin:0 0 6px;font-size:clamp(1.2rem,2vw,1.55rem)}.brand-panel p{margin:0;color:var(--t-muted);max-width:680px}
.pillar-list{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}.pillar-list span{padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--t-accent) 12%,var(--t-surface));border:1px solid color-mix(in srgb,var(--t-accent) 34%,transparent);color:var(--t-text);font-size:.78rem;font-weight:800}
.brand-numbers{display:grid;grid-template-columns:repeat(2,minmax(88px,1fr));gap:10px;min-width:200px}.brand-numbers div{display:grid;align-content:center;min-height:92px;padding:12px;border-radius:calc(var(--t-radius) - 2px);background:var(--t-bg);border:1px solid var(--t-line)}.brand-numbers strong{font-size:1.7rem;line-height:1}.brand-numbers span{color:var(--t-muted);font-size:.76rem;font-weight:700}
.employee-person{display:flex;align-items:center;gap:11px;min-width:0}.avatar-mark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--t-primary),var(--t-accent));font-weight:900;letter-spacing:.02em}.profile-line{margin:-4px 0 0;color:var(--t-muted);font-size:.86rem}
.profile-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;padding:14px 18px;border-radius:var(--t-radius);background:var(--t-surface);border:1px solid var(--t-line);box-shadow:var(--t-shadow)}.profile-banner strong{color:var(--t-primary)}.profile-banner span{color:var(--t-muted)}
.training-type{width:fit-content;padding:4px 9px;border-radius:999px;color:var(--t-primary);background:color-mix(in srgb,var(--t-primary) 9%,var(--t-surface));border:1px solid color-mix(in srgb,var(--t-primary) 22%,transparent);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.focus-card .muted{margin:8px 0 0;font-size:.82rem}
body[data-tenant="pb-projects"]{background:linear-gradient(90deg,rgba(241,90,36,.10),transparent 32%),repeating-linear-gradient(90deg,rgba(16,24,32,.035) 0 1px,transparent 1px 34px),var(--t-bg)}
body[data-tenant="pb-projects"] .app-topbar{border-bottom:4px solid var(--t-accent)}body[data-tenant="pb-projects"] .page-hero{border-radius:4px;background:linear-gradient(115deg,#101820 0%,#101820 54%,#25313C 100%)}
body[data-tenant="pb-projects"] .kpi,body[data-tenant="pb-projects"] .employee-card,body[data-tenant="pb-projects"] .training-card,body[data-tenant="pb-projects"] .focus-card,body[data-tenant="pb-projects"] .brand-panel,body[data-tenant="pb-projects"] .profile-banner{border-top:3px solid color-mix(in srgb,var(--t-accent) 78%,var(--t-primary))}
body[data-tenant="elevengroup"]{background:linear-gradient(135deg,rgba(233,111,58,.10),transparent 34%),linear-gradient(0deg,rgba(18,40,76,.04),rgba(18,40,76,.04)),var(--t-bg)}body[data-tenant="elevengroup"] .page-hero{background:linear-gradient(120deg,#12284C 0%,#1D3764 58%,#E96F3A 160%)}
body[data-tenant="elevengroup"] .brand-panel,body[data-tenant="elevengroup"] .training-card,body[data-tenant="elevengroup"] .employee-card,body[data-tenant="elevengroup"] .focus-card,body[data-tenant="elevengroup"] .kpi,body[data-tenant="elevengroup"] .profile-banner{box-shadow:0 18px 48px rgba(18,40,76,.10)}body[data-tenant="elevengroup"] .avatar-mark{border-radius:38% 62% 48% 52%}
@media (max-width:860px){.brand-panel{grid-template-columns:1fr}.brand-numbers{min-width:0}}

/* --- Brand fidelity pass: real PB / Eleven assets ----------------------- */
.avatar-photo{object-fit:cover;background:var(--t-bg);border:2px solid var(--t-surface)}
.tb-logo{object-fit:contain}.tb-brand-text{display:none}.tb-nav a,.tb-logout{transition:.18s ease}
body[data-tenant="pb-projects"]{--t-line:rgba(15,20,70,.16);--t-shadow:0 18px 42px rgba(15,20,70,.12);background:#f3f0ea;color:#11142f}
body[data-tenant="pb-projects"] .app-topbar{min-height:86px;background:#0f1446;border:0;border-bottom:6px solid #dd3737;color:#fff;padding-block:8px}
body[data-tenant="pb-projects"] .tb-logo{width:165px;height:71px;background:transparent;border-radius:0}.tb-nav a{color:#fff;text-transform:uppercase;letter-spacing:.04em}.tb-user-name{color:#fff}.tb-logout{border-color:rgba(255,255,255,.38);background:transparent;color:#fff}.tb-logout:hover{background:#dd3737;color:#fff;border-color:#dd3737}
body[data-tenant="pb-projects"] .page-wrap{max-width:1240px}.page-hero{isolation:isolate}
body[data-tenant="pb-projects"] .page-hero{min-height:286px;padding:38px 42px;border-radius:0;background:#0f1446;color:#fff;border-bottom:8px solid #dd3737;box-shadow:0 28px 60px rgba(15,20,70,.22)}
body[data-tenant="pb-projects"] .page-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:13px;background:#dd3737;z-index:1}body[data-tenant="pb-projects"] .page-hero.has-hero:after{inset:0 0 0 43%;opacity:.92;background-size:cover;background-position:center;mask-image:linear-gradient(90deg,transparent,#000 28%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%)}
body[data-tenant="pb-projects"] .page-hero h1{max-width:560px;font-size:clamp(2rem,4vw,3.7rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em}body[data-tenant="pb-projects"] .page-hero p{max-width:540px;color:rgba(255,255,255,.86);font-size:1.05rem}.page-hero .eyebrow{color:inherit}
body[data-tenant="pb-projects"] .brand-panel{grid-template-columns:1.1fr 1fr auto;border-radius:0;border:0;border-left:8px solid #dd3737;background:#fff;box-shadow:0 14px 0 rgba(15,20,70,.07),0 22px 50px rgba(15,20,70,.10)}
body[data-tenant="pb-projects"] .brand-panel .eyebrow{color:#dd3737}.brand-panel h2{font-weight:900}body[data-tenant="pb-projects"] .pillar-list span{border-radius:0;background:#0f1446;color:#fff;border:0;text-transform:uppercase;letter-spacing:.05em}body[data-tenant="pb-projects"] .brand-numbers div{border-radius:0;background:#f3f0ea;border:0}
body[data-tenant="pb-projects"] .kpi,body[data-tenant="pb-projects"] .employee-card,body[data-tenant="pb-projects"] .training-card,body[data-tenant="pb-projects"] .focus-card,body[data-tenant="pb-projects"] .profile-banner{border-radius:0;border:0;border-top:5px solid #dd3737;box-shadow:0 16px 36px rgba(15,20,70,.10)}
body[data-tenant="pb-projects"] .avatar-mark{border-radius:0;width:56px;height:56px;flex-basis:56px;background:#0f1446}body[data-tenant="pb-projects"] .btn-primary{border-radius:0;background:#dd3737;text-transform:uppercase;letter-spacing:.04em}body[data-tenant="pb-projects"] .btn-primary:hover{background:#0f1446}.employee-head h3,.training-card h3{font-weight:900}
body[data-tenant="elevengroup"]{--t-line:rgba(8,192,201,.18);--t-shadow:0 22px 55px rgba(23,51,58,.10);background:#f4e7da;background-image:url('/assets/tenants/elevengroup/pattern.svg'),url('/assets/tenants/elevengroup/blur.svg');background-size:320px auto,680px auto;background-position:left 120px top 120px,right -160px top 20px;background-repeat:repeat,no-repeat;color:#17333a}
body[data-tenant="elevengroup"] .app-topbar{min-height:82px;background:rgba(255,253,248,.92);backdrop-filter:blur(14px);border:0;color:#17333a;box-shadow:0 12px 40px rgba(23,51,58,.08)}body[data-tenant="elevengroup"] .tb-logo{width:196px;height:48px;background:transparent;border-radius:0}.tb-nav a{border-radius:999px;padding:8px 13px}body[data-tenant="elevengroup"] .tb-nav a:hover{background:rgba(8,192,201,.10);color:#064d55}.tb-logout{border-radius:999px}body[data-tenant="elevengroup"] .tb-logout:hover{background:#08c0c9;color:#fff;border-color:#08c0c9}
body[data-tenant="elevengroup"] .page-wrap{max-width:1280px}body[data-tenant="elevengroup"] .page-hero{min-height:330px;padding:46px;border-radius:42px;background:rgba(255,253,248,.84);color:#17333a;box-shadow:0 34px 80px rgba(23,51,58,.12);border:1px solid rgba(255,255,255,.7)}
body[data-tenant="elevengroup"] .page-hero.has-hero:after{inset:24px 26px 24px 57%;opacity:1;border-radius:34px;background-size:cover;background-position:center;mask-image:none;-webkit-mask-image:none;box-shadow:0 24px 55px rgba(23,51,58,.16)}body[data-tenant="elevengroup"] .page-hero h1{max-width:560px;font-size:clamp(2rem,4vw,4.2rem);line-height:.96;font-weight:800;color:#17333a}body[data-tenant="elevengroup"] .page-hero p{max-width:520px;color:#5d5048;font-size:1.06rem}body[data-tenant="elevengroup"] .page-hero .eyebrow{color:#08c0c9}
body[data-tenant="elevengroup"] .brand-panel{border:0;border-radius:34px;background:rgba(255,253,248,.9);box-shadow:0 24px 60px rgba(23,51,58,.10)}body[data-tenant="elevengroup"] .brand-panel .eyebrow{color:#08c0c9}body[data-tenant="elevengroup"] .pillar-list span{background:#08c0c9;color:#fff;border:0}body[data-tenant="elevengroup"] .brand-numbers div{border-radius:26px;background:#fff7ef;border:1px solid rgba(8,192,201,.16)}
body[data-tenant="elevengroup"] .kpi,body[data-tenant="elevengroup"] .employee-card,body[data-tenant="elevengroup"] .training-card,body[data-tenant="elevengroup"] .focus-card,body[data-tenant="elevengroup"] .profile-banner{border:0;border-radius:30px;background:rgba(255,253,248,.94);box-shadow:0 22px 55px rgba(23,51,58,.09)}body[data-tenant="elevengroup"] .avatar-mark{width:62px;height:62px;flex-basis:62px;border-radius:50% 50% 44% 56%;background:#08c0c9}body[data-tenant="elevengroup"] .btn-primary{border-radius:999px;background:#08c0c9;color:#17333a}body[data-tenant="elevengroup"] .btn-primary:hover{background:#064d55;color:#fff}.profile-banner .avatar-photo{margin-right:4px}
@media (max-width:780px){body[data-tenant="pb-projects"] .page-hero.has-hero:after,body[data-tenant="elevengroup"] .page-hero.has-hero:after{display:none}body[data-tenant="pb-projects"] .page-hero h1,body[data-tenant="elevengroup"] .page-hero h1{max-width:none}.tb-logo{max-width:160px}.app-topbar{align-items:flex-start}}

/* --- Interaction cleanup ------------------------------------------------ */
.assign-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);background:transparent;color:var(--t-text);text-align:left}.assign-toggle strong{display:block;font-size:.94rem}.assign-toggle small{display:block;margin-top:2px;color:var(--t-muted);font-size:.76rem;font-weight:600}.assign-caret{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:color-mix(in srgb,var(--t-primary) 10%,var(--t-surface));color:var(--t-primary);font-weight:900}.btn-save{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-surface);color:var(--t-text);font-weight:800;font-size:.86rem}.btn-save:hover{border-color:var(--t-primary);color:var(--t-primary)}
body[data-tenant="pb-projects"] .assign-toggle{border-color:rgba(15,20,70,.16)}body[data-tenant="pb-projects"] .assign-caret{border-radius:0;background:#0f1446;color:#fff}body[data-tenant="pb-projects"] .btn-save{border-radius:0;background:#fff;color:#0f1446}body[data-tenant="pb-projects"] .btn-save:hover{border-color:#dd3737;color:#dd3737}
body[data-tenant="elevengroup"] .assign-toggle{border-color:rgba(8,192,201,.20)}body[data-tenant="elevengroup"] .assign-caret{background:rgba(8,192,201,.13);color:#064d55}body[data-tenant="elevengroup"] .btn-save{border-radius:999px;background:#fffdf8;color:#17333a}body[data-tenant="elevengroup"] .btn-save:hover{border-color:#08c0c9;color:#064d55}

/* Header scope fixes */
body[data-tenant="pb-projects"] .tb-nav a{color:#fff;text-transform:uppercase;letter-spacing:.04em}body[data-tenant="pb-projects"] .tb-user-name{color:#fff}body[data-tenant="pb-projects"] .tb-logout{border-color:rgba(255,255,255,.38);background:transparent;color:#fff}body[data-tenant="pb-projects"] .tb-logout:hover{background:#dd3737;color:#fff;border-color:#dd3737}
body[data-tenant="elevengroup"] .tb-user-name{color:#17333a}body[data-tenant="elevengroup"] .tb-logout{background:#fffdf8;color:#17333a;border-color:rgba(23,51,58,.18)}body[data-tenant="elevengroup"] .tb-logout:hover{background:#08c0c9;color:#fff;border-color:#08c0c9}body[data-tenant="elevengroup"] .tb-nav a{color:#17333a}

/* --- Admin theme editor ------------------------------------------------- */
.theme-editor{scroll-margin-top:20px}.theme-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.theme-controls,.theme-preview{padding:20px;border-radius:var(--t-radius);background:var(--t-surface);border:1px solid var(--t-line);box-shadow:var(--t-shadow)}.theme-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.theme-field{display:grid;gap:6px;padding:12px;border:1px solid var(--t-line);border-radius:calc(var(--t-radius) - 2px);background:color-mix(in srgb,var(--t-bg) 72%,var(--t-surface))}.theme-field span{font-weight:900;font-size:.88rem}.theme-field small{min-height:32px;color:var(--t-muted);font-size:.74rem;line-height:1.35}.theme-field input[type="color"]{width:100%;height:42px;padding:4px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-surface);cursor:pointer}.theme-radius{margin-top:12px}.theme-radius select{height:42px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-surface);color:var(--t-text);padding:0 12px}.theme-actions{display:flex;align-items:center;gap:10px;margin-top:14px}.preview-shell{overflow:hidden;border-radius:var(--t-radius);background:var(--t-bg);border:1px solid var(--t-line)}.preview-bar{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--t-primary);color:#fff}.preview-bar span{width:28px;height:28px;border-radius:50%;background:var(--t-accent)}.preview-hero{padding:18px;background:linear-gradient(135deg,var(--t-primary),var(--t-primary-dark));color:#fff}.preview-hero small{color:color-mix(in srgb,#fff 72%,var(--t-accent));font-weight:900;text-transform:uppercase}.preview-hero h3{margin:6px 0;font-size:1.2rem}.preview-hero p{margin:0;color:rgba(255,255,255,.82);font-size:.86rem}.preview-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.preview-card{padding:14px;border-radius:calc(var(--t-radius) - 4px);background:var(--t-surface);border:1px solid var(--t-line)}.preview-card strong{display:block;font-size:1.35rem;color:var(--t-text)}.preview-card span{color:var(--t-muted);font-size:.78rem;font-weight:700}.preview-button{margin:0 14px 14px;min-height:40px;padding:0 16px;border:0;border-radius:calc(var(--t-radius) - 4px);background:var(--t-accent);color:#fff;font-weight:900}.theme-preview{position:sticky;top:16px;align-self:start}
body[data-tenant="pb-projects"] .theme-controls,body[data-tenant="pb-projects"] .theme-preview{border-radius:0;border-top:5px solid var(--t-accent)}body[data-tenant="pb-projects"] .theme-field,body[data-tenant="pb-projects"] .preview-shell,body[data-tenant="pb-projects"] .preview-card,body[data-tenant="pb-projects"] .preview-button{border-radius:0}body[data-tenant="elevengroup"] .theme-controls,body[data-tenant="elevengroup"] .theme-preview{border-radius:30px}

/* When an admin saves a custom house style, CSS variables become leading again. */
body[data-theme-custom="true"]{background:var(--t-bg);color:var(--t-text)}body[data-theme-custom="true"] .app-topbar{background:var(--t-primary);border-bottom:5px solid var(--t-accent);box-shadow:var(--t-shadow);color:#fff}body[data-theme-custom="true"] .tb-nav a,body[data-theme-custom="true"] .tb-user-name{color:#fff}body[data-theme-custom="true"] .tb-logout{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}body[data-theme-custom="true"] .tb-logout:hover{background:var(--t-accent);color:#fff;border-color:var(--t-accent)}body[data-theme-custom="true"] .page-hero{border-radius:var(--t-radius);background:linear-gradient(120deg,var(--t-primary),var(--t-primary-dark));color:#fff;border-bottom:5px solid var(--t-accent)}body[data-theme-custom="true"] .page-hero:before{display:none}body[data-theme-custom="true"] .page-hero h1{color:#fff;text-transform:none}body[data-theme-custom="true"] .page-hero p{color:rgba(255,255,255,.86)}body[data-theme-custom="true"] .page-hero.has-hero:after{opacity:.24;border-radius:var(--t-radius)}body[data-theme-custom="true"] .brand-panel,body[data-theme-custom="true"] .kpi,body[data-theme-custom="true"] .employee-card,body[data-theme-custom="true"] .training-card,body[data-theme-custom="true"] .focus-card,body[data-theme-custom="true"] .profile-banner,body[data-theme-custom="true"] .theme-controls,body[data-theme-custom="true"] .theme-preview{border-radius:var(--t-radius);background:var(--t-surface);border:1px solid var(--t-line);border-top:0;box-shadow:var(--t-shadow)}body[data-theme-custom="true"] .pillar-list span{border-radius:999px;background:var(--t-primary);color:#fff}body[data-theme-custom="true"] .btn-primary,body[data-theme-custom="true"] .btn-save:hover{background:var(--t-primary);color:#fff;border-color:var(--t-primary)}body[data-theme-custom="true"] .btn-primary:hover{background:var(--t-primary-dark)}body[data-theme-custom="true"] .avatar-mark{border-radius:50%;background:var(--t-primary)}
@media (max-width:880px){.theme-editor-grid{grid-template-columns:1fr}.theme-preview{position:static}}

/* --- Standalone theme management page ---------------------------------- */
.theme-page-hero{margin-bottom:28px}.theme-editor-page .theme-controls h3{margin:22px 0 10px;font-size:1rem}.theme-editor-page .theme-controls h3:first-child{margin-top:0}.theme-editor-page .theme-controls{padding:22px}.theme-editor-page .theme-actions{position:sticky;bottom:0;margin:18px -22px -22px;padding:16px 22px;background:color-mix(in srgb,var(--t-surface) 92%,transparent);border-top:1px solid var(--t-line);backdrop-filter:blur(12px)}.theme-save-primary{min-height:42px}.theme-field select{width:100%;height:42px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-surface);color:var(--t-text);padding:0 12px}.asset-fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.theme-asset-field{grid-template-rows:auto auto auto 86px}.asset-thumb{display:block;width:100%;height:86px;border:1px solid var(--t-line);border-radius:10px;background-color:var(--t-surface);background-size:contain;background-position:center;background-repeat:no-repeat}.asset-thumb.is-empty{background-image:linear-gradient(135deg,transparent 47%,color-mix(in srgb,var(--t-muted) 35%,transparent) 48%,color-mix(in srgb,var(--t-muted) 35%,transparent) 52%,transparent 53%)}.theme-live-preview .preview-shell{min-height:520px;background-color:var(--t-bg);background-size:180px auto,420px auto;background-position:left top,right -110px top -30px;background-repeat:repeat,no-repeat}.theme-live-preview .preview-bar{min-height:70px}.theme-live-preview .preview-bar img{display:block;max-width:180px;max-height:46px;object-fit:contain;background:transparent}.theme-live-preview .preview-bar img[hidden]{display:none}.theme-live-preview .preview-hero{min-height:190px;background-size:cover;background-position:center;color:#fff}.theme-live-preview .preview-button{background:var(--t-primary)}
body[data-theme-custom="true"]{background-color:var(--t-bg);background-image:var(--t-pattern),var(--t-decoration);background-size:320px auto,720px auto;background-position:left 108px top 118px,right -160px top 24px;background-repeat:repeat,no-repeat}
body[data-tenant="pb-projects"] .theme-editor-page .theme-actions{background:#fff}body[data-tenant="pb-projects"] .theme-field select,body[data-tenant="pb-projects"] .asset-thumb{border-radius:0}body[data-tenant="elevengroup"] .theme-editor-page .theme-actions{border-radius:0 0 30px 30px}
@media (max-width:880px){.theme-editor-page .theme-actions{position:static;margin:16px 0 0;padding:0;border-top:0;background:transparent}.theme-live-preview .preview-shell{min-height:420px}}

/* Parlign general login branding; tenant pages keep their own theme variables. */
.auth-body {
  --t-primary: #17365f;
  --t-primary-dark: #0e2445;
  --t-accent: #ff6b57;
  --t-bg: #fbf7ef;
  --t-surface: #ffffff;
  --t-text: #172a47;
  --t-muted: #627083;
  --t-line: rgba(23, 54, 95, 0.14);
  --t-shadow: 0 18px 45px rgba(23, 54, 95, 0.14);
  background:
    linear-gradient(135deg, rgba(23, 54, 95, 0.11), transparent 38%),
    linear-gradient(315deg, rgba(255, 107, 87, 0.13), transparent 42%),
    var(--t-bg);
}

.auth-body .auth-card {
  border-top: 4px solid var(--t-accent);
  box-shadow: var(--t-shadow);
}

.auth-brand-logo {
  display: block;
  width: min(190px, 100%);
  height: auto;
}

.auth-body .form-field input:focus {
  box-shadow: 0 0 0 3px rgba(23, 54, 95, 0.15);
}