/* PRISMA 4.2 — vensters: titelbalk, menubalk, werkbalk, navigatie, statusbalk */

#desktop { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #3A8C96 0%, var(--desktop) 60%, #24646C 100%); }

/* ---------- generiek venster ---------- */
.xp-window {
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid #0831D9;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 2px #0054E3 inset, 3px 3px 10px rgba(0,0,0,.45);
  padding: 0 3px 3px;
  min-width: 220px;
}
.xp-window.inactive { border-color: #6C82C8; box-shadow: 0 0 0 2px #7A96DF inset, 2px 2px 8px rgba(0,0,0,.3); }
.titlebar {
  flex: none; height: 28px; margin: 0 -3px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 4px 0 7px;
  color: #fff; font-weight: bold; font-size: 13px;
  text-shadow: 1px 1px #0F1089;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #0997FF 0%, #0053EE 8%, #0050EE 40%, #06F 88%, #06F 93%, #005BFF 95%, #003DD7 96%, #003DD7 100%);
  user-select: none; cursor: default;
}
.xp-window.inactive .titlebar { background: linear-gradient(180deg, #7697E7 0%, #7E9EE3 10%, #94AFE8 50%, #97B4E9 90%, #82A5E4 100%); color: #D8E4F8; text-shadow: none; }
.titlebar .t-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar img.t-ico { width: 18px; height: 18px; background: #fff; border-radius: 3px; padding: 1px; }
.tb-btn {
  width: 21px; height: 21px; flex: none;
  border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 70% 80%, #3C8CFF 0%, #2663E0 55%, #1B53C7 100%);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,.25), inset 1px 1px 2px rgba(255,255,255,.4);
  display: grid; place-items: center; padding: 0; cursor: pointer;
}
.tb-btn:hover { filter: brightness(1.15); }
.tb-btn:active { filter: brightness(.9); }
.tb-btn.close { background: radial-gradient(circle at 70% 80%, #E8805F 0%, #D8532E 55%, #C13B17 100%); }
.tb-btn svg { width: 11px; height: 11px; }

/* ---------- applicatievenster ---------- */
.app-window { inset: 10px 10px 10px 10px; }
.app-window.maximized { inset: 0; border-radius: 0; }
.app-window.maximized .titlebar { border-radius: 0; }
.app-window.minimized { display: none; }

.menubar { flex: none; display: flex; gap: 0; padding: 1px 2px; background: var(--panel); border-bottom: 1px solid #fff; position: relative; z-index: 30; }
.menubar .m-item { padding: 2px 8px; cursor: default; border-radius: 0; position: relative; user-select: none; }
.menubar .m-item:hover, .menubar .m-item.open { background: var(--sel); color: #fff; }
.menu-drop {
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: #fff; border: 1px solid #ACA899; box-shadow: 2px 2px 3px rgba(0,0,0,.3);
  padding: 2px; color: #000; z-index: 50;
}
.menu-drop .md-item { display: flex; align-items: center; gap: 8px; padding: 3px 20px 3px 6px; white-space: nowrap; cursor: default; }
.menu-drop .md-item:hover { background: var(--sel); color: #fff; }
.menu-drop .md-item .k { margin-left: auto; padding-left: 20px; color: #777; }
.menu-drop .md-item:hover .k { color: #fff; }
.menu-drop .md-sep { height: 1px; background: #ACA899; margin: 3px 2px; }
.menu-drop .md-item.disabled { color: #ACA899; }

.toolbar {
  flex: none; display: flex; align-items: center; gap: 3px;
  padding: 3px 6px; min-height: 36px;
  background: linear-gradient(180deg, #FEFEFD 0%, #F2F1EA 60%, #E3E0D1 100%);
  border-bottom: 1px solid #C9C5B0; border-top: 1px solid #fff;
}
.tbtn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; font: inherit; color: #000; cursor: pointer;
}
.tbtn:hover:not(:disabled) { border-color: #CECEC3; background: linear-gradient(#FFF, #EAE8DF); }
.tbtn:active:not(:disabled) { background: #E2DFD4; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
.tbtn:disabled { opacity: .45; cursor: default; }
.tb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: #C9C5B0; box-shadow: 1px 0 #fff; }
.tb-search { display: flex; align-items: center; gap: 5px; flex: 1; max-width: 560px; margin: 0 6px; }
.tb-search label { white-space: nowrap; }
.tb-search input { flex: 1; height: 24px; font-size: 13px; }

.app-body { flex: 1; min-height: 0; display: flex; border: 1px solid #7F9DB9; border-top: 0; background: #fff; }

/* ---------- navigatie ---------- */
.nav {
  width: 206px; flex: none; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, #1C3480 0%, var(--navy) 35%, #101E50 100%);
  color: #fff; display: flex; flex-direction: column;
}
.nav-head { padding: 10px 10px 8px; background: #fff; border-bottom: 3px solid var(--geel); }
.nav-head img { width: 100%; max-width: 180px; display: block; }
.nav-user { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.15); display: flex; gap: 8px; align-items: center; }
.nav-user b { display: block; font-size: 12px; }
.nav-user span { font-size: 11px; color: #B8C4E8; }
.nav-user .badge { margin-left: auto; background: var(--geel); color: var(--navy); font-weight: bold; font-size: 10px; padding: 1px 5px; border-radius: 2px; }
.nav-group { padding: 8px 12px 3px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #8FA0D6; display: flex; align-items: center; gap: 6px; }
.nav-group::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.nav a.n-item, .nav .n-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 12px; color: #fff; text-decoration: none;
  border-left: 4px solid transparent; cursor: pointer; position: relative;
}
.nav .n-item:hover { background: rgba(255,255,255,.1); }
.nav .n-item.active { background: rgba(255,202,35,.16); border-left-color: var(--geel); font-weight: bold; }
.nav .n-item.locked { color: #8892B0; }
.nav .n-item.locked .ico:first-child { opacity: .5; filter: grayscale(1); }
.nav .n-item .lock { margin-left: auto; }
.nav .n-item .cnt { margin-left: auto; background: var(--geel); color: var(--navy); font-size: 10px; font-weight: bold; padding: 0 5px; border-radius: 7px; }
.nav-sep { height: 1px; background: rgba(255,255,255,.18); margin: 6px 0; }
.nav-foot { margin-top: auto; padding: 8px 12px; font-size: 10px; color: #6F80B8; }

/* ---------- hoofdgebied ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; position: relative; }
.crumbs { flex: none; padding: 6px 12px; border-bottom: 1px solid #D6D3C2; background: linear-gradient(#FBFAF6, #F1EFE6); font-size: 11px; color: #444; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crumbs a { color: #0046D5; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: #999; }
.page { flex: 1; overflow: auto; padding: 12px 14px 20px; zoom: var(--zoom); position: relative; }
.page-footer { flex: none; padding: 4px 12px; font-size: 10px; color: #777; border-top: 1px solid #E3E1D6; background: #FAFAF7; text-align: center; }

.loader {
  position: absolute; inset: 0; background: rgba(255,255,255,.88);
  display: grid; place-items: center; z-index: 20;
}
.loader .box { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; }

/* ---------- statusbalk ---------- */
.statusbar { flex: none; display: flex; gap: 2px; padding: 3px 2px 1px; font-size: 11px; background: var(--panel); }
.statusbar .sb { padding: 1px 8px; border: 1px solid; border-color: #ACA899 #fff #fff #ACA899; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.statusbar .sb.grow { flex: 1; }
.statusbar .led { width: 8px; height: 8px; border-radius: 50%; background: #3BB54A; box-shadow: 0 0 3px #3BB54A; }

/* ---------- zwevende vensters (DocViewer, Kladblok) ---------- */
#layer-windows { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
#layer-windows .xp-window { pointer-events: auto; }
.float-win .fw-body { flex: 1; min-height: 0; overflow: auto; background: #fff; border: 1px solid #7F9DB9; margin-top: 0; }
.float-win .fw-tools { flex: none; display: flex; gap: 4px; align-items: center; padding: 3px 4px; border-bottom: 1px solid #C9C5B0; background: linear-gradient(#FEFEFD, #ECE9D8); }
.float-win .fw-status { flex: none; font-size: 11px; padding: 2px 6px; color: #444; }
.float-win .titlebar { cursor: move; }
.float-win .resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, #ACA899 50%, #ACA899 58%, transparent 58%, transparent 70%, #ACA899 70%, #ACA899 78%, transparent 78%); }
.float-win.min .fw-body, .float-win.min .fw-tools, .float-win.min .fw-status, .float-win.min .resize { display: none; }
.float-win.min { height: auto !important; }

/* ---------- dialogen ---------- */
#layer-dialogs { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.modal-back { position: absolute; inset: 0; pointer-events: auto; background: rgba(0,0,0,.08); display: grid; place-items: center; }
.dialog { position: relative; width: min(420px, calc(100vw - 32px)); }
.dialog .d-body { display: flex; gap: 14px; padding: 16px 14px 8px; align-items: flex-start; }
.dialog .d-body .d-msg { flex: 1; padding-top: 6px; white-space: pre-line; }
.dialog .d-btns { display: flex; justify-content: center; gap: 8px; padding: 6px 10px 12px; }
.dialog .d-input { margin-top: 8px; width: 100%; }
.dialog.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- ballonmeldingen ---------- */
#layer-balloons { position: fixed; right: 18px; bottom: 34px; z-index: 300; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.balloon {
  pointer-events: auto; width: 300px; background: #FFFFE1; border: 1px solid #000; border-radius: 7px;
  padding: 8px 26px 9px 10px; box-shadow: 2px 3px 6px rgba(0,0,0,.35); position: relative;
  animation: balloonIn .25s ease-out; cursor: pointer;
}
.balloon::after { content: ""; position: absolute; right: 28px; bottom: -11px; width: 16px; height: 11px; background: #FFFFE1; clip-path: polygon(0 0, 100% 0, 100% 100%); border-right: 1px solid #000; }
.balloon b { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.balloon .x { position: absolute; right: 5px; top: 4px; width: 15px; height: 15px; border: 1px solid #999; border-radius: 3px; font-size: 10px; line-height: 12px; text-align: center; background: #fff; cursor: pointer; }
.balloon.out { opacity: 0; transform: translateY(10px); transition: .3s; }
@keyframes balloonIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- bureaubladpictogrammen ---------- */
.desk-icon { position: absolute; width: 84px; text-align: center; color: #fff; text-shadow: 1px 1px 2px #000; cursor: pointer; padding: 4px; border: 1px dotted transparent; }
.desk-icon img { width: 48px; height: 48px; background: #fff; border-radius: 6px; padding: 3px; display: block; margin: 0 auto 4px; }
.desk-icon:hover { border-color: rgba(255,255,255,.6); }

/* ---------- bootscherm ---------- */
.boot { position: fixed; inset: 0; background: #000; color: #C8C8C8; font: 14px/1.6 "Courier New", monospace; padding: 40px; cursor: pointer; z-index: 500; }
.boot .boot-logo { color: #fff; font-weight: bold; margin-bottom: 16px; }
.boot .ok { color: #5BD35B; }
.boot .cursor { display: inline-block; width: 9px; height: 15px; background: #C8C8C8; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.boot .skip { position: absolute; bottom: 20px; left: 40px; color: #666; font-size: 12px; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- loginvenster ---------- */
.login-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100vw - 32px)); }
.login-banner { background: #fff; padding: 14px 18px 10px; border-bottom: 4px solid var(--geel); position: relative; }
.login-banner img { width: 230px; max-width: 100%; display: block; }
.login-banner .sys { position: absolute; right: 14px; bottom: 10px; text-align: right; font-size: 10px; color: var(--navy); line-height: 1.3; }
.login-banner .sys b { font-size: 16px; letter-spacing: 2px; display: block; }
.login-stripe { height: 6px; background: repeating-linear-gradient(90deg, var(--navy) 0 40px, var(--geel) 40px 48px); }
.login-form { padding: 14px 18px 6px; display: grid; grid-template-columns: 130px 1fr; gap: 9px 10px; align-items: center; }
.login-form input { width: 100%; height: 23px; font-size: 13px; }
.login-note { padding: 4px 18px 10px; font-size: 11px; color: #444; display: flex; gap: 8px; align-items: flex-start; }
.login-err { margin: 0 18px 8px; padding: 6px 8px; border: 1px solid #E0B4B4; background: #FFF2F2; color: #8B0000; display: flex; gap: 8px; align-items: center; font-size: 11px; }
.login-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 18px 14px; }

/* ---------- smal scherm ---------- */
@media (max-width: 860px) {
  .app-window { inset: 0; border-radius: 0; }
  .nav { width: 48px; }
  .nav-head, .nav-user > div, .nav-user .badge, .nav-group, .nav-foot, .nav .n-item .lbl, .nav .n-item .lock, .nav .n-item .cnt { display: none; }
  .nav .n-item { justify-content: center; padding: 7px 0; }
  .nav-user { justify-content: center; }
  .tb-search label, .tbtn .lbl { display: none; }
  .statusbar .sb.opt { display: none; }
}