/* KCertificate — shared styles. Idiom mirrors chatbot25-mcp. */

:root {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-2: #f2f4f8;
    --border: #e6e8ef;
    --border-strong: #d6dae4;
    --ink-1: #0f1624;
    --ink-2: #3b4559;
    --ink-3: #6b7484;
    --ink-4: #9aa2b1;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0ff;
    --accent-ink: #3730a3;
    --success: #137a45;
    --success-soft: #e3f5ea;
    --warn: #a65b00;
    --warn-soft: #fff2dc;
    --danger: #c0332b;
    --danger-soft: #fde4e1;
    --info: #0b6bcb;
    --info-soft: #e4f0fd;
    --nav-h: 60px;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 22, 36, 0.04), 0 1px 1px rgba(15, 22, 36, 0.03);
    --shadow-md: 0 4px 18px -6px rgba(15, 22, 36, 0.10), 0 2px 6px -2px rgba(15, 22, 36, 0.06);
    --shadow-lg: 0 24px 48px -18px rgba(15, 22, 36, 0.22), 0 6px 16px -4px rgba(15, 22, 36, 0.08);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--bg);
    color: var(--ink-1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

code, pre, .mono, .font-monospace {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ---------- Layout shell (fixed topbar + scrolling content) ---------- */
.kc-app-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kc-topbar {
    flex: 0 0 auto;
    height: var(--nav-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 30;
}

.kc-topbar-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.kc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-1);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.kc-logo-mark {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--ink-1);
    color: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    overflow: hidden;
}
.kc-logo-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
}

.kc-nav-links { display: flex; gap: 2px; align-items: center; }
.kc-nav-dropdown .kc-nav-link { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.kc-nav-dropdown .dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px;
    min-width: 190px;
}
.kc-nav-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13.5px;
    color: var(--ink-2);
}
.kc-nav-dropdown .dropdown-item:hover,
.kc-nav-dropdown .dropdown-item:focus { background: var(--surface-2); color: var(--ink-1); }
.kc-nav-link {
    color: var(--ink-2);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.kc-nav-link:hover { background: var(--surface-2); color: var(--ink-1); }
.kc-nav-link.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.kc-user-area { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.kc-user-email { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Scrolling content area ---------- */
.kc-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kc-content-inner {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Pages that fill the viewport — sub-panels scroll, page does not. */
.kc-content-inner.kc-fill {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Data-dense pages (forms, manager, editor, report) run edge to edge --
       the 1280px cap only suits prose-width pages like 404/401. */
    max-width: none;
}
.kc-content-inner.kc-fill > .kc-page-header,
.kc-content-inner.kc-fill > .kc-back-bar { flex: 0 0 auto; }
.kc-content-inner.kc-fill > .kc-card.kc-table-card,
.kc-content-inner.kc-fill > .kc-card.kc-manager-card,
.kc-content-inner.kc-fill > .kc-edit-shell { flex: 1; min-height: 0; }

.kc-flash-area {
    /* flashes appear on the wide pages, so keep them aligned with the content */
    max-width: none;
    margin: 16px auto 0;
    padding: 0 24px;
}
.kc-flash {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 13.5px;
    border: 1px solid;
}
.kc-flash-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.kc-flash-error,
.kc-flash-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.kc-flash-warning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.kc-flash-message,
.kc-flash-info { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }

.kc-alert { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid; font-size: 13.5px; }
.kc-alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.kc-alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }

/* ---------- Cards & headers ---------- */
.kc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.kc-table-card { padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.kc-table-card .table { margin-bottom: 0; }
.kc-table-card thead .kc-sort-row th {
    top: 0;
}
.kc-table-card thead .kc-filter-row th {
    top: 41px;          /* stack below the sort row when both are sticky */
    text-transform: none;
    letter-spacing: normal;
    background: var(--surface-2);
    padding: 8px 16px;
}
.kc-table-card thead .kc-filter-row .form-control,
.kc-table-card thead .kc-filter-row .form-select {
    border-color: var(--border);
}
.kc-table-card thead .kc-filter-row .kc-subtle { display: inline-block; padding-top: 6px; }

.kc-sortable { cursor: pointer; user-select: none; }
.kc-sortable:hover { color: var(--ink-1); }
.kc-sort-icon { font-size: 11px; margin-left: 4px; opacity: 0.45; transition: opacity .12s, color .12s; }
.kc-sortable:hover .kc-sort-icon { opacity: 0.8; }
.kc-sort-icon.kc-sort-active { opacity: 1; color: var(--accent); }

.kc-table-card thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    color: var(--ink-3);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
}
.kc-table-card tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 14px;
    vertical-align: middle;
}
.kc-table-card tbody tr:first-child td { border-top: 0; }
.kc-table-card tbody tr:hover td { background: var(--surface-2); }

.kc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.kc-page-title-area { display: flex; align-items: center; gap: 12px; }

.kc-h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--ink-1); letter-spacing: -0.01em; }
.kc-h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; color: var(--ink-1); letter-spacing: -0.005em; }
.kc-h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--ink-1); }
.kc-muted { color: var(--ink-3); }
.kc-subtle { color: var(--ink-4); font-size: 12.5px; }
.kc-center { text-align: center; padding: 80px 24px; }
.kc-error-code { font-size: 80px; font-weight: 800; line-height: 1; color: var(--ink-3); }

/* ---------- Buttons ---------- */
.kc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.kc-btn:hover { background: var(--surface-2); color: var(--ink-1); }
.kc-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.kc-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.kc-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }
.kc-btn-ghost:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--border-strong); }
.kc-btn-icon { padding: 6px 8px; }
.kc-btn-lg { padding: 10px 18px; font-size: 14px; }
.kc-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.kc-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 9px;
    padding: 9px 16px 9px 12px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s, border-color .12s, transform .08s;
}
.kc-btn-back:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-ink);
    transform: translateX(-1px);
}
.kc-btn-back i { font-size: 16px; }

.kc-btn-group { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.kc-btn-group .kc-btn {
    border: 0; border-radius: 7px; padding: 6px 12px;
    color: var(--ink-3); background: transparent;
}
.kc-btn-group .kc-btn:hover { background: var(--surface); color: var(--ink-1); }
.kc-btn-group .kc-btn.active { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-sm); }

/* ---------- Form controls ---------- */
.form-control,
.form-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--ink-1);
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 12px;
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: none;
}
.form-label { color: var(--ink-2); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.form-control::placeholder { color: var(--ink-4); }
.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { color: var(--ink-2); font-size: 13.5px; }

.input-group .kc-btn { border-radius: 0 9px 9px 0; }
.input-group .form-control:not(:last-child) { border-radius: 9px 0 0 9px; }

/* ---------- Modals (Bootstrap base, restyled) ---------- */
.modal-content {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}
.modal-header { border-bottom: 1px solid var(--border); padding: 18px 22px; }
.modal-title { font-weight: 600; font-size: 16px; color: var(--ink-1); }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 22px; gap: 6px; }
.modal-backdrop.show { opacity: 0.4; }

/* ---------- Edit page (form_edit) ---------- */
.kc-edit-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: stretch;
    overflow: hidden;
    min-height: 0;
}
.kc-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}
.kc-side-header { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.kc-side-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.kc-side-section:last-child { border-bottom: 0; }
.kc-side-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; }

.kc-edit-main {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kc-edit-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    flex: 0 0 auto;
}
#saveTemplateForm {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kc-source-area {
    flex: 1;
    min-height: 0;
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 12.5px;
}
.kc-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kc-editor .ql-toolbar.ql-snow {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: var(--surface-2);
}
.kc-editor .ql-container.ql-snow {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 0 0 9px 9px;
    /* neutral "desk" so the page below stands out */
    background: var(--surface-2);
    padding: 24px 0;
}
/* The editable canvas is a page the same width as the certificate/PDF output
   (800px page − 48px padding = ~704px text column), so text wraps exactly the
   way it will when generated. Without this the wide editor showed one line where
   the certificate showed three. */
.kc-editor .ql-editor {
    box-sizing: border-box;
    max-width: 800px;
    min-height: 100%;
    margin: 0 auto;
    padding: 48px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    border-radius: 4px;
}

/* Canonical template typography. The editor content and every rendered output
   (certificate, participant form, PDF, email) use the SAME base so what you type
   is what gets generated. Web-safe family because email clients and the PDF
   engine can't rely on the app's web font. */
.kc-editor .ql-editor,
.kc-cert-content,
.kc-form-template-content {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #111;
}
/* Heading sizes must match the editor exactly. Bootstrap (loaded on the
   certificate/participant pages) sizes h1/h2 in rem, which made generated
   headings larger than the editor. Pin them to the editor's em-based scale and
   its weight/spacing so what you design is what generates. */
.kc-editor .ql-editor :is(h1,h2,h3,h4,h5,h6),
.kc-cert-content :is(h1,h2,h3,h4,h5,h6),
.kc-form-template-content :is(h1,h2,h3,h4,h5,h6) {
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}
.kc-editor .ql-editor h1, .kc-cert-content h1, .kc-form-template-content h1 { font-size: 2em; }
.kc-editor .ql-editor h2, .kc-cert-content h2, .kc-form-template-content h2 { font-size: 1.5em; }
.kc-editor .ql-editor h3, .kc-cert-content h3, .kc-form-template-content h3 { font-size: 1.17em; }
.kc-editor .ql-editor h4, .kc-cert-content h4, .kc-form-template-content h4 { font-size: 1em; }
.kc-editor .ql-editor h5, .kc-cert-content h5, .kc-form-template-content h5 { font-size: 0.83em; }
.kc-editor .ql-editor h6, .kc-cert-content h6, .kc-form-template-content h6 { font-size: 0.67em; }
/* Size dropdown: point-based whitelist. Show each value as its label, and the
   default (no data-value) as "12pt" since the 16px base equals 12pt. Each item
   previews at its own size. */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '12pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value); }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8pt"]  { font-size: 8pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10pt"] { font-size: 10pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11pt"] { font-size: 11pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"] { font-size: 14pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"] { font-size: 18pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"] { font-size: 24pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36pt"] { font-size: 36pt; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48pt"] { font-size: 48pt; }

.kc-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--ink-3);
    font-size: 13px;
}
.kc-auth-divider::before,
.kc-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Quill 2 emits bullet lists as <ol><li data-list="bullet">; saved templates are
   normalised to <ul>, but older ones still need the marker corrected. */
.kc-cert-content li[data-list="bullet"],
.kc-form-template-content li[data-list="bullet"] { list-style-type: disc; }

/* With the page now full width, keep the trailing columns hugging their content
   so the extra space goes to the form name rather than stretching buttons. */
#formsTable th:last-child,
#formsTable td:last-child { width: 1%; white-space: nowrap; }
#formsTable th:nth-child(3),
#formsTable td:nth-child(3) { width: 1%; white-space: nowrap; }   /* group */
#formsTable th:nth-child(4),
#formsTable td:nth-child(4) { width: 1%; white-space: nowrap; }   /* creation date */

/* Group picker in the forms table: a real control for admins, read-only text
   for everyone else. */
.kc-group-select.form-select {
    width: auto;
    min-width: 132px;
    max-width: 180px;
    font-size: 12.5px;
    padding: 4px 28px 4px 10px;
    color: var(--ink-1);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.kc-group-select.form-select:hover:not(:disabled) {
    border-color: var(--accent);
    background-color: var(--accent-soft);
    box-shadow: var(--shadow-sm);
}
.kc-group-select.form-select:focus:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.kc-group-select.form-select:disabled {
    /* reads as plain text: no border, no chevron, not clickable */
    background-image: none;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink-2);
    padding-left: 0;
    padding-right: 0;
    cursor: default;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
}

/* ---------- staff directory picker ---------- */
.kc-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}
.kc-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-3);
}
.kc-picker-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink-1);
}
.kc-picker-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-3);
}
.kc-picker-actions { display: flex; gap: 12px; }
.kc-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
}
.kc-linkbtn:hover { text-decoration: underline; }
.kc-picker-list { max-height: 300px; overflow-y: auto; }
.kc-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13.5px;
}
.kc-picker-row:last-child { border-bottom: 0; }
.kc-picker-row:hover { background: var(--surface-2); }
.kc-picker-row.is-on { background: var(--accent-soft); }
.kc-picker-row input { margin: 0; flex: 0 0 auto; }
.kc-picker-name { font-weight: 500; color: var(--ink-1); }
.kc-picker-mail { color: var(--ink-3); font-size: 12.5px; }
.kc-chip {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--ink-3);
    white-space: nowrap;
}
.kc-picker-row.is-on .kc-chip { background: var(--surface); }
.kc-picker-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
.kc-picker-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12px;
    color: var(--ink-3);
}
.kc-picker-foot #dirChosen.is-on { color: var(--accent); font-weight: 600; }

/* ---------- table tools + rendered tables ---------- */
.kc-table-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px 0;
    margin-bottom: 4px;
}
.kc-table-tools-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 4px;
}
.kc-table-tools .kc-btn { padding: 4px 9px; font-size: 12.5px; }
.kc-table-tools-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

/* Quill's table needs visible cells in the editor; rendered output gets inline
   styles from normalize_editor_html, but keep CSS so the editor preview and any
   pre-inline content still show borders. */
.ql-editor table, .kc-cert-content table, .kc-form-template-content table { border-collapse: collapse; }
.ql-editor td, .ql-editor th,
.kc-cert-content td, .kc-cert-content th,
.kc-form-template-content td, .kc-form-template-content th {
    border: 1px solid #999;
    padding: 6px 10px;
}

/* ---------- Quill image resize overlay ---------- */
.kc-img-resizer {
    position: absolute;
    border: 1px dashed var(--brand, #4f46e5);
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}
.kc-img-resize-handle {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--brand, #4f46e5);
    border: 1px solid #fff;
    border-radius: 2px;
    pointer-events: auto;
    cursor: nwse-resize;
}
.kc-editor .ql-editor img { cursor: pointer; }

/* ---------- Manager card fill mode ---------- */
.kc-card.kc-manager-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kc-card.kc-manager-card > .kc-h2,
.kc-card.kc-manager-card > .kc-h3,
.kc-card.kc-manager-card > .kc-manager-tabs,
.kc-card.kc-manager-card > .kc-page-header,
.kc-card.kc-manager-card > .kc-toolbar-row,
.kc-card.kc-manager-card > .kc-actions-bar { flex: 0 0 auto; }
.kc-card.kc-manager-card > .kc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -24px;        /* negate card padding so the scroll area is full-width */
    padding: 0 24px 24px;
}
.kc-card.kc-manager-card > .kc-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

/* ---------- Manager tabs ---------- */
.kc-manager-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--border);
    margin: 14px 0 22px;
    flex-wrap: wrap;
}
.kc-manager-tab {
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ink-3);
    font-weight: 500;
    font-size: 13.5px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.kc-manager-tab:hover { color: var(--ink-1); }
.kc-manager-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- Badges ---------- */
.badge.bg-secondary { background: var(--surface-2) !important; color: var(--ink-3) !important; font-weight: 500; border: 1px solid var(--border); }

/* ---------- Participant pages ---------- */
.kc-participant-body {
    background: var(--bg);
    min-height: 100vh;
    margin: 0;
    overflow: auto;
}
.kc-participant-shell {
    max-width: 920px;
    margin: 32px auto;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.kc-participant-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.kc-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin: 0 0 16px;
}
.kc-fieldset legend {
    width: auto;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.kc-form-template-content {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin: 16px 0;
    color: var(--ink-2);
}
.kc-form-template-content img { max-width: 100%; }
/* Templates saved before the editor switched to inline styles still carry Quill's
   class-based formatting, so keep rendering it here too. */
.kc-form-template-content .ql-align-center { text-align: center; }
.kc-form-template-content .ql-align-right { text-align: right; }
.kc-form-template-content .ql-align-justify { text-align: justify; }
.kc-form-template-content .ql-size-small { font-size: 0.75em; }
.kc-form-template-content .ql-size-large { font-size: 1.5em; }
.kc-form-template-content .ql-size-huge { font-size: 2.5em; }
.kc-form-template-content .ql-indent-1 { padding-left: 3em; }
.kc-form-template-content .ql-indent-2 { padding-left: 6em; }
.kc-form-template-content .ql-indent-3 { padding-left: 9em; }
.kc-form-template-content .ql-indent-4 { padding-left: 12em; }
.kc-form-template-content .ql-indent-5 { padding-left: 15em; }
.kc-form-template-content .ql-indent-6 { padding-left: 18em; }
.kc-form-template-content .ql-indent-7 { padding-left: 21em; }
.kc-form-template-content .ql-indent-8 { padding-left: 24em; }
.kc-actions { text-align: right; }

.kc-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}
.kc-auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-md);
}
.kc-expired-card { max-width: 560px; padding: 48px 32px; }

/* ---------- Certificate preview ---------- */
.kc-cert-toolbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    gap: 6px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}
.kc-cert-shell { padding: 28px; display: flex; justify-content: center; }
.kc-cert-page {
    background: #fff;
    width: 100%;
    max-width: 800px;
    padding: 48px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
/* colour comes from the canonical rule (#111) — the certificate page is always
   white, so it must not follow the dark-theme ink colour. */
.kc-cert-content { line-height: 1.5; }
.kc-cert-content img { max-width: 100%; }
/* Quill block-formatting classes (alignment/indent are stored as classes, not inline styles) */
.kc-cert-content .ql-align-center { text-align: center; }
.kc-cert-content .ql-align-right { text-align: right; }
.kc-cert-content .ql-align-justify { text-align: justify; }
.kc-cert-content .ql-indent-1 { padding-left: 3em; }
.kc-cert-content .ql-indent-2 { padding-left: 6em; }
.kc-cert-content .ql-indent-3 { padding-left: 9em; }
.kc-cert-content .ql-indent-4 { padding-left: 12em; }
.kc-cert-content .ql-indent-5 { padding-left: 15em; }
.kc-cert-content .ql-indent-6 { padding-left: 18em; }
.kc-cert-content .ql-indent-7 { padding-left: 21em; }
.kc-cert-content .ql-indent-8 { padding-left: 24em; }
/* Quill font-size classes (size is also stored as a class, not an inline style) */
.kc-cert-content .ql-size-small { font-size: 0.75em; }
.kc-cert-content .ql-size-large { font-size: 1.5em; }
.kc-cert-content .ql-size-huge { font-size: 2.5em; }
.kc-cert-verification {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-strong);
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
}
.kc-cert-verification code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }

@media (max-width: 900px) {
    .kc-edit-shell { grid-template-columns: 1fr; }
    .kc-side { position: static; }
    .kc-participant-shell { margin: 16px; padding: 22px; }
    .kc-cert-page { padding: 24px; }
    .kc-topbar-inner { padding: 0 16px; }
    .kc-content-inner { padding: 16px; }
}