:root{
  --bg0:#0b1020;
  --bg1: rgba(20, 24, 38, .78);
  --panel: rgba(18, 18, 22, .75);
  --stroke: rgba(255,255,255,.10);
  --text:#e9eefc;
  --muted: rgba(233,238,252,.72);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 16px;
  --accent: #7c3aed;
  --winOpacity: .92;
  --focus: 0 0 0 3px rgba(124,58,237,.35);
    --iconBox: 104px;          /* wird optional aus JS überschrieben */
  --iconRadius: 18px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.theme-light{
  --bg0:#e8ecf6;
  --bg1: rgba(255,255,255,.72);
  --panel: rgba(255,255,255,.75);
  --stroke: rgba(0,0,0,.10);
  --text:#0b1020;
  --muted: rgba(11,16,32,.70);
  --shadow: 0 18px 55px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:var(--bg0)}
a{color:inherit}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

kbd{border:1px solid var(--stroke);padding:.1rem .35rem;border-radius:8px;background:rgba(255,255,255,.06)}

.iconbtn, .btn, input, button, select { font: inherit; }
.iconbtn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:.55rem .7rem;
  cursor:pointer;
}
.iconbtn:focus-visible{outline:none; box-shadow: var(--focus);}

.btn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px;
  padding:.85rem 1rem;
  cursor:pointer;
  display:flex; gap:.6rem; align-items:center; justify-content:center;
}
.btn.primary{background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.06)); border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));}
.btn:focus-visible{outline:none; box-shadow: var(--focus);}

.alert{
  background: rgba(255, 68, 68, .12);
  border: 1px solid rgba(255, 68, 68, .22);
  border-radius: 14px;
  padding:.85rem 1rem;
  margin:.8rem 0;
}

.auth{min-height:100%;display:grid;place-items:center;padding:24px}
.auth-card{
  width:min(460px, 100%);
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;
  backdrop-filter: blur(14px);
}
.brand{display:flex; gap:14px; align-items:center; margin-bottom:10px}
.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.06));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--stroke));
}
h1{font-size:1.25rem;margin:0}
p{margin:.2rem 0;color:var(--muted)}
.form{display:grid;gap:12px;margin-top:12px}
label span{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  padding:.85rem 1rem;
  color:var(--text);
}
input:focus-visible{outline:none; box-shadow: var(--focus);}
.hint{margin-top:12px;color:var(--muted);font-size:.9rem}

.boot{min-height:100%;display:grid;place-items:center;padding:24px}
.boot-inner{
  width:min(520px,100%);
  text-align:center;
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:26px;
  backdrop-filter: blur(14px);
}
.boot-logo{font-size:2.2rem}
.progress{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--stroke);margin:16px 0 8px}
.progress .bar{height:100%;width:0%;background:var(--accent);transition:width .18s ease}
.small{font-size:.9rem}

.desktop-root{height:100%}
.desktop{
  height:100%;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  outline:none;
}
.icons{position:absolute;inset:14px 14px 60px 14px}
/* --- Desktop Icons (no box, clean) --- */
.desktop-icon{
  position:absolute;
  width: var(--iconBox, 104px);
  user-select:none;
  cursor:grab;

  padding: 6px 4px 8px;
  text-align:center;
  color: var(--text);

  background: transparent;
  border: none;
  box-shadow: none;

  transition: transform .12s ease;
}

.desktop-icon:hover{
  transform: translateY(-2px);
}

.desktop-icon:active{
  transform: translateY(0) scale(.98);
}

.desktop-icon:focus-visible{
  outline:none;
}

/* Icon-Kreis */
.desktop-icon .ico{
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  border-radius: 16px;

  display:grid;
  place-items:center;

  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.10));
  box-shadow:
    0 8px 26px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.desktop-icon .ico i{
  font-size: 1.5rem;
  color: var(--text);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* Label */
.desktop-icon .lbl{
  display:block;
  max-width: 100%;
  padding: 4px 8px;

  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;

  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--text);

  text-shadow: 0 2px 8px rgba(0,0,0,.45);

  white-space: normal;        /* ✅ Umbruch erlauben */
  word-break: break-word;     /* ✅ Lange Wörter umbrechen */
  overflow-wrap: anywhere;    /* ✅ Notfalls überall umbrechen */
}


/* Dragging */
.desktop-icon.dragging{
  opacity:.9;
  cursor:grabbing;
  transform: scale(1.05);
}


.windows{
  position:absolute;
  inset:0 0 52px 0;  /* bis zur Taskbar, aber kein Randkäfig */
  pointer-events:none;
  overflow:visible;
}

.window{
  position:absolute;
  background: rgba(18,18,22,var(--winOpacity));
  border:1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  transform-origin: 25% 90%;
}
.window.enter{animation: winIn .18s ease-out}
.window.leave{animation: winOut .16s ease-in forwards}
@keyframes winIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes winOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94) translateY(12px)}}

.winbar{
  height:44px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px;
  background: rgba(255,255,255,.06);
  border-bottom:1px solid var(--stroke);
}
.winbar .left{display:flex; gap:10px; align-items:center; min-width:0}
.winbar .title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.winbar .controls{display:flex; gap:8px}
.winbar button{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:.35rem .55rem;
  cursor:pointer;
}
.winbar button:focus-visible{outline:none; box-shadow: var(--focus);}
.winbody{flex:1; padding:14px; overflow:auto}
.window.maximized{inset:0 !important; width:auto !important; height:auto !important; border-radius: 0; }

.taskbar{
  position:absolute; left:0; right:0; bottom:0;
  height:52px;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background: rgba(10,12,18,.62);
  border-top:1px solid var(--stroke);
  backdrop-filter: blur(16px);
}
.startbtn{
  width:44px;height:36px;border-radius:14px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.06));
  color:var(--text);
  cursor:pointer;
}
.startbtn:focus-visible{outline:none; box-shadow: var(--focus);}
.taskitems{flex:1; display:flex; gap:8px; overflow:auto; padding:2px}
.taskitem{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:6px 10px;
  cursor:pointer;
  min-width: 140px;
}
.taskitem[aria-selected="true"]{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.06));
}
.tray{display:flex;gap:8px;align-items:center}

.startmenu{
  position:absolute;
  left:10px;
  bottom:62px;
  width:min(420px, 92vw);
  max-height:min(560px, 75vh);
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  overflow:hidden;
}
.start-top{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--stroke)}
.userchip{display:flex;gap:10px;align-items:center}
.avatar{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--stroke)}
.start-body{padding:10px; overflow:auto; max-height: 500px}
.cat{margin-bottom:10px}
.cat h3{margin:10px 6px 6px;font-size:.9rem;color:var(--muted);font-weight:600}
.start-app{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:10px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.start-app:hover{background:rgba(255,255,255,.06); border-color: var(--stroke)}
.start-app:focus-visible{outline:none; box-shadow: var(--focus);}
.start-app i{width:18px}

.notif-stack{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(360px, 92vw);
  pointer-events:none;
}
.notif{
  pointer-events:auto;
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:12px;
  display:flex; gap:12px;
  animation: notifIn .22s ease-out;
}
@keyframes notifIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.notif .nicon{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--stroke)}
.notif .ntxt{flex:1;min-width:0}
.notif .ntitle{font-weight:700}
.notif .ndesc{color:var(--muted);font-size:.92rem}
.notif .close{border:none;background:transparent;color:var(--muted);cursor:pointer}
.notif .close:focus-visible{outline:none; box-shadow: var(--focus); border-radius: 10px}

.widget-panel{
  position:absolute;
  top:0; right:0; bottom:52px;
  width: 20vw;
  min-width: 320px;
  max-width: 420px;
  background: var(--panel);
  border-left:1px solid var(--stroke);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform .22s ease;
  backdrop-filter: blur(16px);
}
.widget-panel.open{transform: translateX(0)}
.widget-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--stroke)}
.widget-body{padding:12px;display:grid;gap:10px}
.widget-card{border:1px solid var(--stroke);border-radius:16px;padding:12px;background:rgba(255,255,255,.06)}

/* -------- App layouts (Members / Roles / Settings) -------- */
.app{display:grid;gap:12px}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app-head h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.app-actions{display:flex;gap:8px;flex-wrap:wrap}

.tablewrap{border:1px solid var(--stroke);border-radius:16px;overflow:auto;background:rgba(255,255,255,.04)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid var(--stroke);text-align:left;vertical-align:top}
.tbl th{position:sticky;top:0;background:rgba(255,255,255,.06)}
.muted{color:var(--muted)}
.td-actions{display:flex;gap:8px}

.split{display:grid;grid-template-columns: 320px 1fr; gap:12px}
@media (max-width: 900px){ .split{grid-template-columns: 1fr} }

.side{border:1px solid var(--stroke);border-radius:16px;background:rgba(255,255,255,.04);overflow:hidden}
.list{display:grid}
.listitem{
  text-align:left;
  border:0;
  border-bottom:1px solid var(--stroke);
  background:transparent;
  color:var(--text);
  padding:12px;
  cursor:pointer;
  display:grid; gap:4px;
}
.listitem:hover{background:rgba(255,255,255,.06)}
.listitem.active{background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.04));}
.listitem:focus-visible{outline:none; box-shadow: var(--focus);}

.main .panel{border:1px solid var(--stroke);border-radius:16px;background:rgba(255,255,255,.04);overflow:hidden}
.panel-head{padding:12px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.panel-body{padding:12px}

.field{display:grid;gap:6px;margin-top:10px}
select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  padding:.75rem 1rem;
  color:var(--text)
}
select:focus-visible{outline:none; box-shadow: var(--focus);}

.permgrid{display:grid;grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:10px}
@media (max-width: 900px){ .permgrid{grid-template-columns: 1fr} }
.perm{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.04);
}
.perm input{margin-top:3px}
.perm strong{display:block}
.perm .muted{display:block;font-size:.9rem}

.dlg::backdrop{background:rgba(0,0,0,.55)}
.dlg{border:0;padding:0;background:transparent}
.dlg-card{width:min(520px, 92vw);border:1px solid var(--stroke);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--stroke)}
.dlg-body{padding:12px}
.dlg-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px;border-top:1px solid var(--stroke)}

.icon-picker{display:grid; gap:10px}

.icon-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(42px,1fr));
  gap:8px;
}

.icon-grid button{
  height:42px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.icon-grid button i{
  font-size:1.15rem;
}

.icon-grid button:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.10);
}

.icon-grid button.active{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.08));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --- Option Cards (Radio/Checkbox) --- */
.opt{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.opt:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}

.opt:active{
  transform: translateY(0);
}

.opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.opt .opt-ui{
  width:22px;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  flex: 0 0 auto;
  margin-top:2px;
  display:grid;
  place-items:center;
}

.opt.opt-radio .opt-ui{
  border-radius:999px;
}

.opt .opt-text strong{
  display:block;
  font-weight:800;
  letter-spacing:.2px;
}

.opt .opt-text .muted{
  display:block;
  margin-top:2px;
  font-size:.92rem;
}

/* checked state */
.opt input:checked ~ .opt-ui{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
              inset 0 1px 0 rgba(255,255,255,.12);
}

.opt.opt-check input:checked ~ .opt-ui::after{
  content: "✓";
  font-weight:900;
  font-size:14px;
  color: var(--text);
  line-height:1;
  transform: translateY(-.5px);
}

.opt.opt-radio input:checked ~ .opt-ui::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--text);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* focus-visible (keyboard accessible) */
.opt:has(input:focus-visible){
  outline:none;
  box-shadow: var(--focus);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
}

/* disabled checkbox look */
.opt input:disabled ~ .opt-ui{
  opacity:.45;
}
.opt:has(input:disabled){
  opacity:.75;
  cursor:not-allowed;
}