:root { --border:#e6e6e6; --muted:#666; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#fafafa; }
.bar {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; border-bottom:1px solid var(--border); background:#fff;
}
.container { padding:16px; max-width:1200px; margin:0 auto; }
.card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select, button {
    padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px;
}
button { cursor:pointer; background:#111; color:#fff; border-color:#111; }
button.ghost { background:#fff; color:#111; border-color:var(--border); }
button:disabled { opacity:.6; cursor:not-allowed; }
hr { border:none; border-top:1px solid var(--border); margin:14px 0; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.badge { margin-left:10px; color:#111; font-size:13px; }

.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.right {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-end;
    align-items: stretch;

}
.right > button{
    margin-right:10px;
         }
.left {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: stretch;

}
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

canvas { width:100%; height:auto; border:1px solid var(--border); border-radius:12px; background:#fff; }

.listItem { padding:10px 8px; border-bottom:1px solid #f1f1f1; }
.listItem:hover { background:#fcfcfc; }
.itemTitle { font-weight:650; }
.itemMeta { color:var(--muted); font-size:12px; margin-top:4px; }

.inviteBox { margin-top:12px; padding:12px; border:1px dashed var(--border); border-radius:12px; background:#fff; }

.shareOverlay { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:18px; }
.modalInner { width:min(900px, 100%); }
.modalHeader { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }

.memberRow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 8px; border-bottom:1px solid #f1f1f1; }
.memberActions { display:flex; gap:8px; align-items:center; }
/* Bootstrap input spacing spiller bedre sammen */
.card input, .card select, .card button { border-radius: 10px; }









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

.container {
    max-width: none;     /* fyld hele bredden */
    width: 100%;
    height: calc(100vh - 58px); /* header højde approx */
    padding: 12px;
}

#appPane { height: 100%; }
.layout {
    height: calc(100% - 56px); /* topbar plads */
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 12px;
}

@media (max-width: 1000px) {
    .layout { grid-template-columns: 1fr; }
}




.sidePane {
    height: 100%;
    overflow: auto; /* scroll kun sidepanelet */
}

.topbar .top-actions {
    align-items: center;
    gap: 8px;
}

.sideHeader {
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Kompakte list items */
.listItem {
    padding: 8px 8px;
    border-bottom: 1px solid #f1f1f1;
}

.listItem .row {
    gap: 6px !important;
}

.listItem button {
    padding: 6px 10px;
    font-size: 12px;
}

/* gør knapper mere “inline” */
.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 10px;
}



/* gør canvas mindre på siden */
.canvasPane {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centrer canvas horisontalt */
    justify-content: flex-start;
}

#wheel {
    width: min(1000px, 100%); /* <-- justér tallet (f.eks 700/750/800) */
    height: auto;
    display: block;
    margin: 10px auto 0;
}