/* team.mendip — supplements the shared house style.css */

.header-nav { display:flex; gap:1.25rem; margin-left:auto; margin-right:1.25rem; }
.header-nav a { color:#fff; text-decoration:none; font-weight:600; opacity:.9; font-size:.95rem; }
.header-nav a:hover { opacity:1; text-decoration:underline; }
.logo-text { font-weight:800; letter-spacing:.02em; }

.welcome { margin:1rem 0 1.5rem; }
.welcome h1 { margin:0 0 .25rem; }
.welcome .lead { margin:.25rem 0; color:#333; font-size:1.05rem; }
.hint { color:#667; font-size:.85rem; }
.tag { background:#e8f4fd; color:#005e85; padding:1px 8px; border-radius:20px; font-size:.75rem; font-weight:700; }

.tile-grid {
    display:grid; gap:1rem;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    margin-top:1rem;
}
.tile {
    display:flex; flex-direction:column; gap:.35rem;
    padding:1.25rem; border-radius:14px; text-decoration:none;
    background:#fff; border:1px solid #e3e8ee;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.tile:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); border-color:#bcd6e6; }
.tile-icon { font-size:1.8rem; }
.tile-title { font-weight:800; color:#123; }
.tile-sub { color:#667; font-size:.85rem; }

.login-sub { color:#667; font-size:.8rem; margin:.1rem 0 1rem; }
.placeholder { padding:2rem 0; color:#556; }

/* ─── Knowledge Base ─────────────────────────────────────────────────────── */

.kb-search { display:flex; gap:.5rem; margin:.5rem 0 1.5rem; }
.kb-search input[type=search] {
    flex:1; padding:.7rem .9rem; font-size:1rem;
    border:1px solid #cfd8e3; border-radius:10px; background:#fff;
}
.kb-search input[type=search]:focus { outline:2px solid #005e85; outline-offset:1px; border-color:#005e85; }

.crumb { font-size:.85rem; color:#667; margin-bottom:.5rem; }
.crumb a { color:#005e85; text-decoration:none; }
.crumb a:hover { text-decoration:underline; }

.kb-cats { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.kb-cat { background:#fff; border:1px solid #e3e8ee; border-radius:14px; padding:1rem 1.1rem; }
.kb-cat h2 { font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.kb-cat h2 a { color:#123; text-decoration:none; }
.kb-cat h2 a:hover { color:#005e85; text-decoration:underline; }
.kb-count { background:#eef3f7; color:#5a7183; border-radius:20px; padding:0 .5rem; font-size:.7rem; font-weight:700; }
.kb-subcats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.kb-subcats li { display:flex; align-items:center; gap:.4rem; font-size:.9rem; }
.kb-subcats a { color:#456; text-decoration:none; }
.kb-subcats a:hover { color:#005e85; text-decoration:underline; }

.kb-list { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.kb-item a {
    display:flex; flex-direction:column; gap:.15rem; text-decoration:none;
    background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:.8rem 1rem;
    transition:border-color .08s ease, box-shadow .08s ease;
}
.kb-item a:hover { border-color:#bcd6e6; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.kb-item-title { font-weight:700; color:#123; }
.kb-item-sub { color:#778; font-size:.85rem; }

.kb-chips { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:1rem 0; }
.kb-chips a {
    display:inline-block; padding:.25rem .7rem; border-radius:20px;
    background:#eef3f7; color:#41637a; text-decoration:none; font-size:.85rem; font-weight:600;
}
.kb-chips a:hover { background:#dce8f0; }

.tag-private { background:#fff3cd; color:#856404; }
.tag-draft   { background:#e2e3e5; color:#41464b; }

.kb-article { background:#fff; border:1px solid #e3e8ee; border-radius:14px; padding:1.25rem 1.5rem; }
.kb-body { line-height:1.65; color:#243; }
.kb-body img { max-width:100%; height:auto; border-radius:8px; }
.kb-body h2 { font-size:1.2rem; margin:1.5rem 0 .5rem; }
.kb-body h3 { font-size:1.05rem; margin:1.2rem 0 .4rem; }
.kb-body ul, .kb-body ol { padding-left:1.4rem; }
.kb-body li { margin:.25rem 0; }
.kb-body table { width:100%; border-collapse:collapse; margin:1rem 0; display:block; overflow-x:auto; }
.kb-body td, .kb-body th { border:1px solid #e3e8ee; padding:.5rem .6rem; text-align:left; }
.kb-body a { color:#005e85; }
.kb-body figure { margin:1rem 0; }

.kb-feedback {
    display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
    margin-top:1.25rem; padding:1rem 1.25rem;
    background:#f7fafc; border:1px solid #e3e8ee; border-radius:12px; font-size:.9rem;
}
.btn-quiet { background:#fff; border:1px solid #cfd8e3; color:#345; padding:.35rem .8rem; border-radius:8px; cursor:pointer; font-size:.9rem; text-decoration:none; display:inline-block; }
.btn-quiet:hover { border-color:#005e85; color:#005e85; }
.btn-danger { background:#c0392b; color:#fff; border:none; padding:.5rem 1rem; border-radius:8px; cursor:pointer; }
.btn-danger:hover { background:#a33227; }
.btn-danger-quiet { color:#c0392b; border-color:#e5c3bd; }
.btn-danger-quiet:hover { border-color:#c0392b; color:#c0392b; }

/* ─── Admin / editor ─────────────────────────────────────────────────────── */

/* The house style.css strips the container from .admin-page (Report-It's admin
   brings its own sidebar shell). Ours doesn't — re-contain and pad the page. */
.admin-page .app-main {
    max-width:1080px;
    margin:0 auto;
    padding:1.25rem 1.5rem 5rem;
}
@media (max-width:640px){ .admin-page .app-main { padding:1rem 1rem 4rem; } }

.admin-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.admin-head h1 { margin:.2rem 0 .1rem; }
.admin-actions { display:flex; gap:.5rem; }
.admin-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.admin-filters input[type=search], .admin-filters select { padding:.5rem .6rem; border:1px solid #cfd8e3; border-radius:8px; }

.table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e3e8ee; border-radius:12px; overflow:hidden; }
.admin-table th, .admin-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid #eef2f6; vertical-align:top; font-size:.9rem; }
.admin-table th { background:#f5f8fa; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#5a7183; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table a { color:#005e85; text-decoration:none; font-weight:600; }
.admin-table a:hover { text-decoration:underline; }
.admin-table .muted { color:#778; font-weight:400; }
.admin-table small { color:#99a; }
.row-actions { white-space:nowrap; }
.row-actions a { margin-left:.5rem; }

.btn-primary { background:#005e85; color:#fff; border:none; padding:.55rem 1.1rem; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; font-weight:600; }
.btn-primary:hover { background:#00506f; }
.btn { background:#eef3f7; color:#345; border:1px solid #dbe4ec; padding:.5rem 1rem; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; }

/* editor */
.editor-grid { display:grid; grid-template-columns:1fr 300px; gap:1.25rem; align-items:start; }
.editor-lower { margin-top:1.25rem; }
@media (max-width:820px){ .editor-grid { grid-template-columns:1fr; } }
.editor-title { width:100%; font-size:1.5rem; font-weight:800; border:none; border-bottom:2px solid #e3e8ee; padding:.4rem 0; margin-bottom:1rem; }
.editor-title:focus { outline:none; border-bottom-color:#005e85; }
.editor-advanced { margin-top:1rem; background:#f7fafc; border:1px solid #e3e8ee; border-radius:10px; padding:.5rem 1rem; }
.editor-advanced summary { cursor:pointer; font-weight:600; color:#456; }
.side-card { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:1rem; margin-bottom:1rem; }
.side-card h2 { font-size:1rem; margin:0 0 .5rem; }
.form-label { display:block; font-weight:700; font-size:.85rem; color:#456; margin:.5rem 0 .3rem; }
.form-control { width:100%; padding:.5rem .6rem; border:1px solid #cfd8e3; border-radius:8px; font:inherit; }
.cat-picker { max-height:260px; overflow-y:auto; border:1px solid #eef2f6; border-radius:8px; padding:.4rem; }
.cat-opt { display:flex; gap:.4rem; align-items:center; font-size:.85rem; padding:.15rem 0; }
.form-actions { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; flex-wrap:wrap; }

.wys-wrap .ql-container { min-height:320px; font-size:1rem; }
.wys-wrap .ql-editor { min-height:320px; }
.wys-toggle { margin-top:.5rem; }

.rev-list { list-style:none; margin:0; padding:0; }
.rev-list li { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.4rem 0; border-bottom:1px solid #eef2f6; font-size:.85rem; }
.danger-zone { border-color:#f0d9d5; }

.cat-create { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.cat-create input[type=text], .cat-create select { padding:.5rem .6rem; border:1px solid #cfd8e3; border-radius:8px; }
.cat-table .inline-rename { display:flex; align-items:center; gap:.4rem; }
.rename-input { border:1px solid transparent; border-radius:6px; padding:.3rem .4rem; font:inherit; }
.rename-input:hover, .rename-input:focus { border-color:#cfd8e3; outline:none; }
.cat-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-actions form { display:flex; gap:.25rem; align-items:center; }
.cat-actions select { padding:.3rem; border:1px solid #cfd8e3; border-radius:6px; font-size:.8rem; max-width:160px; }

/* ─── Inductions / the Trail ─────────────────────────────────────────────── */

.trail-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin:.5rem 0 1.25rem; }

.course-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.course-card {
    display:flex; align-items:center; gap:1rem; text-decoration:none;
    background:#fff; border:1px solid #e3e8ee; border-radius:16px; padding:1rem 1.1rem;
    transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.course-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); border-color:#bcd6e6; }
.course-card.done { border-color:#bfe3cb; background:#f5fbf7; }
.course-card.locked { opacity:.6; cursor:default; }
.course-ring {
    --pct:0; flex:0 0 auto; width:56px; height:56px; border-radius:50%;
    display:grid; place-items:center; position:relative;
    background:conic-gradient(#27a560 calc(var(--pct)*1%), #e6edf3 0);
}
.course-ring::after { content:''; position:absolute; inset:5px; background:#fff; border-radius:50%; }
.course-card.done .course-ring::after { background:#f5fbf7; }
.course-icon { position:relative; z-index:1; font-size:1.4rem; }
.course-body { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.course-title { font-weight:800; color:#123; }
.course-sub { color:#667; font-size:.85rem; }
.course-meta { color:#5a7183; font-size:.8rem; font-weight:600; }
.badge-done { background:#d1e7dd; color:#0a3622; padding:1px 8px; border-radius:20px; font-size:.75rem; font-weight:700; }

.trail { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.trail-item { display:flex; align-items:center; gap:.9rem; text-decoration:none;
    background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:.8rem 1rem; }
.trail-item:hover { border-color:#bcd6e6; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.trail-item.done { background:#f5fbf7; border-color:#bfe3cb; }
.trail-icon { font-size:1.3rem; }
.trail-body { display:flex; flex-direction:column; }
.trail-title { font-weight:700; color:#123; }
.trail-sub { color:#778; font-size:.82rem; }
.step-meta { color:#667; font-size:.85rem; margin:.1rem 0 1rem; }

.block { margin:.9rem 0; line-height:1.65; }
.block-callout { border-radius:10px; padding:.8rem 1rem; background:#eef6fb; border:1px solid #cfe6f3; }
.block-callout.tip { background:#f2f9ec; border-color:#d6e9c2; }
.callout-title { font-weight:800; margin-bottom:.2rem; }
.block-checklist { padding-left:1.2rem; }
figure.block img { max-width:100%; height:auto; border-radius:8px; }

.question { background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:1rem; margin:.8rem 0; }
.q-text { font-weight:700; margin-bottom:.6rem; }
.answer { display:flex; gap:.5rem; align-items:center; padding:.45rem .6rem; border:1px solid #e6edf3; border-radius:8px; margin:.35rem 0; cursor:pointer; }
.answer.is-right { background:#d1e7dd; border-color:#a3cfb7; }
.answer.is-wrong { background:#f8d7da; border-color:#e6b3b8; }
.match-row { display:flex; gap:.6rem; align-items:center; margin:.35rem 0; }
.match-item { flex:1; }
.match-row select { padding:.4rem; border:1px solid #cfd8e3; border-radius:8px; }
.q-explain { margin-top:.5rem; padding:.5rem .7rem; border-radius:8px; font-size:.9rem; }
.q-explain.good { background:#d1e7dd; color:#0a3622; }
.q-explain.bad { background:#fff3cd; color:#856404; }
.quiz-score { text-align:center; background:#fff; border:1px solid #e3e8ee; border-radius:12px; padding:1rem; margin:.8rem 0; }
.quiz-score .big { font-size:2rem; font-weight:800; }
.btn-block { display:block; width:100%; text-align:center; }
textarea { width:100%; padding:.5rem .6rem; border:1px solid #cfd8e3; border-radius:8px; font:inherit; }

/* ─── Induction authoring / compliance ───────────────────────────────────── */
.step-head-form {
    display:flex; flex-direction:column; gap:.6rem;
    background:#fff; border:1px solid #e3e8ee; border-radius:14px;
    padding:1rem 1.25rem; margin:.75rem 0 1.25rem;
}
.step-head-form .editor-title { margin-bottom:0; }
.step-head-form .form-actions { align-items:center; margin-top:0; }
.step-admin-list { list-style:none; margin:.5rem 0; padding:0; }
.step-admin-list li { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #eef2f6; }
.step-badge { font-size:1.1rem; }
.step-name { font-weight:600; color:#005e85; text-decoration:none; flex:0 1 auto; }
.step-name:hover { text-decoration:underline; }
.step-ctl { margin-left:auto; display:flex; gap:.25rem; }
.add-step { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.add-step .form-control { max-width:280px; }

.q-admin-list { list-style:none; margin:.75rem 0; padding:0; counter-reset:qn; }
.q-admin-list li {
    position:relative; counter-increment:qn;
    background:#fff; border:1px solid #e3e8ee; border-radius:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    padding:.9rem 7.5rem .9rem 3rem; margin:.6rem 0;
}
.q-admin-list li::before {
    content:counter(qn); position:absolute; left:.9rem; top:.95rem;
    width:1.6rem; height:1.6rem; border-radius:50%;
    background:#eef3f7; color:#41637a; font-size:.8rem; font-weight:800;
    display:grid; place-items:center;
}
.q-admin-text { font-weight:700; color:#1a1a2e; }
.q-admin-ans { margin:.45rem 0 0; display:flex; flex-wrap:wrap; gap:.3rem; }
.q-admin-ans span {
    display:inline-block; background:#f1f4f8; color:#556;
    border:1px solid #e3e8ee; border-radius:20px;
    padding:.1rem .6rem; font-size:.8rem;
}
.q-admin-ans .ans-ok { background:#d1e7dd; border-color:#b2d8c2; color:#0a3622; font-weight:600; }
.q-admin-ans .ans-ok::before { content:'✓ '; }
.q-admin-ctl { position:absolute; top:.8rem; right:.9rem; display:flex; gap:.35rem; }
@media (max-width:640px){
    .q-admin-list li { padding:.9rem .9rem .9rem 3rem; }
    .q-admin-ctl { position:static; margin-top:.5rem; }
}
.ans-row { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; }
.ans-row .form-control { flex:1; }
#qform { max-width:720px; }
#qform h3 { margin:0 0 .6rem; }

.mini-bar { display:inline-block; width:90px; height:8px; background:#e6edf3; border-radius:6px; overflow:hidden; vertical-align:middle; }
.mini-bar span { display:block; height:100%; background:#27a560; }
.mini-bar--brand span { background:#005e85; }

/* ─── Analytics (Step 5) ─────────────────────────────────────────────────── */
.stat-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); margin:1rem 0 1.5rem; }
.stat-tile {
    display:flex; flex-direction:column; gap:.15rem;
    background:#fff; border:1px solid #e3e8ee; border-radius:14px; padding:1rem 1.2rem;
}
.stat-n { font-size:1.9rem; font-weight:800; color:#1a1a2e; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-l { font-weight:700; color:#41637a; font-size:.85rem; }
.stat-s { color:#8a97a5; font-size:.78rem; }

.panel-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); align-items:start; }
.panel { background:#fff; border:1px solid #e3e8ee; border-radius:14px; padding:1rem 1.25rem; }
.panel h2 { font-size:1rem; margin:0 0 .6rem; }
.panel h2 .hint { font-weight:400; }
.panel-warn { border-color:#e8d9a8; background:#fffdf5; }
.panel-wide { grid-column:1 / -1; }

.rank-table { width:100%; border-collapse:collapse; }
.rank-table td { padding:.35rem .4rem .35rem 0; border-bottom:1px solid #f0f3f6; font-size:.9rem; vertical-align:middle; }
.rank-table tr:last-child td { border-bottom:none; }
.rank-name { color:#1a1a2e; }
.rank-name a { color:#005e85; text-decoration:none; }
.rank-name a:hover { text-decoration:underline; }
.rank-name.muted { color:#778; }
.rank-bar { width:100px; }
.rank-n { text-align:right; font-weight:700; color:#41637a; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-when { text-align:right; color:#8a97a5; font-size:.82rem; white-space:nowrap; }

/* ─── KB governance: acknowledgements, history, diff, print ─────────────── */
.ack-banner {
    background:#fff8e6; border:1px solid #e8d9a8; border-radius:14px;
    padding:1rem 1.25rem; margin:0 0 1.25rem;
}
.ack-banner-head { font-weight:800; color:#6b5310; }
.ack-banner-note { color:#6b5310; margin:.35rem 0 0; font-style:italic; }
.ack-banner-actions { display:flex; gap:.6rem; align-items:center; margin-top:.7rem; flex-wrap:wrap; }
.ack-list { margin:.5rem 0 0 1.2rem; padding:0; }
.ack-list a { color:#005e85; font-weight:600; }

.kb-meta a { color:#005e85; text-decoration:none; }
.rev-actions { display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; }
.asof-form { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem;
    padding-bottom:.75rem; border-bottom:1px solid #eef2f6; }

.diff-body, .diff-key { line-height:1.7; }
.diff-body { color:#243; }
del { background:#fbe3e4; color:#8a1f2d; text-decoration:line-through; text-decoration-color:#c76a75; border-radius:3px; padding:0 2px; }
ins { background:#dcf1e3; color:#14532d; text-decoration:none; border-radius:3px; padding:0 2px; }

.owners-apply { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin:.75rem 0; }

/* ─── Embedded in the MendipSys desktop shell ────────────────────────────── */
/* The shell shows who/where you are and owns sign-out — keep our KB/Inductions
   nav (+ admin gear), drop branding and session controls.
   (Brief: app.mendipsys.co.uk notes/briefs/team.md) */
body.embedded .header-logo,
body.embedded .header-user,
body.embedded .header-actions a[href$="logout.php"] { display: none !important; }
body.embedded .header-nav { margin-left: 0; }

@media print {
    .app-header, .app-footer, .crumb, .noprint, .kb-feedback, .kb-chips { display:none !important; }
    .app-main { max-width:100%; padding:0; }
    .kb-article { border:none; padding:0; }
    body { background:#fff; }
}