:root{
  --forest:#1f3d2c;
  --olive:#5c6b30;
  --orange:#d9491f;
  --cream:#f4f1e8;
  --line:#d8d2c2;
  --ink:#22241f;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',-apple-system,Segoe UI,sans-serif;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  height:100vh;
  overflow:hidden;
}
/* ---------- Sidebar ---------- */
#sidebar{
  width:300px;
  min-width:300px;
  background:var(--forest);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
#sidebar h1{
  font-family:'Bebas Neue',Inter,sans-serif;
  letter-spacing:1px;
  font-size:26px;
  margin:18px 16px 4px;
}
#sidebar .sub{
  margin:0 16px 16px;
  font-size:12px;
  opacity:.7;
}
.section{
  padding:0 16px 16px;
  border-bottom:1px solid rgba(244,241,232,.15);
}
.section h2{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  opacity:.65;
  margin:14px 0 8px;
}
#loginBox input{
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.25);
  color:var(--cream);
  border-radius:4px;
  padding:6px 8px;
  font-size:12px;
}
#adminBadge{display:flex;font-size:12px;}

.item-card{
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.18);
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:6px;
  cursor:grab;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.item-card:hover{background:rgba(244,241,232,.16);}
.item-card .meta{opacity:.6;font-size:11px;white-space:nowrap;}
.item-card .del{opacity:.4;cursor:pointer;font-size:14px;padding:0 4px;}
.item-card .del:hover{opacity:1;color:var(--orange);}

#addForm{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
#addForm input,#addForm select{
  background:rgba(244,241,232,.08);
  border:1px solid rgba(244,241,232,.25);
  color:var(--cream);
  border-radius:4px;
  padding:6px 8px;
  font-size:12px;
}
#addForm button{
  background:var(--orange);
  color:white;
  border:none;
  border-radius:4px;
  padding:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.3px;
}
#addForm button:hover{background:#bf3c17;}

/* ---------- Main ---------- */
#main{flex:1;display:flex;flex-direction:column;min-width:0;}
#toolbar{
  background:white;
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
#toolbar input[type=text]{
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 10px;
  font-size:14px;
  font-weight:600;
  width:220px;
}
#toolbar select, #toolbar input[type=number]{
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 8px;
  font-size:12px;
}
#toolbar button{
  background:var(--forest);
  color:white;
  border:none;
  border-radius:4px;
  padding:7px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
#toolbar button.alt{background:var(--olive);}
#toolbar button.danger{background:var(--orange);}
#toolbar button:hover{filter:brightness(1.1);}
.tb-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#777;}
.tb-group{display:flex;align-items:center;gap:5px;}

#canvasWrap{
  flex:1;
  overflow:auto;
  background:#eae6da;
  position:relative;
  padding:30px;
}
#planTitle{
  text-align:center;
  font-family:'Bebas Neue',Inter,sans-serif;
  font-size:22px;
  color:var(--forest);
  margin:4px 0 16px;
}
#canvas{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-color:white;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  margin:0 auto;
}
.placed{
  position:absolute;
  border:2px solid var(--forest);
  background:rgba(92,107,48,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  cursor:move;
  user-select:none;
  line-height:1.2;
  padding:2px;
  overflow:hidden;
}
.placed.circle{border-radius:50%;}
.placed.huette{background:rgba(217,73,31,.12);border-color:var(--orange);}
.placed.selected{outline:3px solid var(--orange);outline-offset:1px;z-index:50;}
.placed .dims{display:block;font-size:9px;font-weight:400;opacity:.65;}
.rotate-handle{
  position:absolute;
  width:14px;height:14px;
  background:var(--orange);
  border:2px solid white;
  border-radius:50%;
  cursor:grab;
  top:-20px;left:50%;
  transform:translateX(-50%);
  z-index:60;
}
.placed .remove-x{
  position:absolute;top:-10px;right:-10px;
  width:18px;height:18px;border-radius:50%;
  background:var(--ink);color:white;
  font-size:11px;line-height:18px;text-align:center;
  cursor:pointer;z-index:60;
}

.placed .pack-btn{
  position:absolute;bottom:-10px;left:-10px;
  width:20px;height:20px;border-radius:50%;
  background:white;border:2px solid var(--orange);
  font-size:11px;line-height:16px;text-align:center;
  cursor:pointer;z-index:55;
}

/* ---------- Packlisten-Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(34,36,31,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:200;
}
.modal-box{
  background:white;border-radius:8px;
  width:min(720px,92vw);max-height:86vh;
  display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.modal-head h2{
  font-family:'Bebas Neue',Inter,sans-serif;
  font-size:20px;color:var(--forest);margin:0;
}
.modal-head-actions{display:flex;gap:8px;}
.modal-head-actions button{
  border:none;border-radius:4px;padding:7px 12px;font-size:12px;
  cursor:pointer;background:var(--forest);color:white;font-weight:600;
}
.modal-head-actions button.close{background:#999;}
.modal-body{padding:16px 20px;overflow-y:auto;}

.pack-table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:13px;}
.pack-table th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:#888;border-bottom:1px solid var(--line);padding:4px 6px;
}
.pack-table td{padding:5px 6px;border-bottom:1px solid #f0eee6;}
.pack-table .checkcell{width:22px;text-align:center;color:#aaa;}
.pack-table .del{opacity:.4;cursor:pointer;margin-left:8px;}
.pack-table .del:hover{opacity:1;color:var(--orange);}

.pack-section-title{
  font-family:'Bebas Neue',Inter,sans-serif;letter-spacing:.5px;
  font-size:16px;color:var(--orange);margin:18px 0 6px;
  border-bottom:2px solid var(--orange);padding-bottom:2px;
}
.pack-add-row{
  display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap;
}
.pack-add-row input{
  border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:12px;
}
.pack-add-row input[type=text]:nth-child(1){flex:1;min-width:140px;}
.pack-add-row input[type=text]:nth-child(4){flex:1;min-width:140px;}
.pack-add-row button{
  background:var(--orange);color:white;border:none;border-radius:4px;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;
}

@media print{
  #sidebar,#toolbar{display:none!important;}
  #canvasWrap{overflow:visible;padding:0;background:white;}
  body{height:auto;}
  #canvas{box-shadow:none;margin:0;}
}

@media print{
  #packlistModal{display:none;}
  body.print-packlist-mode #sidebar,
  body.print-packlist-mode #toolbar,
  body.print-packlist-mode #canvasWrap{display:none!important;}
  body.print-packlist-mode #packlistModal{
    display:flex!important;position:static;background:none;
  }
  body.print-packlist-mode .modal-box{
    box-shadow:none;max-height:none;width:100%;
  }
  body.print-packlist-mode .modal-head-actions{display:none;}
}

@media print{
  .rotate-handle,.remove-x,.pack-btn{display:none!important;}
}