oefenhub_beheerder_06_sys_02_popups_V1_2.html
Korte beschrijving
Mockup van het popupbeheer binnen het systeemgedeelte van OefenHub. Deze pagina ondersteunt het beheren, beoordelen en configureren van popups of meldvensters die binnen het platform worden gebruikt.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/beheerder/oefenhub_beheerder_06_sys_02_popups_V1_2.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub Beheer - Popups beheren</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
--blue-1: #8fd0ff;
--blue-2: #5bb3ff;
--blue-3: #1f82e9;
--blue-4: #0d5db8;
--text: #114f95;
--muted: #5f7ea5;
--line: rgba(17,79,149,.12);
--orange-1: #ffbb4d;
--orange-2: #ff9620;
--orange-3: #f87400;
--green-1: #8adf67;
--green-2: #57ba3c;
--green-3: #2c9348;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--red-1: #ff8f8f;
--red-2: #df4949;
--purple-1: #8d6cff;
--purple-2: #6248d8;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
background:
radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
min-height: 100vh;
}
.wrap { width: min(1220px, calc(100% - 30px)); margin: 0 auto; }
.header {
padding: 10px 0 12px;
background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom: 1px solid rgba(255,255,255,.38);
box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
position: relative;
z-index: 5;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 250px;
}
.brand img { display: block; height: 46px; width: auto; }
.welcome-text {
font-size: 12px;
color: rgba(17,79,149,.82);
font-weight: 700;
margin-top: -10px;
margin-left: 53px;
}
.nav-pills {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-item { position: relative; display: inline-flex; align-items: center; }
.pill {
border: 0;
border-radius: 12px;
padding: 9px 14px;
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: var(--shadow-soft);
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pill:hover { transform: translateY(-1px); filter: brightness(1.02); }
.pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 306px;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
border-radius: 20px;
box-shadow: 0 12px 24px rgba(35,100,177,.16);
border: 1px solid rgba(170, 204, 238, .55);
padding: 10px 12px;
z-index: 40;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dropdown-menu::before {
content: "";
position: absolute;
top: -10px;
left: 36px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(255,255,255,.97);
filter: drop-shadow(0 -1px 0 rgba(170, 204, 238, .45));
}
.dropdown-menu.align-right { left: auto; right: 0; width: 312px; }
.dropdown-menu.align-right::before { left: auto; right: 20px; }
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.menu-list { display: flex; flex-direction: column; gap: 0; }
.menu-link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 9px;
padding: 9px 11px;
border-radius: 13px;
text-decoration: none;
color: #18518f;
font-size: 15px;
font-weight: 900;
box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover,
.menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-link:hover { transform: translateX(2px); }
.menu-icon {
width: 23px;
height: 23px;
border-radius: 7px;
display: grid;
place-items: center;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
}
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 140px; }
.mail-btn, .profile-chip { border: 0; box-shadow: var(--shadow-soft); cursor: pointer; }
.mail-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #eef6ff);
color: var(--blue-4);
font-size: 17px;
}
.badge {
position: absolute;
right: -2px;
bottom: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e23838;
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.profile-nav { position: relative; }
.profile-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #edf6ff);
padding: 0;
position: relative;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(180deg, #ffd04d, #f4ab08);
color: #fff;
font-size: 16px;
font-weight: 900;
box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}
.profile-badge {
position: absolute;
top: -4px;
right: -5px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(180deg, #ff7878, #df3636);
color: #fff;
font-size: 11px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 6px 12px rgba(223,54,54,.26);
}
.page-shell {
padding: 22px 0 28px;
}
.hero-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 20px 24px 22px;
margin-bottom: 16px;
}
.hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.hero-text h1 {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.2;
color: #0f4d91;
}
.hero-text p {
margin: 0;
max-width: 760px;
font-size: 14px;
line-height: 1.55;
color: #496d99;
}
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stat {
min-width: 160px;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94, 159, 225, .22);
border-radius: 18px;
padding: 12px 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.hero-stat-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #587da9; }
.hero-stat-value { margin-top: 5px; font-size: 28px; font-weight: 900; color: #0f4d91; }
.hero-stat-sub { margin-top: 4px; font-size: 12px; color: #5f7ea5; }
.process-note {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.process-step {
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f4f9ff);
border: 1px solid rgba(17,79,149,.10);
padding: 14px 14px 13px;
box-shadow: var(--shadow-soft);
}
.process-step strong { display: block; margin-bottom: 4px; font-size: 14px; }
.process-step p { margin: 0; font-size: 12px; line-height: 1.45; color: #5a7ba3; }
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.searchbox {
display: flex;
align-items: center;
gap: 10px;
min-width: min(100%, 360px);
padding: 12px 14px;
border-radius: 18px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
color: var(--muted);
}
.searchbox input {
width: 100%;
border: 0;
outline: none;
font: inherit;
color: var(--text);
background: transparent;
}
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-chip {
border: 0;
border-radius: 999px;
padding: 10px 14px;
font-size: 13px;
font-weight: 800;
color: #1c5d9f;
background: rgba(255,255,255,.84);
border: 1px solid rgba(170,204,238,.56);
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.active {
color: #fff;
border-color: transparent;
background: linear-gradient(180deg, #2f88ea, #176acc);
box-shadow: 0 8px 18px rgba(47,143,236,.26);
}
.management-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
gap: 18px;
align-items: start;
}
.column-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
border: 1px solid rgba(170,204,238,.58);
border-radius: 24px;
box-shadow: var(--shadow);
padding: 18px;
}
.column-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.column-title h2,
.column-title h3 { margin: 0; font-size: 18px; }
.column-title span { font-size: 12px; color: var(--muted); font-weight: 700; }
.ticket-list { display: grid; gap: 12px; }
.ticket-card {
position: relative;
border-radius: 20px;
border: 1px solid rgba(17,79,149,.12);
background: linear-gradient(180deg, #ffffff, #f4f9ff);
padding: 16px 16px 15px;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ticket-card:hover,
.ticket-card.is-active {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(35,100,177,.16);
border-color: rgba(31,130,233,.38);
}
.ticket-card.is-active::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 2px rgba(31,130,233,.18);
pointer-events: none;
}
.ticket-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.ticket-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.type-pill, .state-pill, .tiny-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .01em;
}
.type-pill.tech { background: #e3f2ff; color: #1469bf; }
.type-pill.content { background: #fff0d7; color: #a36a07; }
.type-pill.request { background: #efe8ff; color: #6542d3; }
.state-pill.open { background: #ffe3e3; color: #b24949; }
.state-pill.waiting { background: #fff4d5; color: #a47106; }
.state-pill.progress { background: #def4e7; color: #227c47; }
.tiny-pill.mine { background: #dff2ff; color: #1565b8; }
.tiny-pill.shared { background: #edf0ff; color: #4d56c7; }
.ticket-title { margin: 0 0 8px; font-size: 18px; line-height: 1.28; color: #0f4d91; }
.ticket-snippet { margin: 0 0 10px; color: #54769e; font-size: 14px; line-height: 1.5; }
.ticket-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
color: #6381a6;
font-size: 12px;
font-weight: 700;
}
.detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.detail-head h2 { margin: 0 0 5px; font-size: 21px; }
.detail-intro { margin: 0; font-size: 14px; line-height: 1.55; color: #56779f; max-width: 620px; }
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.status-card {
padding: 16px;
border-radius: 18px;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94,159,225,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.status-card .label { font-size: 12px; color: #6081a6; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.status-card .value { margin-top: 5px; font-size: 19px; font-weight: 900; color: #0f4d91; }
.status-card .sub { margin-top: 5px; font-size: 12px; color: #6583a8; line-height: 1.45; }
.timeline {
display: grid;
gap: 10px;
margin: 16px 0;
}
.timeline-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 10px;
align-items: start;
padding: 12px 12px 11px;
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f6fbff);
border: 1px solid rgba(17,79,149,.10);
}
.timeline-icon {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
color: #fff;
font-size: 18px;
font-weight: 900;
box-shadow: var(--shadow-soft);
}
.timeline-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.timeline-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
.timeline-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.timeline-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.timeline-item strong { display: block; margin-bottom: 3px; font-size: 15px; }
.timeline-item p { margin: 0; color: #58799f; font-size: 13px; line-height: 1.52; }
.save-row { display:flex; justify-content:center; margin: 16px 0 18px; }
.save-row .action-btn { min-width: 220px; }
.action-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 16px 0 10px;
}
.action-btn {
border: 0;
border-radius: 14px;
padding: 11px 14px;
font-size: 14px;
font-weight: 900;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.action-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
.action-btn.primary { color: #fff; background: linear-gradient(180deg, #2f88ea, #176acc); }
.action-btn.success { color: #fff; background: linear-gradient(180deg, #79cf5b, #48a432); }
.action-btn.secondary { color: #195797; background: linear-gradient(180deg, #ffffff, #edf5ff); }
.action-btn.warn { color: #fff; background: linear-gradient(180deg, #ffb558, #f97e18); }
.note-box {
border-radius: 18px;
background: linear-gradient(180deg, #fff8e8, #fff2cf);
border: 1px solid rgba(241, 186, 74, .42);
padding: 14px 15px;
margin-top: 12px;
}
.note-box strong { display: block; margin-bottom: 4px; }
.note-box p { margin: 0; font-size: 13px; line-height: 1.5; color: #81632a; }
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.summary-card {
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
border: 1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
padding: 16px;
}
.summary-label { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #6381a6; letter-spacing: .04em; }
.summary-value { margin-top: 6px; font-size: 24px; font-weight: 900; color: #0f4d91; }
.summary-sub { margin-top: 5px; font-size: 12px; line-height: 1.45; color: #5e7fa5; }
.site-footer {
margin-top: 22px;
padding: 24px 0 22px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
border-top: 1px solid rgba(170,204,238,.62);
border-radius: 26px 26px 0 0;
box-shadow: 0 -10px 24px rgba(35,100,177,.06);
}
.footer-grid {
width: min(1220px, calc(100% - 30px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 22px;
}
.footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
.footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
width: min(1220px, calc(100% - 30px));
margin: 18px auto 0;
padding-top: 14px;
border-top: 1px solid rgba(170,204,238,.56);
color: #6b86aa;
font-size: 13px;
font-weight: 700;
}
@media (max-width: 1080px) {
.management-layout,
.summary-grid,
.process-note { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.header-row { grid-template-columns: 1fr; gap: 14px; }
.brand { min-width: 0; }
.nav-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; width: 100%; }
.header-actions { justify-content: flex-start; }
.management-layout,
.detail-grid,
.summary-grid,
.process-note,
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.hero-card,
.column-card { padding: 16px; border-radius: 20px; }
.ticket-card { padding: 14px; }
.ticket-title { font-size: 17px; }
.save-row { display:flex; justify-content:center; margin: 16px 0 18px; }
.save-row .action-btn { min-width: 220px; }
.action-row { flex-direction: column; }
.action-btn { width: 100%; }
}
/* v1.1 beheer updates */
.admin-header-row { grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr); }
.admin-nav-pills { justify-content: center; gap: 10px; }
.admin-nav-pills .pill { padding: 10px 16px; }
.profile-nav { position: relative; }
.profile-nav .dropdown-menu { display:none; }
.profile-nav.open .dropdown-menu { display:block; opacity:1; visibility:visible; transform:translateY(0); }
.profile-chip[aria-expanded="false"] { box-shadow: 0 12px 24px rgba(35,100,177,.18); }
.profile-dropdown { min-width: 250px; }
.page-shell { padding-top: 22px; }
.admin-hero-card { padding: 20px 24px 22px; }
.admin-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.admin-hero-stats { display: grid; gap: 8px; }
.compact-stat { min-width: 0; padding: 2px 18px; }
.compact-stat .hero-stat-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.compact-stat .hero-stat-label { margin:0; }
.compact-stat .hero-stat-value { font-size: 18px; line-height: 1; padding-top: 5px; }
.compact-stat .hero-stat-sub { font-size: 11px; text-align: center; margin-top: -3px; }
.admin-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-searchbox { min-width: min(100%, 250px); max-width: 280px; padding: 10px 12px; }
.admin-filter-row { flex: 1 1 520px; align-items: center; justify-content: flex-end; margin-left:auto; }
.filter-chip-right { margin-left: 0; }
.admin-management-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); }
.ticket-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; line-height: 1.45; color: #0f4d91; }
.ticket-snippet { font-size: 14px; }
.admin-detail-card { padding: 16px 18px; }
.admin-detail-head { display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:start; gap:10px; margin-bottom: 12px; }
.admin-detail-head h2 { margin:0; font-size:15px; line-height:1.4; color:#0f4d91; }
.admin-detail-tags { justify-content:flex-end; }
.detail-section { border: 1px solid rgba(17,79,149,.10); border-radius: 18px; background: linear-gradient(180deg, #fff, #f7fbff); box-shadow: var(--shadow-soft); margin-top: 10px; overflow: hidden; }
.detail-section > summary { list-style:none; cursor:pointer; padding: 12px 14px; font-weight: 900; color:#0f4d91; position: relative; }
.detail-section > summary::-webkit-details-marker { display:none; }
.detail-section > summary::after { content: "▾"; position:absolute; right:14px; top:12px; color:#5b7fa7; transition: transform .18s ease; }
.detail-section[open] > summary::after { transform: rotate(180deg); }
.detail-section-body { padding: 0 14px 14px; }
.compact-table-wrap { padding-top: 2px; }
.detail-table { width:100%; border-collapse: collapse; font-size: 13px; }
.detail-table th, .detail-table td { padding: 9px 0; border-top: 1px solid rgba(17,79,149,.08); vertical-align: top; text-align:left; }
.detail-table tr:first-child th, .detail-table tr:first-child td { border-top: 0; }
.detail-table th { width: 138px; color:#6283a8; font-weight:800; padding-right: 16px; }
.detail-table td { color:#205993; }
.subtle-link { display:inline-block; margin-top: 6px; font-size: 12px; text-decoration: none; font-weight: 800; }
.subtle-link-danger { color:#b75a5a; }
.subtle-link-success { color:#4d8f56; }
.subtle-link-assign { color:#1d6bb8; }
.inline-x { color:#cf4a4a; font-weight:900; text-decoration:none; margin-left:6px; }
.assign-stack { display:grid; gap:4px; }
.assign-person { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.subtle-link:hover { text-decoration: underline; }
.status-select { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; }
.select-field { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; width:100%; }
.forward-note { margin: 0 0 10px; font-size: 12px; color:#5f7ea5; }
.warning-text { margin-top: 8px; color:#b15a35; font-size: 12px; font-weight: 700; }
.field-label { display:block; margin-bottom:8px; color:#6283a8; font-weight:800; font-size:13px; }
.muted-inline { color:#5f7ea5; font-size:12px; }
.thread-box, .history-box { max-height: 230px; overflow: auto; display: grid; gap: 3px; padding-right: 4px; }
.thread-message { border-radius: 16px; padding: 11px 12px; border:1px solid rgba(17,79,149,.10); }
.thread-message.external { background: linear-gradient(180deg, #eef6ff, #deecff); }
.thread-message.internal { background: linear-gradient(180deg, #fff7e8, #fff1cf); }
.thread-message.from-emma { background: linear-gradient(180deg, #eef6ff, #dfeeff); }
.thread-message.from-self { background: linear-gradient(180deg, #edfbe9, #dcf4d3); }
.thread-message.from-daan { background: linear-gradient(180deg, #f3ecff, #e7dcff); }
.thread-message.from-system { background: linear-gradient(180deg, #fff3f3, #ffe0e0); }
.thread-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:#6283a8; margin-bottom:6px; }
.thread-author { color:#0f4d91; }
.message-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.02em; }
.message-tag.internal { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.message-tag.external { background:#dcedff; color:#14579b; border:1px solid rgba(31,130,233,.24); }
.message-tag.system { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.thread-message p { margin:0; font-size:13px; line-height:1.5; color:#285d96; }
.composer-box { margin-top:12px; display:grid; gap:8px; }
.message-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 10px 12px; font: inherit; color:#114f95; background:#fff; min-height: 42px; height: 42px; resize: vertical; }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.audience-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#587da9; }
.audience-switch label { display:inline-flex; align-items:center; gap:5px; padding: 7px 9px; border-radius: 999px; background: rgba(237,246,255,.9); border:1px solid rgba(170,204,238,.56); cursor:pointer; }
.compact-send { padding: 10px 12px; font-size: 13px; margin-left:auto; }
.resizable-textarea { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 42px; }
.solution-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 98px; }
.solution-hint { margin: 8px 0 10px; font-size: 12px; color:#6786aa; }
.solution-status { margin: 10px 0 12px; display:grid; gap:7px; }
.solution-status-title { font-size:12px; font-weight:800; color:#5a7ea8; }
.radio-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:7px 10px; }
.radio-option { display:flex; align-items:flex-start; gap:8px; padding:0; border:none; border-radius:0; background:transparent; font-size:12px; font-weight:700; color:#285d96; }
.solution-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.solution-close { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#456f9b; }
.solution-send { padding: 10px 14px; margin-left:auto; }
.history-item { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: start; padding: 3px 0; border-top: 1px solid rgba(17, 79, 149, .08); font-size: 13px; color: #285d96; }
.history-item:first-child { border-top:0; }
.history-meta { color:#6283a8; font-size:12px; }
.history-meta strong { color:#0f4d91; margin-left:8px; }
.history-action { color:#285d96; }
.summary-grid, .process-note, .action-row, .detail-grid, .detail-intro { display:none !important; }
.site-footer { margin-top: 22px; padding: 24px 0 22px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92)); border-top: 1px solid rgba(170,204,238,.62); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 24px rgba(35,100,177,.06); }
.footer-grid { width: min(1220px, calc(100% - 30px)); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
.footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { width: min(1220px, calc(100% - 30px)); margin: 18px auto 0; padding-top: 14px; border-top: 1px solid rgba(170,204,238,.56); color: #6b86aa; font-size: 13px; font-weight: 700; }
@media (max-width: 1080px) {
.admin-management-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.admin-header-row { grid-template-columns: 1fr; }
.admin-nav-pills { justify-content: flex-start; overflow-x: auto; }
.admin-hero-top { grid-template-columns: 1fr; }
.admin-filter-row { flex-basis: 100%; }
.filter-chip-right { margin-left: 0; }
.admin-detail-head { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.detail-table th, .detail-table td { display:block; width:100%; }
.detail-table th { padding-bottom: 3px; }
.history-item { grid-template-columns: 1fr; gap: 3px; }
.composer-actions { align-items: stretch; }
.compact-send { width: 100%; }
}
.hub-page { padding: 22px 0 28px; }
.breadcrumb-bar {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin: 0 0 14px;
font-size:13px; font-weight:800; color:#5f7ea5;
}
.breadcrumb-bar a { color:#2364a7; text-decoration:none; }
.breadcrumb-bar a:hover { text-decoration:underline; }
.breadcrumb-sep { opacity:.7; }
.settings-intro-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 22px 24px;
margin-bottom: 16px;
}
.settings-intro-top {
display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;
}
.settings-intro-title { margin:0 0 8px; font-size:24px; line-height:1.18; color:#0f4d91; }
.settings-intro-text { margin:0; max-width:780px; font-size:14px; line-height:1.6; color:#496d99; }
.settings-intro-note {
margin-top:14px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10);
font-size:13px; line-height:1.55; color:#5b7ba2;
}
.hub-stat-card {
min-width: 0;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94, 159, 225, .22);
border-radius: 18px;
padding: 14px 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.hub-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
.hub-stat-value { margin-top:6px; font-size:29px; font-weight:900; color:#0f4d91; }
.hub-stat-sub { margin-top:4px; font-size:12px; line-height:1.45; color:#5f7ea5; }
.hub-grid {
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.hub-tile {
position:relative;
border-radius:24px;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.96));
border:1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
padding:18px 18px 16px;
display:grid; gap:12px;
min-height: 250px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hub-tile:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(35,100,177,.16);
border-color: rgba(31,130,233,.32);
background: linear-gradient(180deg, #ffffff, #eaf4ff);
}
.hub-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hub-icon {
width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
color:#fff; font-size:25px; box-shadow: var(--shadow-soft);
}
.hub-icon.frontpage { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.hub-icon.popup { background: linear-gradient(180deg, #ffb558, #f97e18); }
.hub-icon.messages { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.hub-icon.links { background: linear-gradient(180deg, #79cf5b, #48a432); }
.hub-icon.features { background: linear-gradient(180deg, #ffd45a, #f0b000); color:#8a5d00; }
.hub-icon.tech { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.hub-tag {
display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px;
border-radius:999px; font-size:12px; font-weight:800; color:#175c9f; background:#eaf4ff;
}
.hub-title { margin:0; font-size:20px; line-height:1.18; color:#0f4d91; }
.hub-text { margin:0; font-size:14px; line-height:1.55; color:#55779f; }
.hub-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.hub-list li {
position:relative; padding-left:16px; font-size:13px; line-height:1.48; color:#4f7198;
}
.hub-list li::before {
content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:999px;
background: linear-gradient(180deg, #5eb8ff, #2f8fec);
}
.hub-foot {
margin-top:auto; padding-top:12px; border-top:1px solid rgba(17,79,149,.10);
display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
text-align:center;
}
.hub-link { color:#2364a7; text-decoration:none; font-size:13px; font-weight:900; }
.hub-link:hover { text-decoration:underline; }
.hub-bottom-note {
margin-top:16px;
border-radius:22px;
background: linear-gradient(180deg, #fff8e8, #fff2cf);
border: 1px solid rgba(241, 186, 74, .42);
box-shadow: var(--shadow-soft);
padding: 18px 18px 16px;
}
.hub-bottom-note h3 { margin:0 0 8px; font-size:18px; color:#875f0a; }
.hub-bottom-note p { margin:0; font-size:13px; line-height:1.58; color:#81632a; }
@media (max-width: 1080px) {
.hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.settings-intro-top { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
.hub-grid { grid-template-columns:1fr; }
.settings-intro-card { padding:18px; border-radius:22px; }
.settings-intro-title { font-size:22px; }
}
.popup-page { padding: 22px 0 28px; }
.popup-intro-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 20px 24px 22px;
margin-bottom: 16px;
}
.popup-intro-top { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:start; }
.popup-intro-title { margin:0 0 8px; font-size:28px; line-height:1.12; color:#0f4d91; }
.popup-intro-text { margin:0; max-width:860px; font-size:15px; line-height:1.6; color:#496d99; }
.popup-intro-meta { display:grid; gap:10px; }
.popup-stat { min-width:160px; background:linear-gradient(180deg,#edf6ff,#dbeeff); border:1px solid rgba(94,159,225,.22); border-radius:18px; padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.popup-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
.popup-stat-value { margin-top:5px; font-size:24px; font-weight:900; color:#0f4d91; }
.popup-stat-sub { margin-top:4px; font-size:12px; color:#5f7ea5; line-height:1.45; }
.popup-note-strip { margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.popup-note { border-radius:18px; background:linear-gradient(180deg,#fff,#f4f9ff); border:1px solid rgba(17,79,149,.10); padding:14px; box-shadow: var(--shadow-soft); }
.popup-note strong { display:block; margin-bottom:4px; font-size:14px; }
.popup-note p { margin:0; font-size:12px; line-height:1.45; color:#5a7ba3; }
.popup-layout { display:grid; grid-template-columns: minmax(340px,.95fr) minmax(0,1.25fr); gap:18px; align-items:start; }
.popup-column-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96)); border:1px solid rgba(170,204,238,.58); border-radius:24px; box-shadow: var(--shadow); padding:18px; }
.popup-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.searchbox.compact { min-width:min(100%, 250px); }
.popup-toolbar-right { display:flex; gap:10px; flex-wrap:wrap; }
.filter-select { height:46px; border-radius:16px; border:1px solid rgba(170,204,238,.58); background:rgba(255,255,255,.92); padding:0 14px; font:inherit; color:var(--text); box-shadow:var(--shadow-soft); }
.popup-list { padding-top: 3px; display:grid; gap:10px; max-height:1040px; overflow:auto; padding-right:4px; }
.popup-item { border-radius:20px; border:1px solid rgba(17,79,149,.12); background:linear-gradient(180deg,#ffffff,#f4f9ff); padding:14px; box-shadow: var(--shadow-soft); cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.popup-item:hover, .popup-item.is-active { transform: translateY(-2px); box-shadow:0 16px 28px rgba(35,100,177,.16); border-color: rgba(31,130,233,.38); }
.popup-item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.popup-item-title { margin: 4px 0 4px; font-size: 14px; font-weight: 800; color: #0f4d91; line-height: 1.35; }
.popup-ref { margin:0; font-size:12px; line-height:1.35; color:#6b86a8; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.popup-domain-tag { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:900; }
.popup-domain-tag.info { background:#dceeff; color:#216ab9; }
.popup-domain-tag.warning { background:#fff0d8; color:#c27209; }
.popup-domain-tag.error { background:#fde4e4; color:#b74d4d; }
.popup-domain-tag.critical { background:#f6ddff; color:#7a35b4; }
.popup-snippet { margin:0; font-size:13px; line-height:1.5; color:#5d7087; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.popup-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.popup-section-title h2, .popup-section-title h3 { margin:0; font-size:20px; color:#0f4d91; }
.popup-section-title span { font-size:12px; color:var(--muted); font-weight:700; }
.popup-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px 16px; }
.popup-field, .popup-field-full { display:grid; gap:8px; }
.popup-field-full { grid-column:1 / -1; }
.popup-field label, .popup-field-full label { font-size:13px; font-weight:900; color:#235790; }
.popup-input, .popup-textarea, .popup-select, .popup-readonly { width:100%; border:1px solid rgba(17,79,149,.14); background:rgba(255,255,255,.98); border-radius:16px; padding:13px 14px; font:inherit; color:#134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.popup-select { height:48px; padding:0 14px; line-height:1.35; }
.popup-readonly { background:linear-gradient(180deg,#f7fbff,#eef5ff); color:#4f7198; font-weight:400; }
.popup-textarea { min-height:92px; resize:vertical; }
.popup-toggle-row { display:flex; align-items:center; gap:12px; min-height:48px; }
.toggle { position:relative; display:inline-flex; align-items:center; }
.toggle input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.toggle-ui { width:54px; height:30px; border-radius:999px; background:#d9e7f7; border:1px solid rgba(17,79,149,.16); position:relative; transition: background .18s ease, border-color .18s ease; box-shadow: inset 0 1px 2px rgba(255,255,255,.7); }
.toggle-ui::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:999px; background:#fff; box-shadow:0 3px 8px rgba(17,79,149,.18); transition:left .18s ease; }
.toggle input:checked + .toggle-ui { background:linear-gradient(180deg,#7bd15f,#4baa35); border-color:rgba(76,170,58,.46); }
.toggle input:checked + .toggle-ui::after { left:27px; }
.toggle input:disabled + .toggle-ui { background:#edf3fa; border-color:rgba(17,79,149,.08); opacity:.8; }
.toggle-label-copy { font-size:13px; line-height:1.45; color:#5a7ea6; }
.button-config-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.button-card { border-radius:20px; border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg,#fff,#f6fbff); padding:16px; display:grid; gap:12px; }
.button-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.button-card-head h3 { margin:0; font-size:16px; color:#0f4d91; }
.popup-action-row { display:grid; gap:12px; margin-top:14px; }
.readonly-help { font-size:12px; color:#6d88aa; line-height:1.45; }
.button-theme-preview { display:flex; gap:8px; flex-wrap:wrap; }
.theme-pill { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; }
.theme-pill.blue { background:#dceeff; color:#216ab9; border:1px solid #a9cbf2; }
.theme-pill.orange { background:#fff0d8; color:#c27209; border:1px solid #efca8f; }
.theme-pill.red { background:#fde4e4; color:#b74d4d; border:1px solid #efb5b5; }
.theme-pill.grey { background:#eef2f7; color:#70839a; border:1px solid #d3dbe5; }
.popup-history-card { margin-top:16px; border-radius:20px; border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg,#fff,#f6fbff); padding:16px; }
.history-list { display:grid; gap:10px; max-height:240px; overflow:auto; padding-right:4px; }
.history-item { border-radius:16px; border:1px solid rgba(17,79,149,.08); background:#fff; padding:12px 13px; }
.history-item strong { display:block; margin-bottom:4px; font-size:14px; color:#0f4d91; }
.history-item p { margin:0; font-size:13px; line-height:1.5; color:#5d7087; }
.history-meta { margin-top:8px; font-size:12px; color:#6381a6; font-weight:700; }
@media (max-width: 1100px) { .popup-layout, .popup-intro-top { grid-template-columns:1fr; } }
@media (max-width: 820px) { .popup-form-grid, .button-config-grid { grid-template-columns:1fr; } }
</style>
<style>
.page { padding: 22px 0 26px; }
.hero-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.98)); border: 1px solid rgba(170,204,238,.62); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 22px; display:grid; grid-template-columns: 1.5fr .9fr; gap:18px; }
.hero-title { margin:0 0 8px; font-size:20px; color:#0f4d91; }
.hero-text { margin:0; font-size:14px; line-height:1.6; color:#5d7da4; }
.stat-stack { display:grid; gap:10px; }
.compact-stat { min-width:0; padding: 6px 18px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,246,255,.95)); border:1px solid rgba(170,204,238,.55); box-shadow:var(--shadow-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-stat-label { font-weight:900; font-size:14px; color:#0f4d91; }
.hero-stat-sub { font-size:11px; text-align:center; margin-top:-2px; color:#6b86aa; }
.hero-stat-value { font-size:18px; line-height:1; padding-top:2px; font-weight:900; color:#1c66b2; }
.controls-card, .list-card, .detail-card { background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.98)); border:1px solid rgba(170,204,238,.62); border-radius:24px; box-shadow:var(--shadow); }
.controls-card { margin-top:16px; padding:14px 18px; display:grid; grid-template-columns: 1.2fr auto auto auto; gap:10px; align-items:center; }
.search-input, .filter-select { width:100%; border:1px solid rgba(170,204,238,.7); background:#fff; border-radius:14px; padding:10px 12px; font:inherit; color:var(--text); }
.ghost-btn, .solid-btn, .danger-btn { border:0; border-radius:14px; padding:10px 14px; font-size:13px; font-weight:900; cursor:pointer; box-shadow:var(--shadow-soft); }
.ghost-btn { background:linear-gradient(180deg, #ffffff, #edf6ff); color:#1c66b2; border:1px solid rgba(170,204,238,.7); }
.solid-btn { background:linear-gradient(180deg, #2f88ea, #176acc); color:#fff; }
.danger-btn { background:linear-gradient(180deg, #ffb0b0, #df4949); color:#fff; }
.main-layout { margin-top:16px; display:grid; grid-template-columns: 1.2fr .9fr; gap:16px; align-items:start; }
.list-head, .detail-head { padding:16px 18px 12px; border-bottom:1px solid rgba(170,204,238,.52); display:flex; justify-content:space-between; align-items:end; gap:12px; }
.card-title { margin:0; font-size:18px; color:#0f4d91; }
.card-sub { margin:4px 0 0; font-size:13px; color:#6a86aa; }
.account-list { padding:12px 14px 14px; display:grid; gap:8px; max-height:720px; overflow:auto; }
.account-item { border:1px solid rgba(170,204,238,.58); border-radius:18px; background:linear-gradient(180deg, #fff, #f3f9ff); padding:12px 13px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; box-shadow:var(--shadow-soft); transition:transform .16s ease, box-shadow .16s ease; }
.account-item:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(35,100,177,.10); }
.account-item.is-active { border-color: rgba(47,136,234,.6); box-shadow: 0 0 0 3px rgba(47,136,234,.08), var(--shadow-soft); }
.account-avatar { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; background:linear-gradient(180deg, #8d6cff, #6248d8); }
.account-main { min-width:0; }
.account-name { margin:0; font-size:15px; font-weight:900; color:#0f4d91; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.account-meta { margin:4px 0 0; font-size:13px; color:#5d7da4; display:flex; flex-wrap:wrap; gap:8px 14px; }
.role-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { display:inline-flex; align-items:center; justify-content:center; min-width: fit-content; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; color:#fff; }
.tag.blue { background:linear-gradient(180deg, #2f88ea, #176acc); }
.tag.green { background:linear-gradient(180deg, #8adf67, #58ba3d); }
.tag.orange { background:linear-gradient(180deg, #ffbb4d, #ff7f12); }
.tag.purple { background:linear-gradient(180deg, #8d6cff, #6248d8); }
.tag.red { background:linear-gradient(180deg, #ff9d9d, #df4949); }
.mini-actions { display:flex; flex-direction:column; gap:8px; }
.mini-btn { border:0; border-radius:12px; padding:8px 10px; background:linear-gradient(180deg, #ffffff, #eef7ff); color:#1c66b2; font-size:12px; font-weight:900; border:1px solid rgba(170,204,238,.64); cursor:pointer; }
.detail-body { padding:16px 18px 18px; display:grid; gap:14px; }
.detail-top { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.detail-avatar { width:62px; height:62px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:22px; font-weight:900; background:linear-gradient(180deg, #8d6cff, #6248d8); }
.detail-name { margin:0; font-size:17px; color:#0f4d91; }
.detail-line { margin:4px 0 0; font-size:13px; color:#5d7da4; }
.detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.info-card { border-radius:18px; border:1px solid rgba(170,204,238,.55); background:linear-gradient(180deg, #fff, #f5faff); padding:12px 13px; }
.info-label { margin:0 0 6px; font-size:12px; color:#6a86aa; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.info-value { margin:0; font-size:14px; color:#0f4d91; font-weight:800; line-height:1.45; }
.inline-list { display:flex; flex-wrap:wrap; gap:6px; }
.section-card { border-radius:18px; border:1px solid rgba(170,204,238,.55); background:linear-gradient(180deg, #fff, #f5faff); padding:12px 13px; }
.section-title { margin:0 0 8px; font-size:14px; color:#0f4d91; }
.log-list { display:grid; gap:7px; }
.log-item { font-size:13px; color:#5d7da4; padding:7px 0; border-top:1px solid rgba(17,79,149,.08); }
.log-item:first-child { border-top:0; padding-top:0; }
.save-row { display:flex; justify-content:center; margin: 16px 0 18px; }
.save-row .action-btn { min-width: 220px; }
.action-row { display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width: 1080px) { .hero-card, .main-layout { grid-template-columns:1fr; } .controls-card { grid-template-columns:1fr 1fr; } .detail-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) { .controls-card { grid-template-columns:1fr; } .account-item { grid-template-columns:auto 1fr; } .mini-actions { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; } }
.hub-page { padding: 22px 0 28px; }
.breadcrumb-bar {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin: 0 0 14px;
font-size:13px; font-weight:800; color:#5f7ea5;
}
.breadcrumb-bar a { color:#2364a7; text-decoration:none; }
.breadcrumb-bar a:hover { text-decoration:underline; }
.breadcrumb-sep { opacity:.7; }
.settings-intro-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 22px 24px;
margin-bottom: 16px;
}
.settings-intro-top {
display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;
}
.settings-intro-title { margin:0 0 8px; font-size:24px; line-height:1.18; color:#0f4d91; }
.settings-intro-text { margin:0; max-width:780px; font-size:14px; line-height:1.6; color:#496d99; }
.settings-intro-note {
margin-top:14px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10);
font-size:13px; line-height:1.55; color:#5b7ba2;
}
.hub-stat-card {
min-width: 0;
background: linear-gradient(180deg, #edf6ff, #dbeeff);
border: 1px solid rgba(94, 159, 225, .22);
border-radius: 18px;
padding: 14px 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.hub-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
.hub-stat-value { margin-top:6px; font-size:29px; font-weight:900; color:#0f4d91; }
.hub-stat-sub { margin-top:4px; font-size:12px; line-height:1.45; color:#5f7ea5; }
.hub-grid {
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.hub-tile {
position:relative;
border-radius:24px;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.96));
border:1px solid rgba(170,204,238,.58);
box-shadow: var(--shadow-soft);
padding:18px 18px 16px;
display:grid; gap:12px;
min-height: 250px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hub-tile:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(35,100,177,.16);
border-color: rgba(31,130,233,.32);
background: linear-gradient(180deg, #ffffff, #eaf4ff);
}
.hub-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hub-icon {
width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
color:#fff; font-size:25px; box-shadow: var(--shadow-soft);
}
.hub-icon.frontpage { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.hub-icon.popup { background: linear-gradient(180deg, #ffb558, #f97e18); }
.hub-icon.messages { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.hub-icon.links { background: linear-gradient(180deg, #79cf5b, #48a432); }
.hub-icon.features { background: linear-gradient(180deg, #ffd45a, #f0b000); color:#8a5d00; }
.hub-icon.tech { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.hub-tag {
display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px;
border-radius:999px; font-size:12px; font-weight:800; color:#175c9f; background:#eaf4ff;
}
.hub-title { margin:0; font-size:20px; line-height:1.18; color:#0f4d91; }
.hub-text { margin:0; font-size:14px; line-height:1.55; color:#55779f; }
.hub-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.hub-list li {
position:relative; padding-left:16px; font-size:13px; line-height:1.48; color:#4f7198;
}
.hub-list li::before {
content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:999px;
background: linear-gradient(180deg, #5eb8ff, #2f8fec);
}
.hub-foot {
margin-top:auto; padding-top:12px; border-top:1px solid rgba(17,79,149,.10);
display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
text-align:center;
}
.hub-link { color:#2364a7; text-decoration:none; font-size:13px; font-weight:900; }
.hub-link:hover { text-decoration:underline; }
.hub-bottom-note {
margin-top:16px;
border-radius:22px;
background: linear-gradient(180deg, #fff8e8, #fff2cf);
border: 1px solid rgba(241, 186, 74, .42);
box-shadow: var(--shadow-soft);
padding: 18px 18px 16px;
}
.hub-bottom-note h3 { margin:0 0 8px; font-size:18px; color:#875f0a; }
.hub-bottom-note p { margin:0; font-size:13px; line-height:1.58; color:#81632a; }
@media (max-width: 1080px) {
.hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.settings-intro-top { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
.hub-grid { grid-template-columns:1fr; }
.settings-intro-card { padding:18px; border-radius:22px; }
.settings-intro-title { font-size:22px; }
}
.popup-page { padding: 22px 0 28px; }
.popup-intro-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 20px 24px 22px;
margin-bottom: 16px;
}
.popup-intro-top { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:start; }
.popup-intro-title { margin:0 0 8px; font-size:28px; line-height:1.12; color:#0f4d91; }
.popup-intro-text { margin:0; max-width:860px; font-size:15px; line-height:1.6; color:#496d99; }
.popup-intro-meta { display:grid; gap:10px; }
.popup-stat { min-width:160px; background:linear-gradient(180deg,#edf6ff,#dbeeff); border:1px solid rgba(94,159,225,.22); border-radius:18px; padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.popup-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
.popup-stat-value { margin-top:5px; font-size:24px; font-weight:900; color:#0f4d91; }
.popup-stat-sub { margin-top:4px; font-size:12px; color:#5f7ea5; line-height:1.45; }
.popup-note-strip { margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.popup-note { border-radius:18px; background:linear-gradient(180deg,#fff,#f4f9ff); border:1px solid rgba(17,79,149,.10); padding:14px; box-shadow: var(--shadow-soft); }
.popup-note strong { display:block; margin-bottom:4px; font-size:14px; }
.popup-note p { margin:0; font-size:12px; line-height:1.45; color:#5a7ba3; }
.popup-layout { display:grid; grid-template-columns: minmax(340px,.95fr) minmax(0,1.25fr); gap:18px; align-items:start; }
.popup-column-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96)); border:1px solid rgba(170,204,238,.58); border-radius:24px; box-shadow: var(--shadow); padding:18px; }
.popup-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.searchbox.compact { min-width:min(100%, 250px); }
.popup-toolbar-right { display:flex; gap:10px; flex-wrap:wrap; }
.filter-select { height:46px; border-radius:16px; border:1px solid rgba(170,204,238,.58); background:rgba(255,255,255,.92); padding:0 14px; font:inherit; color:var(--text); box-shadow:var(--shadow-soft); }
.popup-list { padding-top: 3px; display:grid; gap:10px; max-height:1040px; overflow:auto; padding-right:4px; }
.popup-item { border-radius:20px; border:1px solid rgba(17,79,149,.12); background:linear-gradient(180deg,#ffffff,#f4f9ff); padding:14px; box-shadow: var(--shadow-soft); cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.popup-item:hover, .popup-item.is-active { transform: translateY(-2px); box-shadow:0 16px 28px rgba(35,100,177,.16); border-color: rgba(31,130,233,.38); }
.popup-item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.popup-item-title { margin: 4px 0 4px; font-size: 14px; font-weight: 800; color: #0f4d91; line-height: 1.35; }
.popup-ref { margin:0; font-size:12px; line-height:1.35; color:#6b86a8; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.popup-domain-tag { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:900; }
.popup-domain-tag.info { background:#dceeff; color:#216ab9; }
.popup-domain-tag.warning { background:#fff0d8; color:#c27209; }
.popup-domain-tag.error { background:#fde4e4; color:#b74d4d; }
.popup-domain-tag.critical { background:#f6ddff; color:#7a35b4; }
.popup-snippet { margin:0; font-size:13px; line-height:1.5; color:#5d7087; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.popup-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.popup-section-title h2, .popup-section-title h3 { margin:0; font-size:20px; color:#0f4d91; }
.popup-section-title span { font-size:12px; color:var(--muted); font-weight:700; }
.popup-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px 16px; }
.popup-field, .popup-field-full { display:grid; gap:8px; }
.popup-field-full { grid-column:1 / -1; }
.popup-field label, .popup-field-full label { font-size:13px; font-weight:900; color:#235790; }
.popup-input, .popup-textarea, .popup-select, .popup-readonly { width:100%; border:1px solid rgba(17,79,149,.14); background:rgba(255,255,255,.98); border-radius:16px; padding:13px 14px; font:inherit; color:#134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.popup-select { height:48px; padding:0 14px; line-height:1.35; }
.popup-readonly { background:linear-gradient(180deg,#f7fbff,#eef5ff); color:#4f7198; font-weight:400; }
.popup-textarea { min-height:92px; resize:vertical; }
.popup-toggle-row { display:flex; align-items:center; gap:12px; min-height:48px; }
.toggle { position:relative; display:inline-flex; align-items:center; }
.toggle input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.toggle-ui { width:54px; height:30px; border-radius:999px; background:#d9e7f7; border:1px solid rgba(17,79,149,.16); position:relative; transition: background .18s ease, border-color .18s ease; box-shadow: inset 0 1px 2px rgba(255,255,255,.7); }
.toggle-ui::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:999px; background:#fff; box-shadow:0 3px 8px rgba(17,79,149,.18); transition:left .18s ease; }
.toggle input:checked + .toggle-ui { background:linear-gradient(180deg,#7bd15f,#4baa35); border-color:rgba(76,170,58,.46); }
.toggle input:checked + .toggle-ui::after { left:27px; }
.toggle input:disabled + .toggle-ui { background:#edf3fa; border-color:rgba(17,79,149,.08); opacity:.8; }
.toggle-label-copy { font-size:13px; line-height:1.45; color:#5a7ea6; }
.button-config-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.button-card { border-radius:20px; border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg,#fff,#f6fbff); padding:16px; display:grid; gap:12px; }
.button-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.button-card-head h3 { margin:0; font-size:16px; color:#0f4d91; }
.popup-action-row { display:grid; gap:12px; margin-top:14px; }
.readonly-help { font-size:12px; color:#6d88aa; line-height:1.45; }
.button-theme-preview { display:flex; gap:8px; flex-wrap:wrap; }
.theme-pill { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; }
.theme-pill.blue { background:#dceeff; color:#216ab9; border:1px solid #a9cbf2; }
.theme-pill.orange { background:#fff0d8; color:#c27209; border:1px solid #efca8f; }
.theme-pill.red { background:#fde4e4; color:#b74d4d; border:1px solid #efb5b5; }
.theme-pill.grey { background:#eef2f7; color:#70839a; border:1px solid #d3dbe5; }
.popup-history-card { margin-top:16px; border-radius:20px; border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg,#fff,#f6fbff); padding:16px; }
.history-list { display:grid; gap:10px; max-height:240px; overflow:auto; padding-right:4px; }
.history-item { border-radius:16px; border:1px solid rgba(17,79,149,.08); background:#fff; padding:12px 13px; }
.history-item strong { display:block; margin-bottom:4px; font-size:14px; color:#0f4d91; }
.history-item p { margin:0; font-size:13px; line-height:1.5; color:#5d7087; }
.history-meta { margin-top:8px; font-size:12px; color:#6381a6; font-weight:700; }
@media (max-width: 1100px) { .popup-layout, .popup-intro-top { grid-template-columns:1fr; } }
@media (max-width: 820px) { .popup-form-grid, .button-config-grid { grid-template-columns:1fr; } }
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row admin-header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
<div class="welcome-text">Welkom terug, Noor</div>
</div>
<div aria-label="Beheernavigatie" class="nav-pills admin-nav-pills">
<button class="pill blue" type="button">Site instellingen</button>
<button class="pill orange" type="button">Categorieën beheren</button>
<button class="pill green" type="button">Accounts beheren</button>
</div>
<div class="header-actions">
<button aria-label="Berichten" class="mail-btn">✉️<span class="badge">3</span></button>
<div class="profile-nav">
<button aria-expanded="false" aria-label="Profiel" class="profile-chip" type="button">
<span class="avatar">N</span>
<span class="profile-badge">2</span>
</button>
<div class="dropdown-menu align-right profile-dropdown">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon green">👤</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">⚙</span><span>Voorkeuren</span></a>
<a class="menu-link" href="#"><span class="menu-icon yellow">♿</span><span>Toegankelijkheid</span></a>
<a class="menu-link" href="#"><span class="menu-icon purple">👥</span><span>Vrienden</span></a>
<a class="menu-link is-active" href="#"><span class="menu-icon orange">!</span><span>Meldingen (2)</span></a>
<a class="menu-link" href="#"><span class="menu-icon red">↩</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="popup-page">
<div class="wrap">
<nav aria-label="Breadcrumb" class="breadcrumb-bar">
<a href="#">Home</a>
<span class="breadcrumb-sep">›</span>
<a href="#">Site instellingen</a>
<span class="breadcrumb-sep">›</span>
<span>Popups beheren</span>
</nav>
<section class="popup-intro-card">
<div class="popup-intro-top">
<div>
<h1 class="popup-intro-title">Popups beheren</h1>
<p class="popup-intro-text">Beheer hier de inhoud van bestaande popups binnen OefenHub. Zoek op referentienaam, titel of tekst, filter op domein en pas per popup de inhoud, knopinstellingen en weergave-eigenschappen aan.</p>
</div>
<div class="popup-intro-meta">
<div class="popup-stat">
<div class="popup-stat-label">Popup records</div>
<div class="popup-stat-value">46</div>
<div class="popup-stat-sub">Actieve en historische popupdefinities samen in één overzicht.</div>
</div>
</div>
</div>
</section>
<section aria-label="Popups beheren" class="popup-layout">
<section class="popup-column-card">
<div class="popup-section-title">
<h2>Popupoverzicht</h2>
</div>
<div class="popup-toolbar">
<label aria-label="Zoek popups" class="searchbox compact">
<span>🔎</span>
<input placeholder="Zoek op referentienaam, titel of tekst..." type="search"/>
</label>
<div class="popup-toolbar-right">
<select aria-label="Filter op domein" class="filter-select">
<option>Alle domeinen</option>
<option>Authenticatie</option>
<option>Frontpage</option>
<option>Oefeningen</option>
<option>Relaties</option>
<option>Beheer</option>
<option>Berichten</option>
</select>
</div>
</div>
<div class="popup-list"><article class="popup-item is-active"><div class="popup-item-top"><div><h3 class="popup-ref">AUTH_ROLE_REQUIRED_POPUP</h3><div class="popup-item-title">Rolselectie vereist</div></div><span class="popup-domain-tag warning" title="Type popup: Warning">Authenticatie</span></div><p class="popup-snippet" title="Je bent ingelogd, maar er is nog geen rol geselecteerd. Kies eerst of je OefenHub gebruikt als leerling, docent, ouder/voogd of beheerder.">Je bent ingelogd, maar er is nog geen rol geselecteerd. Kies eerst of je OefenHub gebruikt als leerling, docent, ouder/voogd of beheerder.</p></article><article class="popup-item"><div class="popup-item-top"><div><h3 class="popup-ref">EXERCISE_SHARE_SUCCESS</h3><div class="popup-item-title">Oefening gedeeld</div></div><span class="popup-domain-tag info" title="Type popup: Info">Oefeningen</span></div><p class="popup-snippet" title="De oefening is succesvol gedeeld. De andere gebruiker ziet deze nu terug in het overzicht en kan de oefening openen vanuit de eigen context.">De oefening is succesvol gedeeld. De andere gebruiker ziet deze nu terug in het overzicht en kan de oefening openen vanuit de eigen context.</p></article><article class="popup-item"><div class="popup-item-top"><div><h3 class="popup-ref">ADMIN_CRITICAL_MAINTENANCE_LOCK</h3><div class="popup-item-title">Onderhoud actief</div></div><span class="popup-domain-tag critical" title="Type popup: Critical">Beheer</span></div><p class="popup-snippet" title="Onderhoud is actief. Delen van de applicatie zijn tijdelijk niet beschikbaar totdat het onderhoud is afgerond of expliciet wordt vrijgegeven.">Onderhoud is actief. Delen van de applicatie zijn tijdelijk niet beschikbaar totdat het onderhoud is afgerond of expliciet wordt vrijgegeven.</p></article><article class="popup-item"><div class="popup-item-top"><div><h3 class="popup-ref">RELATION_UNLINK_CONFIRM</h3><div class="popup-item-title">Koppeling verbreken</div></div><span class="popup-domain-tag error" title="Type popup: Error">Relaties</span></div><p class="popup-snippet" title="Weet je zeker dat je deze koppeling wilt verbreken? Afhankelijk van de relatie kunnen berichten en gedeelde context hierdoor veranderen.">Weet je zeker dat je deze koppeling wilt verbreken? Afhankelijk van de relatie kunnen berichten en gedeelde context hierdoor veranderen.</p></article><article class="popup-item"><div class="popup-item-top"><div><h3 class="popup-ref">FRONTPAGE_SIGNUP_INFO</h3><div class="popup-item-title">Meer weten over OefenHub?</div></div><span class="popup-domain-tag info" title="Type popup: Info">Frontpage</span></div><p class="popup-snippet" title="Wil je meer weten over OefenHub? Maak een account aan of bekijk eerst de uitleg over de verschillende rollen en mogelijkheden.">Wil je meer weten over OefenHub? Maak een account aan of bekijk eerst de uitleg over de verschillende rollen en mogelijkheden.</p></article></div>
</section>
<section class="popup-column-card">
<div class="popup-section-title">
<h2>Popupdetails</h2>
</div>
<div class="popup-form-grid">
<div class="popup-field">
<label>Referentienaam</label>
<div class="popup-readonly">AUTH_ROLE_REQUIRED_POPUP</div>
</div>
<div class="popup-field">
<label>Domein</label>
<select class="popup-select">
<option selected="">Authenticatie</option>
<option>Frontpage</option>
<option>Oefeningen</option>
<option>Relaties</option>
<option>Beheer</option>
<option>Berichten</option>
</select>
</div>
<div class="popup-field">
<label>Type</label>
<select class="popup-select">
<option selected="">Warning</option>
<option>Info</option>
<option>Error</option>
<option>Critical</option>
</select>
</div>
<div class="popup-field">
<label>Sluitknop (kruisje)</label>
<div class="popup-toggle-row">
<label class="toggle">
<input type="checkbox"/>
<span class="toggle-ui"></span>
</label>
<div class="toggle-label-copy">Niet zichtbaar. De gebruiker moet een expliciete knopactie kiezen.</div>
</div>
</div>
<div class="popup-field-full">
<label>Titel</label>
<input class="popup-input" type="text" value="Kies eerst je rol"/>
</div>
<div class="popup-field-full">
<label>Tekst</label>
<textarea class="popup-textarea">Je bent ingelogd, maar er is nog geen rol geselecteerd. Kies eerst of je OefenHub gebruikt als leerling, docent, ouder/voogd of beheerder. Daarna opent de juiste frontpage en navigatie.</textarea>
</div>
</div>
<div class="popup-action-row">
<div class="button-config-grid">
<section class="button-card">
<div class="button-card-head">
<h3>Linkerknop</h3>
<label class="toggle">
<input checked="" type="checkbox"/>
<span class="toggle-ui"></span>
</label>
</div>
<div class="popup-field">
<label>Tekst</label>
<input class="popup-input" type="text" value="Rol kiezen"/>
</div>
<div class="popup-field">
<label>Kleurthema</label>
<select class="popup-select">
<option selected="">Primair blauw</option>
<option>Waarschuwing oranje</option>
<option>Neutraal grijs</option>
<option>Gevaar rood</option>
</select>
</div>
<div class="button-theme-preview">
<span class="theme-pill blue">Primair blauw</span>
</div>
<div class="popup-field">
<label>Actie</label>
<div class="popup-readonly">openRoleSelectionFlow</div>
<div class="readonly-help">Read only: actie wordt vanuit code bepaald en is niet via de GUI aanpasbaar.</div>
</div>
</section>
<section class="button-card">
<div class="button-card-head">
<h3>Rechterknop</h3>
<label class="toggle">
<input checked="" type="checkbox"/>
<span class="toggle-ui"></span>
</label>
</div>
<div class="popup-field">
<label>Tekst</label>
<input class="popup-input" type="text" value="Later"/>
</div>
<div class="popup-field">
<label>Kleurthema</label>
<select class="popup-select">
<option>Primair blauw</option>
<option>Waarschuwing oranje</option>
<option selected="">Neutraal grijs</option>
<option>Gevaar rood</option>
</select>
</div>
<div class="button-theme-preview">
<span class="theme-pill grey">Neutraal grijs</span>
</div>
<div class="popup-field">
<label>Actie</label>
<div class="popup-readonly">dismissRolePopupTemporarily</div>
<div class="readonly-help">Read only: deze functie blijft gekoppeld via code/migraties.</div>
</div>
</section>
</div>
</div>
<div class="save-row">
<button class="action-btn primary" type="button">Wijzigingen opslaan</button>
</div>
<section class="popup-history-card">
<div class="popup-section-title">
<h3>Geschiedenis</h3>
</div>
<div class="history-list">
<article class="history-item">
<strong>Titel en tekst bijgewerkt</strong>
<p>De uitleg is aangescherpt zodat duidelijker wordt dat frontpage en navigatie pas na rolkeuze geladen worden.</p>
<div class="history-meta">Vandaag, 10:42 · uitgevoerd door Noor</div>
</article>
<article class="history-item">
<strong>Rechterknop zichtbaar gemaakt</strong>
<p>De knop “Later” is opnieuw ingeschakeld voor tests rondom geforceerde rolkeuze.</p>
<div class="history-meta">Gisteren, 16:08 · uitgevoerd door Lara</div>
</article>
<article class="history-item">
<strong>Kleurthema linkerknop aangepast</strong>
<p>Thema gewijzigd van oranje waarschuwing naar primair blauw om beter aan te sluiten op de rolselectieflow.</p>
<div class="history-meta">26 maart 2026 · uitgevoerd door Emma</div>
</article>
</div>
</section>
</section>
</section>
</div>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meldingen</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</footer>
<script>
(function () {
const profileNav = document.querySelector('.profile-nav');
const profileBtn = profileNav?.querySelector('.profile-chip');
if (profileNav && profileBtn) {
const setOpen = function (open) {
profileNav.classList.toggle('open', open);
profileBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
};
setOpen(false);
profileBtn.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
setOpen(!profileNav.classList.contains('open'));
});
document.addEventListener('click', function (event) {
if (!profileNav.contains(event.target)) {
setOpen(false);
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
setOpen(false);
}
});
}
})();
</script></body>
</html>